Problem statement: There is an array containing elements as an array and those array elements can contain other elements as an array and so on. Now we have to convert this input array to a flat array that contains elements but not an array of elements.
Example:
Input: [1,2,3,[4,5,[6,7]],8,[9,[10,11]]]
Output: [1,2,3,4,5,6,7,8,9,10,11]
Solution:
function flatten(arr) {
let flattenArr = [];
arr.forEach(el => {
if(Array.isArray(el)){
const result = flatten(el);
result.forEach(el => flattenArr.push(el));
} else {
flattenArr.push(el);
}
});
return flattenArr;
}
const input = [1,2,3,[4,5,[6,7]],8,[9,[10,11]]];
const output = flatten(input);
console.log(output);
We have used recursion to solve this problem
Algorithm steps:
- First, we iterate through the given array.
- Then check each element:
- if it is not an array then push the elements in an updated array.
- if it is an array then again call the same function
flatten()
i.e. recursion. Then we will combine our updated array and return values offlatten()
using the spread operator in ES6. This will keep flatting the updated array.
Thanks for reading. For more tech and F.R.I.E.N.D.S. discussion, let's connect on Twitter.
Discussion (10)
Good solution, but maybe use .flat
flat parameter is recursion level:
Thanks for reading the article and for this solution 🙌. Really appreciate it.
But yeah I covered this solution because it covers recursion as well.
The good old super compatible way to do it:
This should work with pretty much any JavaScript engine released within last 20 years, and does it without recursion.
But as others are saying you should just use
.flat()
these days instead of reinventing the wheel.Thanks for reading the article and for this solution 🙌. Really appreciate it.
But yeah I covered this solution because it covers recursion as well.
.reduce
or an equivalent.Then, for a more complex version.
In the recursive version, JavaScript produces SyntaxError(It would be nice if it wouldn't) cause ternary operator does not allow spreading like this. We can solve it using spread operators if we really want to, but I've found
concat
requires a little less typing:Thanks for reading the post and for another solution. I just wanted to cover use cases of recursion.
Hello ^^. Nice use of recursion !
For the sake of discussion, here is another solution using built-in methods of Array :
One could argue that if your input's data are nested to a higher level, you will have to adapt the
flat()
method accordingly, which is not an issue in your code.But won't you be suppose to know the shape of the data you're working with ^^ ?
Thank you for your time and showing us that recursion is not terrifying !
Thanks for reading the article and for this solution 🙌. Really appreciate it. But yeah I covered this solution because it covers recursion as well.
Yes you can use the flat() method but I was looking for a recursion solution - thanks a lot!