Advanced Array Methods

Array flat() & flatMap()

Flatten nested arrays like unpacking nested boxes!

Find videos you like?

Save to resource drawer for future reference!

What is Array flat()?

Think of flat() as unpacking nested boxes! When you have arrays inside arrays (like [1, [2, 3], [4, [5]]]), flat() unpacks them into one single-level array. And flatMap() is like doing map() then flat() in one go - super efficient!

Why Use flat()?

Perfect for cleaning up nested data from APIs, flattening tree structures, or simplifying complex array operations. No more manual nested loops!

📦How flat() Works

1️⃣

Default (1 level)

arr.flat() unpacks one level

🔢

Custom Depth

flat(2) unpacks 2 levels deep

∞

Full Flatten

flat(Infinity) unpacks all levels!

flatMap() - Map + Flat

flatMap() runs a function on each element (like map), then flattens the result by 1 level. More efficient than doing both separately!

arr.flatMap(x => [x * 2]) // Map then flatten

Example 1: Flattening Nested Arrays

Unpack arrays at different depths

javascript

code

DarkEditable

// Nested array
const nested = [1, [2, 3], [4, [5, 6]], 7];

// Flatten 1 level (default)
const flat1 = nested.flat();
console.log(flat1);
// [1, 2, 3, 4, [5, 6], 7]
// Notice [5, 6] is still nested!

// Flatten 2 levels
const flat2 = nested.flat(2);
console.log(flat2);
// [1, 2, 3, 4, 5, 6, 7]
// Completely flat now!

// Flatten ALL levels (Infinity)
const deepNested = [1, [2, [3, [4, [5]]]]];
const fullyFlat = deepNested.flat(Infinity);
console.log(fullyFlat);
// [1, 2, 3, 4, 5]
// No matter how deep, it unpacks everything!

// Real-world: Flatten categories from API
const products = [
  { name: 'Phone', tags: ['electronics', 'mobile'] },
  { name: 'Laptop', tags: ['electronics', 'computer'] },
  { name: 'Shirt', tags: ['clothing', 'fashion'] }
];

const allTags = products.map(p => p.tags).flat();
console.log(allTags);
// ['electronics', 'mobile', 'electronics', 'computer', 'clothing', 'fashion']

// Get unique tags
const uniqueTags = [...new Set(allTags)];
console.log(uniqueTags);
// ['electronics', 'mobile', 'computer', 'clothing', 'fashion']

Console Output

Click "Run Code" to see output here...

Example 2: Using flatMap()

Map and flatten in one efficient step

javascript

code

DarkEditable

// Split sentences into words
const sentences = [
  'Hello world',
  'How are you',
  'JavaScript is awesome'
];

// Using map + flat (2 steps)
const words1 = sentences.map(s => s.split(' ')).flat();
console.log(words1);
// ['Hello', 'world', 'How', 'are', 'you', 'JavaScript', 'is', 'awesome']

// Using flatMap (1 step - better!)
const words2 = sentences.flatMap(s => s.split(' '));
console.log(words2);
// ['Hello', 'world', 'How', 'are', 'you', 'JavaScript', 'is', 'awesome']

// Real-world: Duplicate array elements
const numbers = [1, 2, 3, 4];

// Create pairs [n, n]
const doubled = numbers.flatMap(n => [n, n]);
console.log(doubled);
// [1, 1, 2, 2, 3, 3, 4, 4]

// Filter while mapping
const nums = [1, 2, 3, 4, 5];

// Only return even numbers, doubled
const evenDoubled = nums.flatMap(n => 
  n % 2 === 0 ? [n * 2] : []  // Return empty array to skip odds
);
console.log(evenDoubled);
// [4, 8]  // Only 2*2 and 4*2

// Generate ranges
const ranges = [2, 3, 1].flatMap(n => 
  Array.from({ length: n }, (_, i) => i)
);
console.log(ranges);
// [0, 1, 0, 1, 2, 0]  // 2 numbers, 3 numbers, 1 number

Console Output

Click "Run Code" to see output here...

flat() vs flatMap()

Use flat() When

✅ Already have nested arrays
✅ Just need to flatten
✅ Control depth with number
✅ Simple unpacking needed

Use flatMap() When

✅ Need to map + flatten
✅ Creating nested results
✅ Performance matters
✅ Filtering + mapping together

Key Takeaways

📦

Unpack Nested

flat() removes array nesting levels

🔢

Control Depth

Pass number to control how many levels to unpack

⚡

flatMap()

More efficient than map().flat()

∞

Full Flatten

Use flat(Infinity) for any depth

Previous Topic

ArrayBuffer Transfer

Transferring and resizing ArrayBuffer (ES2024).

Next Topic

Array.from

Creating arrays from iterables and array-like objects.

