Live Coding Interview JavaScript (Senior Level - Recursion)

This was a real interview problem one of our AMTs got a few weeks ago. They told him this is going to be a react interview, but just before jumping in, he realized the interview was more of a algorithms and data structures problem. In this video, button will show you a step-by-step process you can use to solve this kind of live coding interview problems. So, this is exactly what our our student was presented with and for a senior react developer position.

Basically, they said we want you to code this count descendants function. And this function takes an array that it's a family, takes an array of persons, this is what a person look like. It has a name and it has children. That again, can be other person, it's kind of a tree, it's a nested tree. And basically what they said is we want you to iterate through it and rewrite the name of each family member with the descender descendants number in it.

If Maria has two children, then we add a two, if Fred has none, then we add none. And of course, Maria could have children that have children, this is a bit of a recursive nested data structure. And I think he had around 45 minutes to solve this. So, I'm going to go ahead and solve it and as I go through, I will explain my process. The number one thing you want to do is read this as many times as you can, but again, when you have a problem like this one, the most important thing is to draw it out.

So, this is what I'm going to do right now and this is what I would tell my interviewer if this would be an interview. Okay, so the first thing you want to do in this case is try to visualize and draw the problem. They told us there is an array of persons that they call families, so I'm going to draw that little list and add some persons to it. So there's like P2, let's just say three. But then they also told us that each person might have additional children, which is again, an array of people.

So, this person too might have another array of let's call this P5, P4, so we could go here and maybe P4 has another array of P6 and P7. So that's basically what they told us we will receive and what we need to do is to rewrite this so that in the name. Right, I'm going to add the final result, the name of each person would contain their name plus, in this case, for example, none, none. So this would be the name of the person.

some plus the two. And in the case of P5, none again. Okay. But then in the case of P2, we have 1 2 3 4 descendants. So this should be a four. And then here none and none. Come I'm typing it. So it's the number one, always draw these sort of even if you don't figure out the code, this will get you some points. And right now, I would also go in and try to somehow write some pseudo code here and see, okay, what do we really need to do?

This is a recursive problem, so you always want to solve the base case first. And the base case, just for us to memorize it, it's the simplest case of the problem. In this case, the simplest case is number one, kind of an edge case would be we get an empty array. So then we just receive an empty array. And now we start complicating this problem. We say, well, what if we get an array with one person?

Let's see what the result would be. So we get an array with P1, with no children, and we return P1 with none. That would be my second edge case. And then finally, right, um, well, imagine of course, this could be like P1 and P2 as a list. So we add none to both of them, so P none and MP none, I'm not going to draw it. And finally, the complex edge case where we have like P1 and P2, but MP2 points to the P3, let's say.

And in this case, that's where we will probably have to call the function on this tree, figure out how many children this has, get the name and somehow add it here. So if P3 has zero descendants, this should be the number of descendants of P3 plus 1, right? P3 itself. So the descendants of P2 would be the none, which is 0 plus 1, which would be 1. Now, that would be when we backtrack and put the solution together, and where we use recursive.

Once you have this, it's really just a matter of going to the code editor and implementing this, and this is exactly what I'm going to do right now. Always start with the easy case in live coding interview. We always want to implement the easiest thing. So if, okay, we do know this will receive a family, and we say, okay, you know what, if it is if there is no family, let's say the null case or family.

linked, that's really well what's a zero and return an empty array. Basically, we get an empty array, we return an empty array, I'm going to save this and I'm going to run the tests. You can do this yourselves if you clone this, clone the comment section. Perfect. have one test at passed. The thing is here, you already built some confidence, you written some code and you broke this block that happens to most of us when you are coding under pressure.

And now let's move on to this one where there's this this whole thing it feels like there's no child, right? It's basically we want to go over this array and just handle the case in which the person doesn't have any children. So, going back here, I'm going to write pseudo code anyhow, what we want to is to iterate over the family and in each iteration we want to return the name and none if there are no children for that person, right?

You want to be proficient at writing for loops. It's always start, stop, and condition. So lesson length and I plus Make sure you know how to do this. A lot of JavaScript developers don't know it because we always use map and reduce. This is the the the rock solid foundation of your live coding skills. So, we're going over the family and we want to check that the family has no children, like that family member, I could say I'm I never going to extract that in a constant because I want to make it clear.

