In the vast realm of JavaScript, arrays reign supreme as versatile containers of data. But when arrays nest within each other, navigating through their depths can be a daunting task. Fear not, fellow coder! In this blog post, we embark on a quest to conquer nested arrays using the mighty power of the `reduce` Array method.
Imagine we’re faced with an array filled with nested arrays, each containing a diverse array of elements:
const numbers = [
1,
[3, [2, 8, [12]], 9],
[5],
[12, 5],
[100, [23, 45, 83, [[1, 2], 54, 67], 54, [64]], 35, 1],
];
Our mission? To transform this intricate network of nested arrays into a flat structure, where each element stands boldly on its own like below.
[1, 3, 2, 8, 12, 9, 5, 12, 5, 100, 23, 45, 83, 1, 2, 54, 67, 54, 64, 35, 1]
Armed with the `reduce` method, we embark on our noble quest. Here’s our strategy:
1. We traverse through each element in the array using the `reduce` method.
2. As we encounter each element, if it happens to be an array, unravel its contents one layer at a time.
3. With each recursive step, we collect the elements we find along the way and add them to our growing collection(accumulator).
4. With the power of `reduce`, we forge a path through the nested arrays, ensuring that no element goes unnoticed.
// 1st Apprach - Recurrsive
const flattenNumbers = (numbers) => {
return numbers.reduce((acc, num) => {
return acc.concat(Array.isArray(num) ? flattenNumbers(num) : num);
}, []);
};
console.log(flattenNumbers(numbers));
In the above approach, we used the reduce array method to flatten an array.
// 2nd approach
console.log(numbers.flat(Infinity));
With the flat method, we can flatten an array. For more details feel free to check out the javascript flat method.