Ask a Question

Have a question about Array flat/flatMap? Ask our AI assistant.

🔐 Login to use AI Assistant

JavaScript Code Editor

Write and experiment with JavaScript code.

Output

Click "Run Code" to see the output.

Advanced Array Methods

Array flat() & flatMap()

Flatten nested arrays like unpacking nested boxes!

Find videos you like?

Save to resource drawer for future reference!

What is Array flat()?

Why Use flat()?

Perfect for cleaning up nested data from APIs, flattening tree structures, or simplifying complex array operations. No more manual nested loops!

📦How flat() Works

1️⃣

Default (1 level)

arr.flat() unpacks one level

🔢

Custom Depth

flat(2) unpacks 2 levels deep

∞

Full Flatten

flat(Infinity) unpacks all levels!

flatMap() - Map + Flat

flatMap() runs a function on each element (like map), then flattens the result by 1 level. More efficient than doing both separately!

arr.flatMap(x => [x * 2]) // Map then flatten

Example 1: Flattening Nested Arrays

Unpack arrays at different depths

javascript

code

DarkEditable

// Nested array
const nested = [1, [2, 3], [4, [5, 6]], 7];

// Flatten 1 level (default)
const flat1 = nested.flat();
console.log(flat1);
// [1, 2, 3, 4, [5, 6], 7]
// Notice [5, 6] is still nested!

// Flatten 2 levels
const flat2 = nested.flat(2);
console.log(flat2);
// [1, 2, 3, 4, 5, 6, 7]
// Completely flat now!

const allTags = products.map(p => p.tags).flat();
console.log(allTags);
// ['electronics', 'mobile', 'electronics', 'computer', 'clothing', 'fashion']

// Get unique tags
const uniqueTags = [...new Set(allTags)];
console.log(uniqueTags);
// ['electronics', 'mobile', 'computer', 'clothing', 'fashion']

Console Output

Click "Run Code" to see output here...

Example 2: Using flatMap()

Map and flatten in one efficient step

javascript

code

DarkEditable

// Split sentences into words
const sentences = [
  'Hello world',
  'How are you',
  'JavaScript is awesome'
];

// Using map + flat (2 steps)
const words1 = sentences.map(s => s.split(' ')).flat();
console.log(words1);
// ['Hello', 'world', 'How', 'are', 'you', 'JavaScript', 'is', 'awesome']

// Using flatMap (1 step - better!)
const words2 = sentences.flatMap(s => s.split(' '));
console.log(words2);
// ['Hello', 'world', 'How', 'are', 'you', 'JavaScript', 'is', 'awesome']

// Real-world: Duplicate array elements
const numbers = [1, 2, 3, 4];

// Create pairs [n, n]
const doubled = numbers.flatMap(n => [n, n]);
console.log(doubled);
// [1, 1, 2, 2, 3, 3, 4, 4]

// Filter while mapping
const nums = [1, 2, 3, 4, 5];

// Generate ranges
const ranges = [2, 3, 1].flatMap(n => 
  Array.from({ length: n }, (_, i) => i)
);
console.log(ranges);
// [0, 1, 0, 1, 2, 0]  // 2 numbers, 3 numbers, 1 number

Console Output

Click "Run Code" to see output here...

flat() vs flatMap()

Use flat() When

✅ Already have nested arrays
✅ Just need to flatten
✅ Control depth with number
✅ Simple unpacking needed

Use flatMap() When

✅ Need to map + flatten
✅ Creating nested results
✅ Performance matters
✅ Filtering + mapping together

Key Takeaways

📦

Unpack Nested

flat() removes array nesting levels

🔢

Control Depth

Pass number to control how many levels to unpack

⚡

flatMap()

More efficient than map().flat()

∞

Full Flatten

Use flat(Infinity) for any depth

Coder Pod - Learn Programming Online | AI Coding Tutor & Interview Practice

ArrayBuffer Transfer

Array.from

JavaScript Code Editor

Building Your Learning Module...

Array flat() & flatMap()

What is Array flat()?

Why Use flat()?

Default (1 level)

Custom Depth

Full Flatten

flatMap() - Map + Flat

Example 1: Flattening Nested Arrays

Example 2: Using flatMap()

Use flat() When

Use flatMap() When

Key Takeaways

Unpack Nested

Control Depth

flatMap()

Full Flatten

ArrayBuffer Transfer

Array.from

JavaScript Code Editor

Array flat() & flatMap()

What is Array flat()?

Why Use flat()?

Default (1 level)

Custom Depth

Full Flatten

flatMap() - Map + Flat

Example 1: Flattening Nested Arrays

Example 2: Using flatMap()

Use flat() When

Use flatMap() When

Key Takeaways

Unpack Nested

Control Depth

flatMap()

Full Flatten