Flatten Nested Arrays with Recursion in JavaScript

hello my friends today we are going to flatten an array with recursion so kind of building on yesterday of working with recursion to solve fizzbuzz we're going to apply the same concept to flatten a nested array so here I have some data and you'll see I've got it so it's an array and then each index could be an array and then that array could have more raised and so forth and then I've got this random one here that's not an array at all it's just a top-level value a number in this top-level erase so I want to ultimately run console.log flatten data and get all the values in just one one level or a 1:1 flattened array well alright so how would we do this there's you you don't have to use recursion for this necessarily but that's how we're going to solve it so the the idea being that I want to receive an array originally and step through each index of the array and if I find in a rate then I want to step through those indexes and so forth and each time building up a result array that's just flat so let's start with a empty array here all right so that's that's good like we know we're going to want to return that because we're going to ultimately return an array all right and it's the stuff here in the middle that is interesting so we know we want to loop we could do our dot for each year we could do I guess we can maybe do 4 of for n we're going to do a regular old for loop here I've been in the habit lately of just writing for loops because I've been fully focused on performance over the past couple of months at work and so it's just ingrained in me now to just write for loops because they will outperform for each it generally doesn't matter though unless you're working with a lot of data but either way it's just something that I just went ahead and ingrained in myself over the past couple months so it's just what I'm doing for let equals let I equals zero wow there's an equal sign in here still gonna use this keyboard man all right it's less than r dot length all right and we'll increment I on each pass oh my gosh all right now here's what we want to do we we're gonna start by receiving this array right and we first often need to know is on each pass as we iterate through this array we need to know like is the current value or on its current index of this array an array itself right so let's start off with trusty old if statement here go ahead and set up an else alright and will do so if array dot is array are I right because that's the current index that we're on of the array we received into flatten and if you haven't seen this before this is something from SES five that solves the issue of determining whether something is actually an array or not but we could we could use other forms if we needed to but we're writing modern JavaScript here and we're just going to use array dot is array and so if we we want to do something there and then else we want to if we encounter it and we know that the index is not an array then we've hit an actual value like something that should be in the in the final output so we're just going to push it in right so flattened up push our I like easy enough now this is where the recursion starts happen because what we want is if the current index itself of whatever array we've received in to flatten is an array then we actually want to concatenate or merge the whatever we have here or whatever is built up here over each pass with the items flattened from the array of this that this index is wow that is a mouthful let's just write it maybe it'll make sense okay so we're going to say flattened equals flattened dot concatenate it merges to erase so it's going to take this array and then in number of values that you pass into concat and it's going to merge the two and return a new array we're reassigning it here too and so that's why we have let here we're just going to reassign flatten to flatten concat and then we're gonna pass it the values of flatten our eye alright now let's talk through this so first pass of like when i first call flatten with data right we've got an array alright then we hit this for loop all right now the first pass of this for loop is going to check to see if data 0 so 1 2 & 3 is an array it is right so then we're going to say flattened equals flattened duck and cat so flattened duck and cat at the moment or flattened at the moment is an empty array at this first pass right so it's just an empty array merged with the this result and this result is going to call flatten itself which there's the recursion happening and we're going to call it with 1 2 & 3 right so this is going to receive 1 2 & 3 keep in mind that we only own the call stack we still have the original flattened call and we're still just in the first iteration of this for loop so we're all one two and three right so we just called this with an array of 1 2 & 3 so this receives 1 2 & 3 an array of 1 2 & 3 and then it itself iterates through that and so you get array désirée RI which is just going to be 1 and that is not an array and so we just push and then you get 2 and that's not an array so we just push and then you get 3 and that's not an array so we just push and that means now flattened is an array of just 1 2 & 3 and now we're going that's going to return and that's going to return here and then this is going to be talking cat with an array of 1 2 & 3 all right then on the next pass it's gonna get a little different right because you're gonna get 4 5 & 6 we're gonna call this but then when it encounters 5 & 6 it says oh that is an array so it's going to call flatten again right and ultimately you're still calling flatten with an array and then flatten is as many raises at C's it's going to continue calling flat calling flatten building a flattened array of just that piece and then returning that up to where that pops off the call stack and the the flatten underneath it gets that flatten value and can cats it so ultimately this kind of like on unrolls the array it's I think that will make sense hopefully it makes sense but if something doesn't make sense let me know but yeah ultimately we're just calling every time we see an array we're calling flatten again and flatten just takes an array and every time it season array it calls flattened again and ultimately we're just returning all the way up until we get back to the top level loop that we've got going on and everything has been flattened right so let's run this alright so now we've got 1 2 3 4 5 6 7 8 9 10 if we wanted to I mean this that's it pretty much but if we wanted to maybe I don't know if it's cleaning up or not but I'm a big fan of turn Aries you may hate them and that's totally cool you do you but like I could do something like array dot is array ri right that's our condition here and then we could have a question mark for a ternary and if it's true do that and if and then a colon and if it's false do that and to me that reads better I just I prefer that but a lot of people hate ternary so do whatever you want but this is also valid and well no it's not is it what did I do no array is a very flattened flattened equals legal return statement I must have forgotten some colon here or parentheses or something oh my gosh oh I think I've got an extra one in there yeah that's what it is live coding man all right there we go so yeah if you have any questions about this let me know you can ask in the comments below and I can do another video if it will help it make sense but that is how to flatten an array with recursion

Channel: J.C. Hiatt

Views: 1,111

Rating: 5 out of 5

Keywords: array, recursion, javascript, interview questions, frontend, nested arrays

Id: Eg2DgYn2tak

Length: 10min 35sec (635 seconds)

Published: Thu May 14 2020