Introduction

Flattening an array of arrays means removing one or more nesting levels so that the inner elements become part of a single outer array. In JavaScript, the best technique depends on how deeply nested the data is and whether you only need a one-level merge or a fully recursive flatten.

One-Level Flattening with flat()

If your structure is a simple array of arrays, Array.prototype.flat() is the clearest built-in option.

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

Output:

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

This removes one nesting level only, which is exactly what most “merge an array of arrays” problems mean.

Deeper Nesting

If the data is nested more deeply, pass an explicit depth:

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

console.log(nested.flat(2));

If you truly want to flatten every nested array regardless of depth:

console.log(nested.flat(Infinity));

That is powerful, but it also means you are intentionally destroying all nested grouping. Make sure that matches the real data model.

reduce() for Controlled Flattening

flat() is concise, but reduce() is useful when you want more control or need to support older environments.

1const chunks = [[1, 2], [3, 4], [5, 6]];
2
3const merged = chunks.reduce((acc, current) => {
4  acc.push(...current);
5  return acc;
6}, []);
7
8console.log(merged);

This is especially handy when you also want to transform or filter elements as you flatten them.

Older Pattern: concat with Spread

Another one-level technique is:

1const chunks = [[1, 2], [3, 4], [5, 6]];
2const merged = [].concat(...chunks);
3
4console.log(merged);

This works because the inner arrays are spread as separate arguments to concat. It still appears in older codebases that predate widespread use of flat().

Recursive Flattening

If you need full control over what counts as flattenable, write a recursive helper.

1function flatten(values) {
2  const result = [];
3
4  for (const value of values) {
5    if (Array.isArray(value)) {
6      result.push(...flatten(value));
7    } else {
8      result.push(value);
9    }
10  }
11
12  return result;
13}
14
15const data = [1, [2, 3], [4, [5, 6]]];
16console.log(flatten(data));

This gives you a place to add custom rules, such as preserving certain nested structures or rejecting non-array containers.

Merge vs Flatten

People often use “merge” and “flatten” interchangeably, but there is a subtle difference:

• merge usually means joining sibling arrays into one
• flatten can mean removing arbitrary nesting depth

For [[1, 2], [3, 4]], both words describe the same outcome. For [1, [2, [3]]], “flatten” is the more precise term.

Being explicit about the required depth helps avoid bugs and over-flattening.

Performance Notes

For everyday code, choose readability first. All of these methods are fine for normal application sizes. If the arrays are extremely large, performance differences can matter, but you should profile before optimizing based on style alone.

In practical code, the larger source of bugs is not raw speed. It is flattening the wrong amount of structure.

Common Pitfalls

• Assuming flat() removes all nesting by default when it only removes one level unless given a depth.
• Flattening arrays whose inner grouping is semantically meaningful, such as pages, transactions, or teams.
• Using recursive flattening blindly on data that may contain very deep or irregular nesting without considering stack depth and data shape.
• Choosing an older concat or reduce pattern when flat() would communicate intent more clearly.
• Forgetting that flattening changes the data model, not just the syntax of access.

Summary

• Use flat() for the clearest built-in way to flatten arrays in modern JavaScript.
• Pass a depth such as 2 or Infinity when the nesting goes deeper than one level.
• Use reduce() or recursion when you need custom flattening behavior.
• '[].concat(...arrays) is a valid older one-level merge pattern.'
• Decide whether you want a one-level merge or a full flatten before picking the implementation.