You don't need to do this normally. Uh you don't want to abuse memory by creating too many constants, but for now I'll just use it. I'll say you know what? If family member, family member like children doesn't have any children or same conditions or family member family member that children. It's equal equal to zero, then we want to modify the name and we're going to do this in place. So in the end, I'll return return will still be the original family.

We're going to modify the same family, so we say, you know what, I will take that. The family at this index that name and here we'll use a bit of a string interpolation. And we say it's equal to the original name, it's equal to that family of y. So the original name name and here now we said, hey, if the family member doesn't have any children or the children dot length, so not equal to the dot length.

There we go. There we go. So now the test pass. So moving on, I go back to my drawing and I say, hey, you know what? First edge case done, second edge case done. And now it comes down to recursion. Where it says, well, we do have children, what do we do then? But children, another area of children it's in the end just an extra family. So we could reuse our function to count, to recompute that family and once that's done, we can receive that result and work on it. That's what we call backtracking. This is the nasty part, so let's go in and be very methodic about it. If we do have children, we actually want to count descendants for each children, and then we want to make a sum of them and then finally append that to the name. So how do we count descendants for each child? Well, we already have a function that does this. What we could say is that constant new children is equal to count descendants on our family ofyindex.child. So we get our new children and they all have appended the name of their descendants. And so now we actually need to go to them. somehow parse this number and put it all together. That means you know, if if this children has one and this is another person then this would be a two. So this is the um what we call the backtracking more or less. Um basically putting the solution together. So what we want to do here is to iterate over all the child, get their descendants and sum. So let's initiate our sum sum of descendants to zero. And then we say, you know, for let j to go to zero, j it's less than the new children, okay, new children. length and j plus plus. In here, what we want to do is first get the number of descendants of each child. How do we do that by doing the inverse of this? Of course, it helps if you're very fast doing inline structuring. We have the name and we have the number of children that will be equal to the new children of j, so the specific child. name. split and we split in this space. I'm assuming that everybody has a name that doesn't have any white space. That's why I'm that's why I'm splitting here. That's why it works. If somebody would have like a double name, they would be called Bob Smith and then the child and this wouldn't work. But let's assume that we have the number of children, we will have like this would be the raw number, that will be raw, that will be a string. So let's say you do parse number children, that's equal to parse integer of your number of children. So we have that. Okay, and now it's just a matter of saying, hey, the sum of descendants, it's equal to.

one because every time we go for a child, that child it's a descendant, plus the descendants of that child. So, if I'm a grandfather, right? I have a kid and that kid has two daughters, I have three descendants, my kid and the two daughters. I'm going to sum that and that's pretty much it. So, we did that. We got the descendants and the sum. And finally, we append that to the name, same operations as here. I do this, but here, we will add instead of none, then we put the dollar sign and uh curly brackets, the sum of descendants. I do think this is going to contain the square brackets, so I need to remove them, and I didn't. So, there's different ways to do this. We might be able to call the method replace and replace this with nothing, and then also replace on the result, the other parentheses to replace that with nothing. So, that's a little tricky you might need to do. And we pause and I'm okay. So, it gives us a not a number. Okay, okay. Um and now it's when you got to go in and debug. It's okay to do console log, normally, you can tell them, hey, I would do I would use the debugger here, but it basically has to do with this or just for a live interview, just tell them, hey, for the for the time being, I usually normally use the debugger, but let me just rush our our child and see um the quickest way is to do a console log. Let me sec. So, that's none none none. Um oh, we didn't handle the yeah, we didn't handle the case in which this number of children is just none. So, we should have said if you are number of children, it's equal equal to none, then uh we want this sum descendants to be equal to just one, not just increase it. Because there's no extra, like you don't have a child. And then if not, do this part. And I'm going to remove the console up. Perfect. And that's pretty much it. You you definitely did a good job, you have a very structured way to go about it and you have this uh you know in the case of backtracking, you know how to drive the problem to an end, right? Which I think a lot of developers would get stuck there, but um the vast majority of people that we coach and mentor, right, they have two problems. Number one, they they simply whenever they are faced with a problem like this because of lack of practice, because of nerves, you know, you're in the red zone, you're being interviewed. They simply

