Array Methods

JavaScript flat() Method

Flatten nested arrays into a single-level array with the flat() method.

What is flat()?

The flat() method creates a new array with all sub-array elements concatenated into it. It flattens nested arrays up to a specified depth (default is 1).

Basic flat() Example

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

This example shows how the <code>flat()</code> method removes one level of nesting from an array and returns a new flattened array without modifying the original array.

Run Code

Syntax

flat() Syntax

array.flat(depth);

he <code>flat()</code> method takes an optional depth parameter that defines how many nested levels should be flattened.

Run Code

depth (optional): How many levels deep to flatten (default: 1)

Returns: New flattened array

Examples

Flatten One Level (Default)

Flatten One Level of Array

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

// Same as:
console.log(arr.flat(1)); // [1, 2, 3, 4, 5]

By default, <code>flat()</code> removes only one level of nesting from an array. This example demonstrates flattening a simple nested array.

Run Code

Flatten Multiple Levels

Flatten Deeply Nested Arrays

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

You can pass a depth value to flatten multiple nested levels. Using <code>Infinity</code> completely flattens deeply nested arrays.

Run Code

Flatten Arrays from API Response

Flatten API Response Data

const apiResponse = {
  users: [
    { name: 'Alice', items: [1, 2, 3] },
    { name: 'Bob', items: [4, 5] }
  ]
};

const allItems = apiResponse.users
  .map(user => user.items)
  .flat();
console.log(allItems); // [1, 2, 3, 4, 5]

This example shows how <code>map()</code> and <code>flat()</code> can be combined to merge nested arrays returned from an API into a single array.

Run Code

Remove Empty Values

Remove Empty Array Slots

const arr = [1, [2, [3], 4], , 5]; // Note the empty element
console.log(arr.flat()); // [1, 2, [3], 4, 5] (empty removed)

The <code>flat()</code> method automatically removes empty slots while flattening arrays, producing a clean array result.

Run Code

flat() vs flatMap()

flat() vs flatMap() Example

const arr = [1, 2, 3];

// flat() - just flattens
arr.flat().map(x => x * 2); // Two operations

// flatMap() - map and flatten in one
arr.flatMap(x => [x, x * 2]); // [1, 2, 2, 4, 3, 6]

This example compares <code>flat()</code> and <code>flatMap()</code>. While <code>flat()</code> only flattens arrays, <code>flatMap()</code> performs mapping and flattening in a single operation.

Run Code

Common Mistakes

❌ Using flat() Instead of flatMap()

Using flatMap() for Better Performance

const arr = [1, 2, 3];

// Inefficient
const result = arr.map(x => [x, x * 2]).flat();

// Better
const result = arr.flatMap(x => [x, x * 2]);

Instead of using <code>map()</code> followed by <code>flat()</code>, you can use <code>flatMap()</code> to perform both operations in a single step.

Run Code

❌ Forgetting Depth Can Matter

Depth Parameter Matters

const deeply = [1, [2, [3, [4]]]];
console.log(deeply.flat()); // [1, 2, [3, [4]]] (only 1 level)
console.log(deeply.flat(Infinity)); // [1, 2, 3, 4] (fully flat)

The default depth of <code>flat()</code> is 1. If your array contains deeper nesting, you must increase the depth or use <code>Infinity</code>.

Run Code

FAQs

Does flat() modify the original array?

No, flat() returns a new array and leaves the original unchanged.

What's the best depth parameter?

Use flat(Infinity) for complete flattening, or specify the exact depth needed for performance.

Can flat() remove empty slots?

Removing Empty Slots with flat()

const arr = [1, , [2, , 3], 4];
console.log(arr.flat()); // [1, 2, 3, 4] (empties removed)

The <code>flat()</code> method removes empty slots while flattening arrays, helping produce a clean and continuous array.

Run Code

← Back to Arrays Overview