Interviewing for Front-End Engineers

Flattening an Array Solution

Jem Young

Jem Young

Interviewing for Front-End Engineers

Check out a free preview of the full Interviewing for Front-End Engineers course

The "Flattening an Array Solution" Lesson is part of the full, Interviewing for Front-End Engineers course featured in this preview video. Here's what you'd learn in this lesson:

Jem live codes the solution to the array exercise while talking about what knowledge this interview question is meant to uncover.


Transcript from the "Flattening an Array Solution" Lesson

>> Flattening an array. Mm, yes. We could use flat, flat map or something like that. But because it's an interview, I wanna see how well you understand reducing data structure. How well you understand array methods, how well do you understand arrays in general? [LAUGH] Arrays, I wish I can get a raise.

As usual, we'll start off the same way. Thank you, I got some laughs that time.
>> [LAUGH]
>> We'll start off the same way. So, I need to create a function to flatten an array. So, I need a function and we'll call it flatten, flatter. And we know it takes an array.

Now, what do we wanna do? What are we thinking? Or eventually, we know we wanna return an array. So I could start here. I could say return someNewArray, new array. We're probably gonna change this but this will work too. There are many different ways to do this problem.

I'm gonna use my favorite function, or my favorite method, which is reduce. So I'm gonna say arr.reduce. And reducer, well, they take four arguments. But the ones you actually care about are the accumulator, which I'm gonna say the accumulator, and the actual item itself. And let's finish this out.

And reduce takes the other argument, which is the thing you wanna start with. So this will be the accumulator. This will be our base value, which is just an array. Okay, cool, cool. So mentally what I'm doing is now I'm looking at the array. I'm looking at the data structure.

The item is gonna be one because this is where I started, I'm just starting out my iteration. So I wanna check if the item at index zero, which would be one in this case, but let's say I didn't know that, I wanna check if it's a number or if it's an array.

And the way to do that is Array.isArray. So I can say, if the item, actually say Array.isArray, check if it's an item. I'll deal with that in a second. It gets a little more complicated. But if it's not an array, what do I wanna do? I wanna just return it to my accumulator.

So I'm gonna say acc.push. And I'm gonna push the item into the accumulator that I wanna eventually build up to. And then, ultimately, this will get me every time on reducers, you have to return the accumulator. It doesn't return by default. So, we did one, we have one in our new array, we have two, we have two in our new array, crap.

Now we hit an array, a different array. What do we do now? I need a way of reducing this array down. So we're gonna use what we call recursion, recursion is the idea of reducing a value down by calling the function over and over again and every time, the value gets a little bit smaller.

You don't have to use recursion for this, there are many different ways to solve this, but this particular problem lands itself well to recursion. So at some point, what I wanna do is I need to concatenates, I need to reduce this down. Once it's flat, I can concatenate that into another array.

So I'll say item and I'm gonna say item., what do I wanna do here? I wanna say concat. Essentially, concat this item down into- actually no. No, what I wanna do is I wanna flatten this. Assuming my flatten function will work eventually, I wanna flatten this item down.

So the item is now flattened. I wanna concatenate this down into the other thing. This is what always gets me on flatten is you get messed up with types. I'm like, what do I have now? Do I have an array, do I have an item? Flatten is gonna return an array.

So what do we do with arrays? We concatenate those. So, I can say, actually, I'm gonna shorten this. It's gonna return here. Save me some time. And then I'm gonna say concacts. Actually, yeah, yes. That's the solution. Does everybody follow? There are many ways to do this, this is one of them.

So we have an array. We iterate over the array until we hit an array, then we concatenate by recursively calling our own function, because we know eventually, this will return in or it'll return a flattened array. So it doesn't matter how deeply nested we go here, it will always return an array once it is done returning.

And that's the power of recursion. Some problems lend themself well to recursion, some do not. But generally it's something like this where you're diving deeper and deeper and deeper, but eventually you wanna bubble back up. Recursion is a good solution to it. Not bad, not bad at all.

Actually, I forgot one thing. I forgot to, Accumulator equals, cut that, and I'm gonna change that a little bit. And like I said, if I'm syntactically a little off here, that's okay, the idea stands. If you can get this far some solution, good enough, this is good enough for a whiteboard problem.

So, don't at me on Twitter, if I've made a small mistake somewhere. Twitter's vicious, it's vicious.

Learn Straight from the Experts Who Shape the Modern Web

  • In-depth Courses
  • Industry Leading Experts
  • Learning Paths
  • Live Interactive Workshops
Get Unlimited Access Now