blank. And in this case you you had this this uh drawing that you've done, that kind of guided your solution. You you visualize the problem first. One thing that I would say is what was from there with the problem, but maybe reading it truly, like read things instructions and then take your time to draw the stuff. Like don't jump to the code because if you jump fast to the code and you get stuck, it's as good as nothing, right?

And you also didn't got the chance to show them anything, right? If if the code fails, uh you are basically done. The other thing it's uh about them the question of, you know, the million dollar question, which is how much uh you know, how much lead code you've done, how much uh algo, rems and data structures should a react developer? This is a senior react interview, right? And it has nothing to do with react, with hooks, with anything.

Like this problem, you could solve this problem in Python. So my question for you is, how much data structures and algorithms should a senior or a mid level JavaScript engineer interview you right now? No, and what's the best way for them to to get to this level? So the number one thing we've seen people is they would interview, they would run into a problem like this and then they would go in and do lead code for 3 months and still not pass interviews because, again, this is only part of the interview process.

My advice would be, if you're interviewing for a senior JavaScript position, you want to combine your interview prep of JavaScript fundamentals like promises, async await, polyfills, and know those things very well and combine them with two things. Number one, you want to be very good at writing for and while loops, so iterative solutions, going over an array with a while loop, something very unusual, and using four loops.

As you see, I had to write them super quickly. I cannot think about how to write a four loop or how how would this work. And number two to do, you want to know very well recursion. Everything you do with a four and while loop can be done with a recursive function. You can go over an array and sum only elements with a for loop. You can do it with a recursive function, too, and you want to be able to do these things very fast under pressure.

The second thing is, and you can practice those in lead code, but I would only do if you're starting out easy and medium problems at most. Um and the second thing is always draw the solution and because when you draw the solution, you'll realize that most complex problems can be solved by decomposing them into iterative steps or some operations. So that's it's always the case that we we iterate, then we do a small operation and then maybe put the reset back together. So, the other solution, write pseudo code and make sure you know very well how to write for and while loop and how to transfer or transform a for loop into a recursive call and a recursive call into a for or while loop. The other thing you did here was to start with a base case, right? And and build on top of that. Can you tell me more about that? Sure. So, especially when you have a recursive problem or any problem, just identify the simplest use case where maybe the input is null or the array is empty and write it down and solve it because it will you go over what you can call the coder block, which is you get the problem, you don't even know where to start, you write zero line of code and that just totally this kind of kills your motivation. You can start getting very nervous. And so the moment I made one test pass, if they have test or you handle one or two edge cases, you already feel like you're writing code. The solution is already coming to you. So it helps breaking the the coder block. For the people watching us, it's also very important that you do this stuff by yourself. Just by watching Bogdan, or worse, asking Chat GPT to solve it for you, will not teach you how to think. And this is going back to what Bogdan advised. Just get the easiest problem you can get, the easiest problem you can solve and do it in a very methodic way. Start with a drawing and then start solving it step by step. Make those tests pass. Why am I saying this? Because if you're just watching this stuff and you've never done it or you've done it once or twice, when you're in the red zone, when you're there with two people interviewing you, it doesn't matter how senior you are in React or cloud or whatever, you will just freeze because you don't have enough practice. So you want to practice this, the thinking behind how Bogdan solved the problems as much as you can. And then practice the fundamentals, basically like Bogdan said, writing for and while loops, because many of you are working inside React, are working inside a lot of abstractions that abstract all these things for you. And you never really wrote code like this, you never really thought about problems like this. So you do need practice. You don't have to spend 3 months or 6 months on lead code every weekend to to be able to do this. You just have to do it a bunch of times and be very focused and be very methodic and be systematic, which by the way, it's your job.

in any problem you face. That being said, grab the Repo from the comment section and do it yourselves. And do it just like Bug did. And number two, if you are interviewing right now and you are looking to find out your technical gaps, also check the free technical assessment we got in comments. It will kind of give you an idea of where you stand with respect to a senior JavaScript developer. Just invest 10 minutes in doing the assessment and you will understand exactly what your gaps are across the full stack. And if you want Bug to deal with any specific problem that you got in interviews,

just like our mentee got, drop it in the comments and we will jump on it and Bug will solve it for you. That being said, Bug, thank you so much and we will see you folks in the next one.