How to Merge (Flatten) an Array of Arrays in JavaScript?

Flattening an array means converting a multi-dimensional array (an array containing nested arrays) into a single-dimensional array. There are different ways to Merge or flatten an array of arrays into a single array.

Examples

Input: [[1, 2], [3, 4], [5, 6]];

// Flatten Array
Output: [1, 2, 3, 4, 5, 6];

1. Using Array flat() Method (ES2019)

The flat() method is a built-in function introduced in ES2019 (ES10) that flattens an array by a specified depth.

Shallow Flattening

let nestedArray = [[1, 2], [3, 4], [5, 6]];
let flatArray = nestedArray.flat();

console.log(flatArray); // Output: [1, 2, 3, 4, 5, 6]

Deep Flattening

let deepNestedArray = [1, [2, [3, [4, 5]]]];
let flatArray = deepNestedArray.flat(Infinity);

console.log(flatArray); // Output: [1, 2, 3, 4, 5]

2. Using reduce() Method

The reduce() method can also be used to recursively flatten an array.

let nestedArray = [[1, 2], [3, 4], [5, 6]];

let flatArray = nestedArray.reduce((acc, curr) => acc.concat(curr), []);

console.log(flatArray); // Output: [1, 2, 3, 4, 5, 6]

Deep Flattening with reduce() Method

To handle deep nesting, use a recursive function:

function deepFlatten(array) {
  return array.reduce((acc, curr) => {
    return acc.concat(Array.isArray(curr) ? deepFlatten(curr) : curr);
  }, []);
}

let deepNestedArray = [1, [2, [3, [4, 5]]]];
let flatArray = deepFlatten(deepNestedArray);

console.log(flatArray); // Output: [1, 2, 3, 4, 5]

3. Using Array concat() Method

The concat() method can be used for shallow flattening by combining all sub-arrays into a single array.

let nestedArray = [[1, 2], [3, 4], [5, 6]];
let flatArray = [].concat(...nestedArray);

console.log(flatArray); // Output: [1, 2, 3, 4, 5, 6]

Deep Flattening

For deep flattening, use recursion:

function deepFlatten(array) {
  return [].concat(...array.map(item => (Array.isArray(item) ? deepFlatten(item) : item)));
}

let deepNestedArray = [1, [2, [3, [4, 5]]]];
let flatArray = deepFlatten(deepNestedArray);

console.log(flatArray); // Output: [1, 2, 3, 4, 5]

4. Using Loops

Using a for loop provides full control over the flattening process.

Shallow Flattening

let nestedArray = [[1, 2], [3, 4], [5, 6]];
let flatArray = [];

for (let subArray of nestedArray) {
  flatArray.push(...subArray);
}

console.log(flatArray); // Output: [1, 2, 3, 4, 5, 6]

Deep Flattening

For deep flattening, use a stack-based approach:

function deepFlatten(array) {
  let stack = [...array];
  let result = [];

  while (stack.length) {
    let next = stack.pop();
    if (Array.isArray(next)) {
      stack.push(...next);
    } else {
      result.push(next);
    }
  }

  return result.reverse(); // Reverse to maintain order
}

let deepNestedArray = [1, [2, [3, [4, 5]]]];
let flatArray = deepFlatten(deepNestedArray);

console.log(flatArray); // Output: [1, 2, 3, 4, 5]

5. Using Lodash’s _.flatten() or _.flattenDeep() Methods

If you’re already using Lodash, it provides built-in methods for flattening arrays.

Example: Shallow Flattening

const _ = require('lodash');

let nestedArray = [[1, 2], [3, 4], [5, 6]];
let flatArray = _.flatten(nestedArray);

console.log(flatArray); // Output: [1, 2, 3, 4, 5, 6]

Example: Deep Flattening

let deepNestedArray = [1, [2, [3, [4, 5]]]];
let flatArray = _.flattenDeep(deepNestedArray);

console.log(flatArray); // Output: [1, 2, 3, 4, 5]