In JavaScript, loop through an array of arrays and combine them using the concat

Question

In JavaScript, loop through an array of arrays and combine them using the concat

If I have an array like [["a", "b"], ["c", "d"]], is there a way to iterate, reduce, map, or join this array in order to get the desired output of ["ac", "ad", "bc", "bd"]? What if the array is structured as

[["a", "b"], ["c", "d"], ["e", "f"]]

; how can we then obtain

["ace", "acf", "ade", "adf", "bce", "bcf", "bde", "bdf"]

?

Is it possible to achieve this using array iteration methods?

I attempted to use the reduce method:


const output = [];
const solution = array.reduce((cumulative, individual) => {
  for (let i = 0; i <= cumulative.length; i++) {
    for (let j = 0; j <= individual.length; j++) {
      output.push(`${cumulative[i]} + ${individual[j]}`);
    }
  }
});
console.log(output);

However, my code did not produce the exact desired output.

javascript arrays typescript

Answer 1

Answer №1

One possible solution is to implement a recursive function that iterates over the arrays, concatenating each element with the results from the subsequent arrays:


const concatenateArrays = (arrays) => {
  const currentArray = arrays.shift();
  
  if (!currentArray) return;
  
  const result = [];
  
  for (const nextElement of concatenateArrays(arrays) || ['']) {
    for (const char of currentArray) {
      result.push(char + nextElement);
    }
  }
  
  return result;
}

const arraysToConcatenate = [["a", "b"], ["c", "d"], ["e", "f"]];
console.log(concatenateArrays(arraysToConcatenate));

Answer 2

One possible solution is to implement a recursive function that iterates over the arrays, concatenating each element with the results from the subsequent arrays:


const concatenateArrays = (arrays) => {
  const currentArray = arrays.shift();
  
  if (!currentArray) return;
  
  const result = [];
  
  for (const nextElement of concatenateArrays(arrays) || ['']) {
    for (const char of currentArray) {
      result.push(char + nextElement);
    }
  }
  
  return result;
}

const arraysToConcatenate = [["a", "b"], ["c", "d"], ["e", "f"]];
console.log(concatenateArrays(arraysToConcatenate));

Answer 3

Answer №2

You can achieve this by using the reduce and flat methods

arr1= [["a", "b"], ["c", "d"]] ;
arr2=[["a", "b"], ["c", "d"], ["e", "f"]];
arr3=[["a", "b"], ["c", "d"], ["e", "f"],, ["g", "h"]];
function combineArrays(arr) {
  return arr.reduce(function(a, b) {
     return a.map( function(x) { return b.map(function(y) { return x.concat([y])})}).flat().flat()}, [[]]);
}
console.log(combineArrays(arr1)); 

console.log(combineArrays(arr2));

console.log(combineArrays(arr3));

Answer 4

You can achieve this by using the reduce and flat methods

arr1= [["a", "b"], ["c", "d"]] ;
arr2=[["a", "b"], ["c", "d"], ["e", "f"]];
arr3=[["a", "b"], ["c", "d"], ["e", "f"],, ["g", "h"]];
function combineArrays(arr) {
  return arr.reduce(function(a, b) {
     return a.map( function(x) { return b.map(function(y) { return x.concat([y])})}).flat().flat()}, [[]]);
}
console.log(combineArrays(arr1)); 

console.log(combineArrays(arr2));

console.log(combineArrays(arr3));

Answer 5

Answer №3

To achieve this, you can utilize a single `for` loop paired with recursion. In this method, you maintain one parameter to track the index of the current sub-array on which the `for` loop is operating. This process involves incrementing that value at each level. This technique is commonly known as the Cartesian product.

const data = [["a", "b"], ["c", "d"], ["e", "f"]]

function cartesian(data, prev = '', n = 0) {
  const result = []

  if (n >= data.length) {
    result.push(prev);
    return result;
  }

  for (let i = 0; i < data[i].length; i++) {
    let val = prev + data[n][i];
    result.push(...cartesian(data, val, n + 1))
  }

  return result;
}

console.log(cartesian(data));

