Arrays

How to Flatten Nested Arrays

Use .flat() to flatten nested arrays

Quick Answer (2024 ES6+ Way)

javascript

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

Live Example

javascript

const categories = [
  ['fruit', ['apple', 'banana']],
  ['vegetable', ['carrot', 'lettuce']],
  ['dairy', ['milk', 'cheese']]
];

// Flatten one level
const flattened = categories.flat();
console.log(flattened);

// Flatten all levels
const allFlat = categories.flat(Infinity);
console.log(allFlat);

// FlatMap - map and flatten in one step
const numbers = [1, 2, 3];
const doubled = numbers.flatMap(n => [n, n * 2]);
console.log(doubled);

Common Variations

FlatMap for Filtering

javascript

const result = arr.flatMap(item => 
  condition ? [item] : []
);

Remove Empty

javascript

const cleaned = arr.flat().filter(Boolean);

❌ Don't Do This (Outdated Way)

Avoid recursive functions for simple flattening

javascript

// DON'T DO THIS
function flatten(arr) {
  return arr.reduce((acc, val) => 
    Array.isArray(val) ? acc.concat(flatten(val)) : acc.concat(val), []
  );
}

Browser Support

✓ Works in all modern browsers (ES2019+)

#array#flat#flatten