Flatten nested array using recursive reduce function

Share this video with your friends

Social Share Links

Send Tweet

Recursive functions are inherently hard concept to grasp for many beginners. reduce array method shares the same title of being the hardest among the methods. Let's bring it up a notch and create a recursive reduce function that flattens a nested array in JavaScript to finally figure how both of them work!

Dimitri Ivashchuk: [0:00] In the interview, you are given the nestedArray like this, which you are tasked to transform into the flat array. You need to write the function which transforms the nestedArray constant into 1, 2, 3, 4, 5, something like this.

[0:20] The easiest way to write it is to use reduce native array method and let's see how the function would look like first. Const flattenArray, so you want to accept an array, and then, we want to write the return statement with array.reduce, pass our reducer here, and let's console log it, so flattenArray and nestedArray.

[0:56] Do you see that we got exactly the array that we needed? Let's go over the function and understand how it , how works. Namely this reducer works.

[1:10] Reduce method gets two arguments to pass to it. The first one is our logic, the callback function, and the second one is the initial value of the accumulator, so the first value that we start from when we start to iterate.

[1:26] In the callback function, we have the access to accumulator and the current value of the iteration, so in the case of our nestedArray. When we start, the accumulator is an empty array, as we passed it to our function here. The iterationValue is an integer, 1.

[1:49] This logic here, it just checks if the iterationValue -- in our case integer 1 -- is an array, so this check here. If it is an array, then we want to perform this operation. If it's not in array, we want to perform this operation.

[2:10] Let's focus on this one first. We return an array in which we spread our accumulator, so we get all the values which are coming from accumulator array, we're putting them inside an array and add the iterationValue to it.

[2:28] In our case, it would be getting the empty accumulator, spreading it into another array so making the clone copy of it, and then, adding the iterationValue to it, so in our case, 1.

[2:44] From the first iteration, we get 1 return. On the second iteration, our accumulator is now an array containing 1.

[2:55] Again, we're checking if 2 is in the array, so this check. It's not, so we're again doing this one. The new cloned array would contain the accumulator spread to it -- in our case 1 -- an iteration value, in our case 2. This is the easiest part of this function.

[3:17] Now comes the trickier part, the case where the value that we are now iterating is an array. In this case, we again spread the accumulator to it, so we would again have here. We spread 1, we spread 2, and then, we want to add this part of the expression to our array, which would be a recursive function.

[3:45] We spread the flattenArray function with a value of iterationValue. In our case, we pass array with one integer 3 to flattenArray function. Then, it performs the very same operation with reduce.

[4:05] It starts with an empty array. It iterates over the values. In our case, it's just one value.

[4:13] It's seeing that the value of the iteration is 3 integer and performs this part of the operation, so no further recursion. The recursion ends here because it doesn't have any other nested properties.

[4:29] In the very end, this flattenArray function here returned the array of 3, and we just spread it inside to add the value to our previous two arrays.

[4:43] The final iteration, we just perform the same operation on the array that we performed before, so just imagine it as doing the flattenArray function on this array. The flattenArray function on this array would return to us something like this, 4 and 5, with the previous value that we had 1, 2, and 3.

[5:13] Here, we would just clone them as 1, 2, and 3 in an array, and then spread 4 and 5 to get the final version of 1, 2, 3, 4, 5 array. That's how you perform the recursive flattenArray function for nested arrays.