How to flatten array using Javascript
Furkan is a software engineer and frontend developer, whose main purpose is to create best optimal experience for user but also keeping the application or project as performant as possible.
He is deeply interested on web technologies and he is building new projects in this subject. He is especially familiar with React, Vue, Node and Java. You can check out what he built on his GitHub account. There is potential ways to connect with him at the end of this summary 👇
Things he like to do; ✔ Trying to solve other people's struggles ✔ Teaching or telling some subject he know to friends or colleagues ✔ Building different kinds of projects ✔ Meeting & talking with new people ✔ Listening podcasts ✔ Playing Chess ✔ Watching drama | sci-fi movies ✔ Listening music while I travelling or trying to fix problems ✔ Researching next generation technologies like cyptocurrency, IoT, smart devices
If you want to reach out with him, here is how you can do it;
🔼 Blog: https://blog.furkanozbek.com/ 🔼 GitHub: https://github.com/afozbek 🔼 Mail: abdullah.furkan.ozbek@gmail.com 🔼 Twitter: https://twitter.com/afozbek_ 🔼 Instagram: https://instagram.com/furkan.codes/
Thanks for reading ✨
Problem
So you have some nested array but need to flattened it so you use it inside your codebase. There are actually a couple of ways to do it.
Here is what we are gonna take a look at;
- Array.prototype.flat()
- Reduce and Concat Solution
- Recursive Solution
- Stack Solution
1. Array.prototype.flat() Solution
The flat() method creates a new array with all sub-array elements concatenated into it recursively up to the specified depth.
- Returns: A new array with the sub-array elements concatenated into it.
const arr1 = [0, 1, 2, [3, 4]];
console.log(arr1.flat());
// expected output: [0, 1, 2, 3, 4]
const arr2 = [0, 1, 2, [[[3, 4]]]];
// We can also give optional depth argument to flat function
console.log(arr2.flat(2));
// expected output: [0, 1, 2, [3, 4]]
Flat can also work on nested arrays
console.log(arr2.flat(Infinity))
// expected output: [0, 1, 2, 3, 4]
Or it can remove empty spots in the array
const arr5 = [1, 2, , 4, 5];
arr5.flat();
// [1, 2, 4, 5]
2. Reduce and Concat Solution
const flatten = (arr) => {
return arr.reduce(function (flat, toFlatten) {
return flat.concat(Array.isArray(toFlatten)
?
flatten(toFlatten)
: toFlatten);
}, []);
}
flatten([[1, 2, 3], [4, 5]]); // [1, 2, 3, 4, 5]
flatten([[[1, [1.1]], 2, 3], [4, 5]]); // [1, 1.1, 2, 3, 4, 5]
3. Recursive Solution
We can also apply recursive solution with the help of concat function
const flattenArray = (input) => {
let result = []
if (!Array.isArray(input)){
return input
}
for (let data of input) {
result = result.concat(flattenArray(data))
}
return result;
}
let arr = ["a", 0, [1, 2], 3, [[5, 6], [[8, 9]]]]
console.log(flattenArray(arr))
// ["a", 0, 1, 2, 3, 5, 6, 8, 9]
4. Stack Solution
We can also solve this by the help of stack data structure
// non recursive flatten deep using a stack
// note that depth control is hard/inefficient as we will need to tag EACH value with its own depth
// also possible w/o reversing on shift/unshift, but array OPs on the end tends to be faster
function flatten(input) {
const stack = [...input];
const res = [];
while(stack.length) {
// pop value from stack
const next = stack.pop();
if(Array.isArray(next)) {
// push back array items, won't modify the original input
stack.push(...next);
} else {
res.push(next);
}
}
// reverse to restore input order
return res.reverse();
}
const arr = [1, 2, [3, 4, [5, 6]]];
flatten(arr);
// [1, 2, 3, 4, 5, 6]
