Flatten a Nested Array in JavaScript
Imagine you have a basket of fruits packed into smaller boxes inside a bigger box. If you want to access all the fruits easily, you'd want to take them out and lay them in one straight line. Similarly, flattening a nested array in JavaScript means taking values from multiple inner arrays and placing them in a single-level array.
Whether you're building a shopping list, transforming API responses, or simply organizing data more cleanly, flattening arrays is a must-have skill in your JavaScript toolbox. Let's walk through a few different techniques to flatten arrays—each designed with simplicity and clarity in mind.
Method 1: Using Array.prototype.flat()
The flat() method is the most straightforward and modern way to flatten arrays. It’s clean, simple, and beginner-friendly. By default, it only flattens one level deep, but you can pass an argument to flatten deeper levels.
const fruits = ["apple", ["banana", "cherry"], ["date", ["elderberry"]]];
const flattened = fruits.flat(2);
console.log(flattened);
["apple", "banana", "cherry", "date", "elderberry"]Method 2: Using Recursion
When the array is deeply nested and you want full control over how it's flattened, a recursive approach is ideal. Recursion allows you to explore and flatten every level of nesting, no matter how deep it goes.
function flattenArray(arr) {
return arr.reduce((acc, val) =>
Array.isArray(val) ? acc.concat(flattenArray(val)) : acc.concat(val), []);
}
const fruits = ["apple", ["banana", ["cherry", ["date"]]], "elderberry"];
const flattened = flattenArray(fruits);
console.log(flattened);
["apple", "banana", "cherry", "date", "elderberry"]Method 3: Using reduce() with a Stack
If recursion feels too abstract or if you’re dealing with performance-sensitive environments, you can use an iterative stack-based approach. This method unfolds the array by pushing items to a stack and processing them one by one.
function flattenWithStack(arr) {
const stack = [...arr];
const result = [];
while (stack.length) {
const next = stack.pop();
if (Array.isArray(next)) {
stack.push(...next);
} else {
result.push(next);
}
}
return result.reverse();
}
const fruits = ["apple", ["banana", ["cherry"]], "date"];
const flattened = flattenWithStack(fruits);
console.log(flattened);
["apple", "banana", "cherry", "date"]Which Method Is Right for You?
If you're just getting started, use flat(). It’s readable, concise, and perfectly suited for small-to-medium tasks. If you're dealing with highly unpredictable or deeply nested data, recursive flattening gives you the flexibility to handle anything. The stack-based version is an excellent alternative if you want to avoid recursion for memory or control reasons.
Final Thoughts
Mastering the art of flattening arrays in JavaScript isn't just a technical skill—it's a thinking tool. It helps you manipulate data elegantly, transform nested structures, and handle real-world problems like parsing JSON responses or reshaping UI lists.
Whether you use flat() for its elegance, recursion for its power, or reduce() for hands-on logic, you now have multiple lenses to look at the same problem—and solve it with clarity. Keep practicing, and soon, these patterns will become second nature in your development journey.