Mapping arrays within arrays using functional programming techniques

Question

Mapping arrays within arrays using functional programming techniques

Imagine you have the following arrays at your disposal:

const array1 = ["a1", "b1", "c1", "d1"],
      array2 = ["a2", "b2"],
      array3 = ["a3", "b3", "c3"]

Do any special functions like ramda exist that can simplify this specific situation, allowing you to work with one or more arrays?

const nestedMap = map => {
    const result = []

    for(let item1 of array1) 
        for(let item2 of array2)
            for(let item3 of array3)
                    result.push(map(item1, item2, item3))
    return result
}

The complete function would look something like this:

// Sample usage
nestedMap((item1, item2, item3) => `${item1} ${item2} ${item3}`, array1, array2, array3)

I'm hoping to find a solution without having to start from scratch.

^{Note: You don't necessarily need to use ramda; vanilla JavaScript or other libraries are also acceptable. I just mentioned ramda as it has many functions that could potentially help with this issue}

javascript arrays functional-programming ramda.js

Answer 1

Answer №1

If arrays are your thing, then the applicative instance can be your best friend. Utilize R.lift to simplify your function in this scenario:

const array1 = ["a1", "b1", "c1", "d1"],
      array2 = ["a2", "b2"],
      array3 = ["a3", "b3", "c3"]

const nestedMap = R.lift((item1, item2, item3) => `${item1} ${item2} ${item3}`)

console.log(nestedMap(array1, array2, array3)

<script src="https://cdnjs.cloudflare.com/ajax/libs/ramda/0.25.0/ramda.min.js"></script>

Answer 2

If arrays are your thing, then the applicative instance can be your best friend. Utilize R.lift to simplify your function in this scenario:

const array1 = ["a1", "b1", "c1", "d1"],
      array2 = ["a2", "b2"],
      array3 = ["a3", "b3", "c3"]

const nestedMap = R.lift((item1, item2, item3) => `${item1} ${item2} ${item3}`)

console.log(nestedMap(array1, array2, array3)

<script src="https://cdnjs.cloudflare.com/ajax/libs/ramda/0.25.0/ramda.min.js"></script>

Answer 3

Answer №2

When working with Ramda, you have access to the xprod function which can provide the cross-product of two lists. With a little tweaking, it's possible to extend this functionality to handle multiple lists like so:

const xproduct = R.reduce(R.pipe(R.xprod, R.map(R.unnest)), [[]])

This allows for the creation of a nested map function with relative ease:

const array1 = ["a1", "b1", "c1", "d1"],
      array2 = ["a2", "b2"],
      array3 = ["a3", "b3", "c3"]

const xproduct = R.reduce(R.pipe(R.xprod, R.map(R.unnest)), [[]])
const nestedMap = (fn, ...arrs) => R.map(R.apply(fn), xproduct(arrs))

console.log(nestedMap((a, b, c) => `${a}-${b}-${c}`, array1, array2, array3))
//==> ["a1-a2-a3", "a1-a2-b3", ...]

<script src="https://cdnjs.cloudflare.com/ajax/libs/ramda/0.25.0/ramda.min.js"></script>

Answer 4

When working with Ramda, you have access to the xprod function which can provide the cross-product of two lists. With a little tweaking, it's possible to extend this functionality to handle multiple lists like so:

const xproduct = R.reduce(R.pipe(R.xprod, R.map(R.unnest)), [[]])

This allows for the creation of a nested map function with relative ease:

const array1 = ["a1", "b1", "c1", "d1"],
      array2 = ["a2", "b2"],
      array3 = ["a3", "b3", "c3"]

const xproduct = R.reduce(R.pipe(R.xprod, R.map(R.unnest)), [[]])
const nestedMap = (fn, ...arrs) => R.map(R.apply(fn), xproduct(arrs))

console.log(nestedMap((a, b, c) => `${a}-${b}-${c}`, array1, array2, array3))
//==> ["a1-a2-a3", "a1-a2-b3", ...]

<script src="https://cdnjs.cloudflare.com/ajax/libs/ramda/0.25.0/ramda.min.js"></script>

Answer 5

Answer №3

One way to tackle this is by following a two-step method:

First, assemble all the products
Next, execute the function mapping process.

const
    nestedMap = (fn, ...array) => array
        .reduce((a, b) => a.reduce((r, v) => r.concat(b.map(w => [].concat(v, w))), []))
        .map(a => fn(...a)),
    array1 = ["a1", "b1", "c1", "d1"],
    array2 = ["a2", "b2"],
    array3 = ["a3", "b3", "c3"],
    result = nestedMap((item1, item2, item3) => `${item1} ${item2} ${item3}`, array1, array2, array3)

console.log(result);

.as-console-wrapper { max-height: 100% !important; top: 0; }

Answer 6

One way to tackle this is by following a two-step method:

First, assemble all the products
Next, execute the function mapping process.

const
    nestedMap = (fn, ...array) => array
        .reduce((a, b) => a.reduce((r, v) => r.concat(b.map(w => [].concat(v, w))), []))
        .map(a => fn(...a)),
    array1 = ["a1", "b1", "c1", "d1"],
    array2 = ["a2", "b2"],
    array3 = ["a3", "b3", "c3"],
    result = nestedMap((item1, item2, item3) => `${item1} ${item2} ${item3}`, array1, array2, array3)

console.log(result);

.as-console-wrapper { max-height: 100% !important; top: 0; }

Answer 7

Answer №4

Understanding the Implementation

This detailed explanation sheds light on how @ScottChristopher's response functions by showcasing the direct implementation of .ap (and .chain) on the prototype of Array – presented as a learning exercise! No need to panic, even for those obsessed with prototypes...

The main objective here is to illustrate the expected behavior/output using a code snippet that encapsulates all components at once. With just around ~8 lines of code to grasp, the complexity level is minimal; especially when compared to delving into the Rambda source code (which is actually quite neat).

I recently posted another answer that undertakes a similar approach utilizing delimited continuations – if you find this response intriguing, I believe you will also derive enjoyment from exploring that one ^_^

// Array Applicative  
Array.prototype.ap = function (...args)
  {
    const loop = (acc, [x,...xs]) =>
      x === undefined
        ? [ this [0] (...acc) ]
        : x.chain (a =>
            loop (acc.concat ([a]), xs))
    return loop ([], args)
  }
 
// Array Monad
Array.prototype.chain = function chain (f)
  {
    return this.reduce ((acc, x) =>
      acc.concat (f (x)), [])
  }

const array1 = ['a1', 'b1', 'c1', 'd1']
const array2 = ['a2', 'b2']
const array3 = ['a3', 'b3', 'c3']

console.log ([ (x,y,z) => [x,y,z] ] .ap (array1, array2, array3))
// [ [ 'a1', 'a2', 'a3' ],
//   [ 'a1', 'a2', 'b3' ],
//   [ 'a1', 'a2', 'c3' ],
//   [ 'a1', 'b2', 'a3' ],
//   [ 'a1', 'b2', 'b3' ],
//   [ 'a1', 'b2', 'c3' ],
//   [ 'b1', 'a2', 'a3' ],
//   [ 'b1', 'a2', 'b3' ],
//   [ 'b1', 'a2', 'c3' ],
//   [ 'b1', 'b2', 'a3' ],
//   [ 'b1', 'b2', 'b3' ],
//   [ 'b1', 'b2', 'c3' ],
//   [ 'c1', 'a2', 'a3' ],
//   [ 'c1', 'a2', 'b3' ],
//   [ 'c1', 'a2', 'c3' ],
//   [ 'c1', 'b2', 'a3' ],
//   [ 'c1', 'b2', 'b3' ],
//   [ 'c1', 'b2', 'c3' ],
//   [ 'd1', 'a2', 'a3' ],
//   [ 'd1', 'a2', 'b3' ],
//   [ 'd1', 'a2', 'c3' ],
//   [ 'd1', 'b2', 'a3' ],
//   [ 'd1', 'b2', 'b3' ],
//   [ 'd1', 'b2', 'c3' ] ]

Answer 8

Understanding the Implementation

This detailed explanation sheds light on how @ScottChristopher's response functions by showcasing the direct implementation of .ap (and .chain) on the prototype of Array – presented as a learning exercise! No need to panic, even for those obsessed with prototypes...

The main objective here is to illustrate the expected behavior/output using a code snippet that encapsulates all components at once. With just around ~8 lines of code to grasp, the complexity level is minimal; especially when compared to delving into the Rambda source code (which is actually quite neat).

I recently posted another answer that undertakes a similar approach utilizing delimited continuations – if you find this response intriguing, I believe you will also derive enjoyment from exploring that one ^_^

// Array Applicative  
Array.prototype.ap = function (...args)
  {
    const loop = (acc, [x,...xs]) =>
      x === undefined
        ? [ this [0] (...acc) ]
        : x.chain (a =>
            loop (acc.concat ([a]), xs))
    return loop ([], args)
  }
 
// Array Monad
Array.prototype.chain = function chain (f)
  {
    return this.reduce ((acc, x) =>
      acc.concat (f (x)), [])
  }

const array1 = ['a1', 'b1', 'c1', 'd1']
const array2 = ['a2', 'b2']
const array3 = ['a3', 'b3', 'c3']

console.log ([ (x,y,z) => [x,y,z] ] .ap (array1, array2, array3))
// [ [ 'a1', 'a2', 'a3' ],
//   [ 'a1', 'a2', 'b3' ],
//   [ 'a1', 'a2', 'c3' ],
//   [ 'a1', 'b2', 'a3' ],
//   [ 'a1', 'b2', 'b3' ],
//   [ 'a1', 'b2', 'c3' ],
//   [ 'b1', 'a2', 'a3' ],
//   [ 'b1', 'a2', 'b3' ],
//   [ 'b1', 'a2', 'c3' ],
//   [ 'b1', 'b2', 'a3' ],
//   [ 'b1', 'b2', 'b3' ],
//   [ 'b1', 'b2', 'c3' ],
//   [ 'c1', 'a2', 'a3' ],
//   [ 'c1', 'a2', 'b3' ],
//   [ 'c1', 'a2', 'c3' ],
//   [ 'c1', 'b2', 'a3' ],
//   [ 'c1', 'b2', 'b3' ],
//   [ 'c1', 'b2', 'c3' ],
//   [ 'd1', 'a2', 'a3' ],
//   [ 'd1', 'a2', 'b3' ],
//   [ 'd1', 'a2', 'c3' ],
//   [ 'd1', 'b2', 'a3' ],
//   [ 'd1', 'b2', 'b3' ],
//   [ 'd1', 'b2', 'c3' ] ]

Mapping arrays within arrays using functional programming techniques

Answer №1

Answer №2

Answer №3

Answer №4

Similar questions

Can you modify a attribute value in one HTML file from another?

Passing data from parent component to child component in React

DxDataGrid: Implementing a comprehensive validation system for multiple edit fields

A streamlined approach for tallying the total number of swaps needed to insertion sort an array of integers in ascending order

Tips for Wrapping Page Layouts and Routes in Angular 4

Retrieve values from an array of variables based on the values of a different variable

What is the process for closing a bootstrap modal once a form has been submitted successfully?

Monitor and retrieve live updates of links using Javascript

Getting the string value from a table row using JavaScript

Encountering a "require is not defined" error when trying to launch a Selenium

Is there a way to completely define CSS animation using only JavaScript?

Utilize Bootstrap v4.6 to control the visibility of navigation pills based on specific times of the day using JavaScript

Experiencing a problem with the localhost connection

Displaying all divs when the checkboxes are unchecked

Clearing input fields after entering information

Is there a way to deactivate an ng-click function once it has been triggered within an ng-if ng-switch block?

Enable Intellisense for my custom ES6 JavaScript modules in VS Code

Is it possible to create a popup window that remains fixed at the top edge of the screen but scrolls along with the rest of the page if

Retrieve Static Property Values Using jQuery/JavaScript in Backend Code

JavaScript Scrolling Functionality Not Functioning as Expected