Another approach involves using the `reduce` method, which generates recursive calls only when the current `n` value is less than `data.length - 1`.

const data = [["a", "b"], ["c", "d"], ["e", "f"]]

function cartesian(data, prev = '', n = 0) {
  return data[n].reduce((r, e) => {
    let value = prev + e;

    if (n < data.length - 1) {
      r.push(...cartesian(data, value, n + 1))
    }

    if (value.length == data.length) {
      r.push(value)
    }

    return r;
  }, [])
}

const result = cartesian(data);
console.log(result);

Answer 6

To achieve this, you can utilize a single `for` loop paired with recursion. In this method, you maintain one parameter to track the index of the current sub-array on which the `for` loop is operating. This process involves incrementing that value at each level. This technique is commonly known as the Cartesian product.

const data = [["a", "b"], ["c", "d"], ["e", "f"]]

function cartesian(data, prev = '', n = 0) {
  const result = []

  if (n >= data.length) {
    result.push(prev);
    return result;
  }

  for (let i = 0; i < data[i].length; i++) {
    let val = prev + data[n][i];
    result.push(...cartesian(data, val, n + 1))
  }

  return result;
}

console.log(cartesian(data));

Another approach involves using the `reduce` method, which generates recursive calls only when the current `n` value is less than `data.length - 1`.

const data = [["a", "b"], ["c", "d"], ["e", "f"]]

function cartesian(data, prev = '', n = 0) {
  return data[n].reduce((r, e) => {
    let value = prev + e;

    if (n < data.length - 1) {
      r.push(...cartesian(data, value, n + 1))
    }

    if (value.length == data.length) {
      r.push(value)
    }

    return r;
  }, [])
}

const result = cartesian(data);
console.log(result);

Answer 7

Answer №4

Take a look at this sequential method. Go through an array of arrays and update the items in the output one by one.

const information = [
  ["x", "y"],
  ["z", "w"],
  ["m", "n"]
];

let result = [""];
information.forEach(arr => {
  const temporary = [];
  arr.forEach(item => result.forEach(curr => temporary.push(`${curr}${item}`)));
  result = [...temporary];
});

console.log(result);

Answer 8

Take a look at this sequential method. Go through an array of arrays and update the items in the output one by one.

const information = [
  ["x", "y"],
  ["z", "w"],
  ["m", "n"]
];

let result = [""];
information.forEach(arr => {
  const temporary = [];
  arr.forEach(item => result.forEach(curr => temporary.push(`${curr}${item}`)));
  result = [...temporary];
});

console.log(result);

In JavaScript, loop through an array of arrays and combine them using the concat

Answer №1

Answer №2

Answer №3

Answer №4

Similar questions

Utilizing Vue.js with Firestore: Retrieve information from Firestore without rendering any data on the screen

Manipulate Browser Navigation Behavior using JavaScript or AngularJS

Optimal method for implementing $scope.$apply(); or $scope in scenarios outside of Angular when working with Angular Components

Creating a PDF document with multiple pages using a PHP loop, integrating with AJAX, and utilizing the m

Using the spread operator in combination with the reduce function in JavaScript

Exploring Typescript: Combining types (rather than intersecting them)

AJAX response for form validation

Failure of jQuery Code Upon Successful Execution

Ensuring that the initial column of a table remains in place while scrolling horizontally

Using JavaScript, include a child class into a parent class

Is it possible to dynamically load an npm package based on the user's browser?

Switching between Login Form and Register Form in VueJS template

Is MongoDB still displaying results when the filter is set to false?

modification of class into hooks, receiving error message 'then' property is not found in type '(dispatch: any) => Promise<void>'

Can you explain the meaning of '<Hero[]>' in programming jargon?

The CSS root variable is failing to have an impact on the HTML element's value

Experience some issues with the NextJS beta app router where the GET request fails when using fetch, but surprisingly works

What could be the reason for typescript not issuing a warning regarding the return type in this specific function?

What is the best way to choose a date and time in a custom format within my React application?

The RC-dock library's 'DockLayout' is not compatible with JSX components. The instance type 'DockLayout' is not a valid JSX element and cannot be used as such