1
00:00:01,100 --> 00:00:02,330
Welcome back.

2
00:00:02,330 --> 00:00:10,550
I want to talk to you quickly about a very important topic for a developer, and that is debugging.

3
00:00:10,610 --> 00:00:14,810
Debugging is the act of looking over code,

4
00:00:14,810 --> 00:00:22,870
understanding what it's doing and figuring out why it's not acting as expected or maybe it's not even

5
00:00:22,880 --> 00:00:28,610
running, maybe you're getting errors or maybe something that the user does on a website is

6
00:00:28,730 --> 00:00:30,570
triggering a weird behavior.

7
00:00:30,860 --> 00:00:36,100
That's what debugging is. Figuring out why the program isn't acting the way it is.

8
00:00:36,440 --> 00:00:42,190
And when you work as a developer, a lot of your time is spent debugging.

9
00:00:42,230 --> 00:00:48,130
So it's a very important topic and I want to talk about some of the strategies that we can use for debug.

10
00:00:48,170 --> 00:00:56,090
I have over here a pretty complex function and frankly, unless you've had a lot of experience with javascript

11
00:00:56,720 --> 00:00:59,360
this is a pretty hard function to understand.

12
00:00:59,510 --> 00:01:08,740
Let's say that you get into to work and somebody says, hey! I don't,

13
00:01:08,740 --> 00:01:09,870
I don't know what's going on with this function,

14
00:01:10,240 --> 00:01:17,600
can you look into it? and you have to figure out, what it does and whether it's working fine or not.

15
00:01:18,070 --> 00:01:23,490
So I'm going to take you through the steps that I would use to debug this code.

16
00:01:23,530 --> 00:01:29,970
Maybe it's working fine maybe it's not but I want to understand what this piece of code does.

17
00:01:30,880 --> 00:01:39,410
So the first thing I would do is just read it, I say OK, we are assigning a variable and it looks like

18
00:01:39,410 --> 00:01:41,140
we have an array.

19
00:01:41,270 --> 00:01:46,070
It is a nested array, so there is an array inside of an array.

20
00:01:47,410 --> 00:01:51,800
And it looks like this code wants to do something called flattened.

21
00:01:51,870 --> 00:01:52,570
OK.

22
00:01:52,840 --> 00:02:00,790
We know that 'reduce' from what we've learned before, 'a' is the 'accumulator'.

23
00:02:00,790 --> 00:02:01,690
I can change the name,

24
00:02:01,720 --> 00:02:03,070
so it makes more sense to me.

25
00:02:03,070 --> 00:02:05,730
OK, 'accumulator' perfect.

26
00:02:05,800 --> 00:02:08,789
And 'b' is well what is 'b'?

27
00:02:09,280 --> 00:02:20,320
'b' is this right, because we're iterating, looping over the first array which so it gives us three arrays.

28
00:02:20,510 --> 00:02:23,240
So I can just say, array here. OK.

29
00:02:28,620 --> 00:02:38,250
Now, I also see that within this reduce, I've the 'accumulator', I have the array and I want the 'accumulator' to

30
00:02:38,370 --> 00:02:40,490
start off with an empty array.

31
00:02:40,680 --> 00:02:42,170
That makes sense so far.

32
00:02:42,270 --> 00:02:45,470
So the 'accumulator' is going to be an empty array when you start off.

33
00:02:45,720 --> 00:02:48,080
And what we're going to do is we're going to do,

34
00:02:48,090 --> 00:02:50,410
empty array dot concat.

35
00:02:50,430 --> 00:02:58,580
And if you remember, 'concat' attaches the contents of an array into whatever's being concated.

36
00:02:58,580 --> 00:03:06,590
One thing I can do is, open up this function, so that now, instead of just having one line, I can say

37
00:03:06,590 --> 00:03:18,120
'console.log' array and we'll find out what array is and will also say 'console.log' 'accumulator', will say 'accumulator'.

38
00:03:18,170 --> 00:03:24,050
So we have the console opened and we also want to make sure that we're returning this because we removed

39
00:03:24,080 --> 00:03:29,160
it from a single line which already implicitly means return, to making a two lines.

40
00:03:29,410 --> 00:03:29,620
OK.

41
00:03:29,630 --> 00:03:36,320
So let's just refresh and add this function and see if we can get some console logs to figure out

42
00:03:36,320 --> 00:03:37,300
what it's doing.

43
00:03:37,410 --> 00:03:44,390
There's going to be three loopings that we see and in the first looping it looks like, it says the array

44
00:03:44,390 --> 00:03:48,050
is [0, 1] and the 'accumulator' is the empty array.

45
00:03:48,140 --> 00:03:49,670
Ok that makes sense.

46
00:03:49,670 --> 00:03:58,430
And then we see the second loop around the 2 and 3 array which is here, gets looped around and the 'accumulator'

47
00:03:58,760 --> 00:04:01,940
now has 0 and 1.

48
00:04:01,940 --> 00:04:08,270
So it looks like after the first loop through, I've added the zero and one of the array into the 

