Welcome back.
I want to talk to you quickly about a very important topic for a developer, and that is debugging.
Debugging is the act of looking over code,
understanding what it's doing and figuring out why it's not acting as expected or maybe it's not even
running, maybe you're getting errors or maybe something that the user does on a website is
triggering a weird behavior.
That's what debugging is. Figuring out why the program isn't acting the way it is.
And when you work as a developer, a lot of your time is spent debugging.
So it's a very important topic and I want to talk about some of the strategies that we can use for debug.
I have over here a pretty complex function and frankly, unless you've had a lot of experience with javascript
this is a pretty hard function to understand.
Let's say that you get into to work and somebody says, hey! I don't,
I don't know what's going on with this function,
can you look into it? and you have to figure out, what it does and whether it's working fine or not.
So I'm going to take you through the steps that I would use to debug this code.
Maybe it's working fine maybe it's not but I want to understand what this piece of code does.
So the first thing I would do is just read it, I say OK, we are assigning a variable and it looks like
we have an array.
It is a nested array, so there is an array inside of an array.
And it looks like this code wants to do something called flattened.
OK.
We know that 'reduce' from what we've learned before, 'a' is the 'accumulator'.
I can change the name,
so it makes more sense to me.
OK, 'accumulator' perfect.
And 'b' is well what is 'b'?
'b' is this right, because we're iterating, looping over the first array which so it gives us three arrays.
So I can just say, array here. OK.
Now, I also see that within this reduce, I've the 'accumulator', I have the array and I want the 'accumulator' to
start off with an empty array.
That makes sense so far.
So the 'accumulator' is going to be an empty array when you start off.
And what we're going to do is we're going to do,
empty array dot concat.
And if you remember, 'concat' attaches the contents of an array into whatever's being concated.
One thing I can do is, open up this function, so that now, instead of just having one line, I can say
'console.log' array and we'll find out what array is and will also say 'console.log' 'accumulator', will say 'accumulator'.
So we have the console opened and we also want to make sure that we're returning this because we removed
it from a single line which already implicitly means return, to making a two lines.
OK.
So let's just refresh and add this function and see if we can get some console logs to figure out
what it's doing.
There's going to be three loopings that we see and in the first looping it looks like, it says the array
is [0, 1] and the 'accumulator' is the empty array.
Ok that makes sense.
And then we see the second loop around the 2 and 3 array which is here, gets looped around and the 'accumulator'
now has 0 and 1.
So it looks like after the first loop through, I've added the zero and one of the array into the
empty array which is the accumulator. OK.
And then the last pass through which is four and five.
I now attach the array of 4 and 5 into the 'accumulator' which adds 0, 1, 2, 3.
So it looks like, what we're doing is we're grabbing each array and we're adding it into the accumulator.
And because it looks something like this.
So this is what it would look like in the first pass through, we're just using the concat function to
join the arrays, [0, 1], so that we are flattening the array, so that means instead of having an array
inside of an array, we can just completely flatten everything.
That means that with 'flattened', if I look at what it does, well it just finds array [0, 1, 2, 3, 4, 5]. Awesome.
There's one another trick I want to show you, and that is instead of using console log you can use something
called debugger. And you notice that the color turned red which means Yep! it's a javascript keyword.
And what this allows you to do?
Well let's see what happens when I run this function again to refresh here and I want to run it,
whoa! what just happened.
When the javascript engine and the browser runs into the word debugger, it stops.
It's a, it's a word that tells whatever is reading this file to, hey! stop whatever you're doing just freeze,
and it opens up the window for us exactly where it's stopped.
So let me make this full screen and show you.
It stops in the middle of its execution. But we see that here 'accumulator' is an empty array because while
we started it and the array is 0 and 1, now I have a couple options.
I can hit play which resumes the entire thing or I can hit Step over
and let's see what happens with step over, it goes to the next line.
And if I click again, it goes to the next line.
And now I see that the 'accumulator' is 0 and 1 and the array is now 2 and 3.
So I know that in the next line, the 'accumulator', well I change this to an array by mistake but this will
be the 'accumulator' will be 0 and 1 dot concat, 2 and 3. And I can keep stepping through this and see
how the parameters change and literally go through the entire function.
Let's close that down.
If I bring this back to the way it was which is the 'accumulator',
make this full screen.
All right.
So array is [0, 1] 'accumulator' is an empty array, I'm going to step through,
that changed 'accumulator' is now [0, 1] array [2, 3] and I keep stepping through and I notice exactly what's happening
in the code and when it's done executing, it returns and look at that.
We have our console back.
Isn't that cool?
Debugger allows us to literally go into the function and see what happens step by step. As I return this
to the way it was.
I want you to take this with you and understand that although when you first see something like this,
it's overwhelming,
with enough time and using console and debugger you're able to understand what a function does, and if
it's doing something that you don't expect to do or is doing something wrong,
you can use these techniques to fix it.
It's a very useful skill that you're going to use a lot of.
So good luck.
Have fun out there. Buh-bye