How to flatten an array in JavaScript

1flat() and flat(Infinity)Recommended

arr.flat(depth) returns a new array with every sub-array spread into it, recursing up to depth levels. The depth defaults to 1, which is exactly right for the common case of a plain array of arrays. For input nested to an unknown depth, pass Infinity. The deeper examples print through JSON.stringify because Node collapses arrays nested more than two levels down to [Array].

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

// The default depth is 1: only one level of nesting is removed
const deep = [1, [2, [3, [4]]]];
console.log(JSON.stringify(deep.flat()));
console.log(JSON.stringify(deep.flat(2)));
console.log(JSON.stringify(deep.flat(Infinity)));

// flat() returns a new array; the original is untouched
console.log(JSON.stringify(deep));

Prints [ 1, 2, 3, 4, 5, 6 ], then [1,2,[3,[4]]] for the default depth, [1,2,3,[4]] for depth 2, [1,2,3,4] for Infinity, and finally the unchanged [1,[2,[3,[4]]]]. The most common surprise is expecting flat() with no argument to flatten everything: it removes one level and stops. flat is supported in every current browser and in Node 11+, so there is no reason to reach for a library or a polyfill.

2flatMap() (map, then flatten one level)

When each element turns into several values, map gives you an array of arrays that you then have to flatten. flatMap(fn) does both in one pass: it is arr.map(fn).flat() without the intermediate array. Because the callback can return an empty array, it also doubles as a filter and a map at once.

const sentences = ['hello world', 'flat map'];

// map() alone gives you an array of arrays...
console.log(sentences.map((s) => s.split(' ')));
// ...flatMap() flattens that result one level as it goes
console.log(sentences.flatMap((s) => s.split(' ')));

// Return [] to drop an item or [a, b] to emit two: filter + map in one pass
const nums = [1, 2, 3, 4];
console.log(nums.flatMap((n) => (n % 2 === 0 ? [n, n * 10] : [])));

// Always exactly one level: there is no depth argument
console.log(JSON.stringify([1, 2].flatMap((n) => [[n]])));

map prints [ [ 'hello', 'world' ], [ 'flat', 'map' ] ]; flatMap prints [ 'hello', 'world', 'flat', 'map' ]. The filter-and-map call keeps the even numbers and emits each one twice: [ 2, 20, 4, 40 ]. The last line prints [[1],[2]]: a callback that returns nested arrays still leaves one level behind, because flatMap always flattens exactly one level. Chain .flat() after it if you need more.

3Holes, strings and objects

flat has two behaviours worth knowing before you rely on it. It removes holes, the empty slots in a sparse array, from every array it flattens. And it only spreads real arrays (anything Array.isArray accepts): strings, plain objects, Sets and array-like objects stay as single elements.

// flat() skips holes in every array it flattens
const sparse = [1, , 3, [4, , 6]];
console.log(sparse);
console.log(sparse.flat());
console.log([1, , 3].flat(0)); // depth 0: no flattening, holes still go

// undefined and null are real values, not holes, so they stay
console.log([1, undefined, [null, 2]].flat());

// Only real arrays are spread. Strings, objects, Sets and
// array-likes are kept whole, as single elements
const mixed = ['ab', ['cd'], { a: 1 }, new Set([7]), { 0: 'x', length: 1 }];
console.log(mixed.flat());

Node shows the sparse input as [ 1, <1 empty item>, 3, [ 4, <1 empty item>, 6 ] ]; flat() returns [ 1, 3, 4, 6 ], and even flat(0), which flattens nothing, returns [ 1, 3 ]. That makes arr.flat(0) a quick way to compact a sparse array. Explicit undefined and null survive: [ 1, undefined, null, 2 ]. The mixed array prints [ 'ab', 'cd', { a: 1 }, Set(1) { 7 }, { '0': 'x', length: 1 } ]: the string 'ab' is not split into characters, and the Set and the array-like object are left whole. To flatten those too, convert them first with Array.from or write your own rule, as in section 5.

4Older ways: concat.apply, spread and reduce

Before ES2019 the accepted answer was [].concat.apply([], nested). concat spreads any array argument one level into the result, and apply passes each sub-array as a separate argument. The spread version [].concat(...nested) is the same trick in newer syntax, and reduce with concat is the functional-style variant. All three flatten exactly one level.

const nested = [[1, 2], [3, 4], [5, 6]];

// Pre-ES2019: concat() spreads each array argument one level
console.log([].concat.apply([], nested));
console.log([].concat(...nested));

// reduce + concat: same result, but builds a new array at every step
console.log(nested.reduce((acc, arr) => acc.concat(arr), []));

// concat() also accepts plain values, so mixed input works
console.log([].concat(...[1, [2, 3], 4]));

// Spreading passes every sub-array as an argument, which has a limit
const many = Array.from({ length: 500000 }, (_, i) => [i]);
try {
  [].concat(...many);
} catch (err) {
  console.log(err.name + ': ' + err.message);
}
console.log(many.flat().length);

The first three lines all print [ 1, 2, 3, 4, 5, 6 ], and the mixed input gives [ 1, 2, 3, 4 ]. The catch is the last part: apply and spread turn every sub-array into a function argument, and with 500,000 of them the call fails with RangeError: Maximum call stack size exceeded, while many.flat() handles the same input and prints 500000. The reduce version has no argument limit but copies the whole accumulator on every step, which makes it O(n²) on long inputs. Keep these for code that must run on engines older than ES2019; otherwise use flat().

5A recursive flatten

flat(Infinity) already flattens any depth, so a hand-written version is for when you need different rules: flatten Sets as well, stop at a certain type, or transform leaves on the way. The pattern is short. Walk each item, recurse into arrays, and push everything else onto one shared output array, which avoids building and copying a new array at every level.

// Walk each item: recurse into arrays, push everything else
function flatten(items, out = []) {
  for (const item of items) {
    if (Array.isArray(item)) {
      flatten(item, out);
    } else {
      out.push(item);
    }
  }
  return out;
}

const deep = [1, [2, [3, [4, [5]]]], 6];
console.log(flatten(deep));
console.log(deep.flat(Infinity)); // the built-in gives the same result

// for...of visits holes as undefined, unlike flat()
console.log(flatten([1, , [2]]), [1, , [2]].flat());

// The point of writing your own: rules flat() can't express,
// such as also flattening Sets
function flattenAll(items, out = []) {
  for (const item of items) {
    if (Array.isArray(item) || item instanceof Set) {
      flattenAll(item, out);
    } else {
      out.push(item);
    }
  }
  return out;
}
console.log(flattenAll([1, new Set([2, [3, 4]]), [5]]));

Both flatten(deep) and deep.flat(Infinity) print [ 1, 2, 3, 4, 5, 6 ]. They differ on holes: the hand-written version prints [ 1, undefined, 2 ] where flat() prints [ 1, 2 ], because for...of reads an empty slot as undefined. flattenAll descends into the Set as well and prints [ 1, 2, 3, 4, 5 ]. Use Array.isArray rather than instanceof Array for the check, since it also recognises arrays created in another realm.

6Which should you use?