The flat() method creates a new array with all sub-array elements concatenated into it recursively up to the specified depth. This polyfill provides both a simple recursive solution and a spec-compliant depth-aware implementation.
✅ Simple Recursive Implementation
function flattenRecursive(arr) { let result = []; for (const item of arr) { if (Array.isArray(item)) { result = result.concat(flattenRecursive(item)); // recurse } else { result.push(item); // base case } } return result; }
📌 Example
flattenRecursive([1, [2, [3, 4], 5], 6]); // → [1, 2, 3, 4, 5, 6]
🧠 Atom-of-Thoughts Breakdown
-
Base Case:
If the item is not an array , push it to the result.
-
Recursive Case:
If the item is an array , call
flattenRecursive()on it, and concatenate its result. -
Accumulator:
Uses a local
resultarray to collect all flattened items.
🧪 Handles:
- Arbitrary nesting: ✅
- Mixed types: ✅
- Empty arrays: ✅
Here’s a spec-compliant polyfill for Array.prototype.flat , matching ECMAScript behavior:
✅ Flat Polyfill (Depth-Aware)
if (!Array.prototype.flat) { Array.prototype.flat = function(depth = 1) { const result = []; (function flatten(arr, d) { for (const item of arr) { if (Array.isArray(item) && d > 0) { flatten(item, d - 1); } else { result.push(item); } } })(this, depth); return result; }; }
📌 Usage
[1, [2, [3, [4]]]].flat(2); // → [1, 2, 3, [4]]
🧠 Atom-of-Thoughts Breakdown
- Default
depth = 1for single-level flattening. - Recursive helper
flatten(arr, d):
- If item is array and
depth > 0→ recurse withdepth - 1. - Else → push item to result.
- Uses closure
result[]to accumulate flattened values.
🧪 Edge Case Behavior
| Input | Output |
|---|---|
[1, 2, [3]] | [1, 2, 3] |
[1, [2, [3]]]with depth=1 | [1, 2, [3]] |
[1, [2, [3]]]with depth=2 | [1, 2, 3] |
[1, [2, [3]]]with depth=0 | [1, [2, [3]]] |
Quick Quiz
Test your understanding with 3 quick questions
Q1What is the default depth value for `flat()`?
Q2What does `[1, [2, [3, [4]]]].flat(2)` return?
Q3How does the recursive `flat()` polyfill determine when to stop flattening?