49
00:04:08,270 --> 00:04:11,870
empty array which is the accumulator. OK.

50
00:04:12,050 --> 00:04:15,690
And then the last pass through which is four and five.

51
00:04:15,740 --> 00:04:23,260
I now attach the array of 4 and 5 into the 'accumulator' which adds 0, 1, 2, 3.

52
00:04:23,300 --> 00:04:33,110
So it looks like, what we're doing is we're grabbing each array and we're adding it into the accumulator.

53
00:04:33,150 --> 00:04:37,190
And because it looks something like this.

54
00:04:37,260 --> 00:04:44,530
So this is what it would look like in the first pass through, we're just using the concat function to

55
00:04:44,530 --> 00:04:53,560
join the arrays, [0, 1], so that we are flattening the array, so that means instead of having an array

56
00:04:53,590 --> 00:04:58,360
inside of an array, we can just completely flatten everything.

57
00:04:58,360 --> 00:05:08,570
That means that with 'flattened', if I look at what it does, well it just finds array [0, 1, 2, 3, 4, 5]. Awesome.

58
00:05:08,720 --> 00:05:14,420
There's one another trick I want to show you, and that is instead of using console log you can use something

59
00:05:14,420 --> 00:05:22,610
called debugger. And you notice that the color turned red which means Yep! it's a javascript keyword.

60
00:05:22,850 --> 00:05:24,460
And what this allows you to do?

61
00:05:24,560 --> 00:05:32,060
Well let's see what happens when I run this function again to refresh here and I want to run it,

62
00:05:32,570 --> 00:05:33,430
whoa! what just happened.

63
00:05:34,800 --> 00:05:43,350
When the javascript engine and the browser runs into the word debugger, it stops.

64
00:05:43,430 --> 00:05:49,720
It's a, it's a word that tells whatever is reading this file to, hey! stop whatever you're doing just freeze,

65
00:05:50,840 --> 00:05:55,120
and it opens up the window for us exactly where it's stopped.

66
00:05:55,400 --> 00:05:58,190
So let me make this full screen and show you.

67
00:05:58,390 --> 00:06:07,330
It stops in the middle of its execution. But we see that here 'accumulator' is an empty array because while

68
00:06:07,330 --> 00:06:17,700
we started it and the array is 0 and 1, now I have a couple options.

69
00:06:17,850 --> 00:06:21,600
I can hit play which resumes the entire thing or I can hit Step over

70
00:06:21,600 --> 00:06:26,750
and let's see what happens with step over, it goes to the next line.

71
00:06:27,780 --> 00:06:31,460
And if I click again, it goes to the next line.

72
00:06:32,400 --> 00:06:40,980
And now I see that the 'accumulator' is 0 and 1 and the array is now 2 and 3.

73
00:06:41,020 --> 00:06:48,130
So I know that in the next line, the 'accumulator', well I change this to an array by mistake but this will

74
00:06:48,130 --> 00:06:59,550
be the 'accumulator' will be 0 and 1 dot concat, 2 and 3. And I can keep stepping through this and see

75
00:06:59,550 --> 00:07:06,260
how the parameters change and literally go through the entire function.

76
00:07:06,720 --> 00:07:07,950
Let's close that down.

77
00:07:08,260 --> 00:07:13,070
If I bring this back to the way it was which is the 'accumulator',

78
00:07:18,470 --> 00:07:19,910
make this full screen.

79
00:07:19,910 --> 00:07:20,720
All right.

80
00:07:20,720 --> 00:07:24,950
So array is [0, 1] 'accumulator' is an empty array, I'm going to step through,

81
00:07:28,260 --> 00:07:34,470
that changed 'accumulator' is now [0, 1] array [2, 3] and I keep stepping through and I notice exactly what's happening

82
00:07:34,470 --> 00:07:40,460
in the code and when it's done executing, it returns and look at that.

83
00:07:40,620 --> 00:07:46,370
We have our console back.

84
00:07:46,420 --> 00:07:47,500
Isn't that cool?

85
00:07:47,500 --> 00:07:53,080
Debugger allows us to literally go into the function and see what happens step by step. As I return this

86
00:07:53,080 --> 00:07:57,050
to the way it was.

87
00:07:57,160 --> 00:08:01,780
I want you to take this with you and understand that although when you first see something like this,

88
00:08:01,780 --> 00:08:02,800
it's overwhelming,

89
00:08:02,800 --> 00:08:09,070
with enough time and using console and debugger you're able to understand what a function does, and if

90
00:08:09,070 --> 00:08:14,140
it's doing something that you don't expect to do or is doing something wrong, 

91
00:08:14,710 --> 00:08:17,390
you can use these techniques to fix it.

92
00:08:17,400 --> 00:08:20,410
It's a very useful skill that you're going to use a lot of.

93
00:08:20,730 --> 00:08:21,540
So good luck.

94
00:08:21,660 --> 00:08:23,270
Have fun out there. Buh-bye