Array Flatten in JavaScript
Arrays are one of the most commonly used data structures in JavaScript. Sometimes arrays can contain other arrays inside them. These are called nested arrays. While nested arrays can be useful, many situations require converting them into a single flat array. This process is called array flattening.
In this article, we will understand nested arrays, why flattening is useful, and different ways to flatten arrays in JavaScript.
What Are Nested Arrays ?
A nested array is an array that contains other arrays as its elements.
const arr = [1, [2, 3], [4, 5]];
Visual representation:
[
1,
[2, 3],
[4, 5]
]
Here, the main array contains two inner arrays.
A deeper nested structure can look like this:
const arr = [1, [2, [3, 4]], 5];
Visual structure:
1
└── [2
└── [3,4]
]
5
Why Flattening Arrays Is Useful
Flattening arrays helps simplify data so it can be processed more easily.
Common use cases include:
Processing API responses
Data transformation
Preparing data for loops or algorithms
Handling deeply nested structures
Example:
Nested array:
[1, [2, 3], [4, 5]]
Flattened array:
[1, 2, 3, 4, 5]
Working with a flat array is often easier than dealing with multiple levels of nesting.
Concept of Flattening Arrays
Flattening means removing the nesting and placing all elements into a single array.
Example transformation:
Before flattening: [1, [2, [3, 4]], 5]
After flattening: [1, 2, 3, 4, 5]
Step-by-step idea:
Step 1: [1, [2, [3,4]], 5]
Step 2: [1, 2, [3,4], 5]
Step 3: [1, 2, 3, 4, 5]
Different Approaches to Flatten Array:
- Using Array.flat()
JavaScript provides a built-in method called flat().
const arr = [1, [2, 3], [4, 5]];
const result = arr.flat();
console.log(result);
Output:
[1, 2, 3, 4, 5]
For deeper nesting:
const arr = [1, [2, [3, 4]], 5];
console.log(arr.flat(2));
2 represents the depth level.
To flatten completely:
arr.flat(Infinity);
2. Using Recursion
Recursion is a common interview approach.
function flattenArray(arr) {
let result = [];
for (let item of arr) {
if (Array.isArray(item)) {
result = result.concat(flattenArray(item));
}
else
{
result.push(item);
}
}
return result;
}
const arr = [1, [2, [3, 4]], 5];
console.log(flattenArray(arr));
Output:
[1, 2, 3, 4, 5]
3. Using reduce()
Another functional programming approach:
const arr = [1, [2, [3, 4]], 5];
const flattened = arr.reduce((acc, val) => {
return acc.concat(Array.isArray(val) ? flattened(val) : val);
}, []);
This method combines elements step by step.
- Using Loops
A simple approach using loops:
const arr = [1, [2, 3], [4, 5]];
let result = [];
for (let item of arr) {
if (Array.isArray(item)) {
result.push(...item);
}
else {
result.push(item);
}
}
console.log(result);
Common Interview Scenarios
Array flattening is a very common JavaScript interview question.
Typical questions include:
Flatten an array without using flat()
Flatten an array of infinite depth
Write a recursive solution
Optimize flattening for large arrays
Example interview problem:
Input: [1,[2,[3,[4]]]]
Output: [1,2,3,4]
A recursive approach is usually expected.
Suggestions for Beginners
If you are learning JavaScript, follow these tips:
Start by understanding nested arrays clearly
Practice writing flatten functions using recursion
Learn how built-in methods like flat() work
Try solving flatten problems on coding platforms
Visualize the structure of nested arrays before writing code
Understanding array flattening improves your problem-solving and algorithm thinking, which is important for JavaScript interviews and real-world development.
Conclusion
Flattening arrays is an important concept when working with complex data structures in JavaScript. Whether you use built-in methods like flat() or implement your own recursive solution, understanding the logic behind flattening arrays helps you write more efficient and readable code.