Array Flatten in JavaScript
In this article we will understand nested arrays and how to flatten them in JavaScript. Many beginners(including me) get confused when arrays start containing other arrays inside them. We will learn what nested arrays are, why flattening them is useful, different ways to flatten arrays, and how this topic often appears in coding interviews.
What Nested Arrays Are
A nested array simply means an array that contains another array inside it.
Example:
const arr = [1, 2, [3, 4], 5];
Here the main array contains another array [3, 4]. That makes it a nested array.
Nested arrays can go even deeper.
const arr = [1, [2, [3, 4]], 5];
Here we have arrays inside arrays multiple levels deep. This structure is common when working with data from APIs or complex data structures.
Why Flattening Arrays Is Useful
Flattening an array means converting a nested array into a single-level array.
For example:
const arr = [1, 2, [3, 4], 5];
Flattened version:
[1, 2, 3, 4, 5]
Flattening becomes useful in many situations.
Sometimes APIs return nested arrays that are hard to process. Flattening them makes the data easier to loop through or manipulate. Many array methods like map, filter, and reduce work more smoothly when the array is a single level. Flattening simplifies data processing. It is also useful when combining results from multiple arrays or working with grouped data.
Concept of Flattening Arrays
The basic idea of flattening is simple.
We look at each item of the array. If the item is a normal value, we add it to the result array. If the item is another array, we go inside it and add its elements instead.
Example input:
[1, [2, 3], 4]
Process:
1 → add to result
[2,3] → open it and add 2 and 3
4 → add to result
Result:
[1, 2, 3, 4]
Different Approaches to Flatten Arrays
There are several ways to flatten arrays in JavaScript.
Using flat()
JavaScript provides a built-in method called flat.
const arr = [1, 2, [3, 4]];
const result = arr.flat();
console.log(result);
Output:
[1, 2, 3, 4]
If the array has deeper nesting, we can specify the depth.
arr.flat(2);
If we want to flatten everything regardless of depth:
arr.flat(Infinity);
Using reduce()
Another common approach is using reduce.
const arr = [1, [2, 3], 4];
const result = arr.reduce((acc, curr) => {
return acc.concat(curr);
}, []);
console.log(result);
This works well for one-level nested arrays.
Using recursion
Recursion is often used to flatten arrays of any depth.
function flatten(arr) {
let result = [];
for (let item of arr) {
if (Array.isArray(item)) {
result = result.concat(flatten(item));
} else {
result.push(item);
}
}
return result;
}
const arr = [1, [2, [3, 4]], 5];
console.log(flatten(arr));
Output:
[1, 2, 3, 4, 5]
This method checks if an element is an array. If it is, it recursively flattens it.
Common Interview Scenarios
Flattening arrays is a common topic in JavaScript interviews. One common question is to flatten an array without using the built-in flat method. Interviewers usually expect a recursive solution.
Another scenario is flattening an array only one level deep.
Flattening arrays is a common topic in JavaScript interviews.
One common question is to flatten an array without using the built-in flat method. Interviewers usually expect a recursive solution.
Another scenario is flattening an array only one level deep.
Summary
JavaScript provides different ways to flatten arrays, such as using the built-in flat() method, using reduce(), or writing a recursive function to handle arrays of any depth.
Flattening arrays is also a common topic in coding interviews because it tests a developer’s understanding of arrays, recursion, and problem-solving. Learning how to flatten arrays helps developers work more effectively with structured data in JavaScript.
