Flatten array JavaScript: flat, flat(Infinity), flatMap, concat, reduce

Javascript flatten array and js flatten array usually mean turning nested arrays into a single list of values. In modern JavaScript, Array.prototype.flat (ES2019) is the standard array flat javascript tool: it returns a new array and only unwraps elements that are Array instances. For map plus one-level flatten, use flatMap. Older stacks may still use recursion with concat or reduce—the same idea as how to flatten an array in javascript tutorials before flat existed. For building nested structures first, see JavaScript array fill and add to an array.

Tested on: Node.js v20.18.2. A short note after each snippet describes what you should see in the console.

Quick reference

flat / flatMap return new arrays—choose depth, Infinity, or a legacy reducer based on engine support and how deep nesting can grow.

flat() — default depth 1 (flatten array js)

Default depth is 1: only the outermost nested arrays are opened.

const nestedArray = [1, [2, [3, 4], 5], 6];
console.log(nestedArray.flat());

You should see one line like: [ 1, 2, [ 3, 4 ], 5, 6 ].

flat(Infinity) — fully flatten (how to flatten an array in javascript)

Infinity means keep flattening until no nested Array values remain.

const nestedArray = [1, [2, [3, 4], 5], 6];
console.log(nestedArray.flat(Infinity));

You should see one line like: [ 1, 2, 3, 4, 5, 6 ].

flat(depth) — specific depth (js array flatten control)

Pass a numeric depth to flatten exactly that many levels.

console.log([1, [2, [3, [4]]]].flat(2));

You should see one line like: [ 1, 2, 3, [ 4 ] ].

Two levels are flattened; one nested [4] remains.

flatMap — map then flatten one level (flat array js)

Equivalent to map(...).flat(1), but in one method:

console.log([1, 2, 3].flatMap((x) => [x, x * 2]));

You should see one line like: [ 1, 2, 2, 4, 3, 6 ].

Recursive concat loop (flattening an array without flat)

Useful where flat is unavailable; watch stack depth on extremely deep trees.

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

const nestedArray = [1, [2, [3, 4], 5], 6];
console.log(flattenArray(nestedArray));

You should see one line like: [ 1, 2, 3, 4, 5, 6 ].

Recursive reduce + concat

Another recursive style; prefer flat(Infinity) when the runtime supports it.

function flattenArray(arr) {
  return arr.reduce(
    (acc, val) =>
      Array.isArray(val) ? acc.concat(flattenArray(val)) : acc.concat(val),
    []
  );
}

const nestedArray = [1, [2, [3, 4], 5], 6];
console.log(flattenArray(nestedArray));

You should see one line like: [ 1, 2, 3, 4, 5, 6 ].

Non-array elements and sparse arrays

flat does not unwrap arbitrary objects—only Array instances:

console.log([1, 2, { a: 3 }].flat());

You should see one line like: [ 1, 2, { a: 3 } ].

Sparse roots interact with flat in subtle ways; one illustration:

console.log([1, , [3, , 4]].flat());

You should see one line like: [ 1, 3, 4 ].

If you must preserve holes, avoid pipelines that mix flat with sparse data unless you normalize first.

Summary

Modern code starts with flat / flatMap; keep recursive concat in your pocket for pre-ES2019 environments and remember only real Array elements unwrap.

• flat() defaults to depth 1; use flat(Infinity) for arbitrary nesting.
• flatMap is map plus one-level flatten in one pass.
• Recursive concat/reduce patterns cover legacy environments without flat.
• Only real arrays flatten; plain objects and sparse holes need explicit handling.

References

MDN references for flat, flatMap, and classic helpers used in flatten array js recipes.

• MDN: Array.prototype.flat()
• MDN: Array.prototype.flatMap()
• MDN: Array.prototype.concat()
• MDN: Array.prototype.reduce()