Array Flatten in JavaScript

Hi everyone , in this article we are going to explore the flat method of the Array instance, the nested arrays , how flatterning the array is useful and lot more.

What are the nested arrays

Nested arrays are simply arrays inside other arrays.

Example :

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

Here in this example, there are three arrays inside the one main array.

The outer array :

[[1, 2], [3, 4], [5, 6]]

The inner arrays :

[1, 2]
[3, 4]
[5, 6]

Why flattening arrays is useful

Flattening arrays means converting a nested array (arrays inside arrays) into a simple flat structure array. It sounds simple, but it solves a lot of practical problems.

Most array methods in JavaScript (map, filter, reduce) expect a flat structure.

Example :

let users = [
  { name: "A", posts: ["p1", "p2"] },
  { name: "B", posts: ["p3"] }
];

// In javascript we have flat function to flattern the array.
let allPosts = users.map(u => u.posts).flat();
// ["p1", "p2", "p3"]

Different approaches to flatten arrays

1. Array.prototype.flat()

The flat() method of Array instances creates a new array with all sub-array elements concatenated into it recursively up to the specified depth.

Example :

const arr1 = [0, 1, 2, [3, 4]];

console.log(arr1.flat());
// expected output: Array [0, 1, 2, 3, 4]

const arr2 = [0, 1, [2, [3, [4, 5]]]];

console.log(arr2.flat());
// expected output: Array [0, 1, 2, Array [3, Array [4, 5]]]

console.log(arr2.flat(2));
// expected output: Array [0, 1, 2, 3, Array [4, 5]]

console.log(arr2.flat(Infinity));
// expected output: Array [0, 1, 2, 3, 4, 5]

2. Using Recursion

Recursion involves a function calling itself to break down nested arrays until only primitive values remain. This method is readable but can cause stack overflow errors for extremely deep arrays.

function flattenRecursive(arr) {
  let result = [];
  for (let i = 0; i < arr.length; i++) {
    if (Array.isArray(arr[i])) {
      result = result.concat(flattenRecursive(arr[i]));
    } else {
      result.push(arr[i]);
    }
  }
  return result;
}   

In this example, we are runningthe loop over the outer most array till its length. Inside that we are handling the array seperately. If on any index the strucutre is of type array again return the same function with the new nested array.

3.Iterative Approach (Stack)

An iterative approach uses a stack (last-in, first-out) to handle nesting without recursion, avoiding stack overflow issues. It processes elements by popping from the stack and pushing non-array items to the result.

function flattenIterative(arr) {
  const stack = [...arr];
  const result = [];
  while (stack.length > 0) {
    const item = stack.pop();
    if (Array.isArray(item)) {
      stack.push(...item); // Unwrap and push back
    } else {
      result.push(item);
    }
  }
  return result.reverse(); // Reverse to maintain original order
}