1
00:00:00,290 --> 00:00:03,840
When developing we're constantly
in the process of testing things.

2
00:00:03,840 --> 00:00:06,610
We write code,
check that it does what we want, and

3
00:00:06,610 --> 00:00:09,050
make sure nothing else
broke in the meantime.

4
00:00:09,050 --> 00:00:12,458
As we're starting out we usually
just write some code and

5
00:00:12,458 --> 00:00:14,306
then run it to see if it breaks.

6
00:00:14,306 --> 00:00:18,655
For example, we might write a function
that adds three numbers together.

7
00:00:18,655 --> 00:00:21,605
How do we know that we're done and
that the function works?

8
00:00:21,605 --> 00:00:24,625
We probably load the function
in our terminal, or

9
00:00:24,625 --> 00:00:27,845
in the browser console,
and just see what happens.

10
00:00:27,845 --> 00:00:30,715
Even though this tells us
whether our code works

11
00:00:30,715 --> 00:00:34,165
it doesn't tell us very much about
why it fails when it breaks.

12
00:00:35,260 --> 00:00:40,220
JavaScript programmers also often add
console.log statements to track variables

13
00:00:40,220 --> 00:00:45,140
and functions, what the this keyword
refers to, if their math is correct, and

14
00:00:45,140 --> 00:00:47,240
whether things are happening
in the correct order.

15
00:00:48,420 --> 00:00:53,045
Consider this gatherNamesOf function
which expects an arrayOfPeople objects

16
00:00:53,045 --> 00:00:54,140
with names.

17
00:00:54,140 --> 00:00:58,250
It should return a new array with
just the names of each person.

18
00:00:58,250 --> 00:00:59,630
Have I written it correctly?

19
00:00:59,630 --> 00:01:02,470
Maybe you can already see
whether it will work.

20
00:01:02,470 --> 00:01:06,710
In order to check I might just try running
the code here in my browser console

21
00:01:06,710 --> 00:01:08,020
to see what happens.

22
00:01:08,020 --> 00:01:10,610
Well, I see that it doesn't
throw an error right away.

23
00:01:10,610 --> 00:01:15,730
But I still haven't proven that it works,
I only know that it's valid JavaScript.

24
00:01:15,730 --> 00:01:19,710
Next, I might try using
the function with a quick example.

25
00:01:19,710 --> 00:01:23,510
So, in this case, I'll pass an array
of people into the function.

26
00:01:25,120 --> 00:01:27,720
Then save the output
to the names variable.

27
00:01:34,291 --> 00:01:36,741
Still, nothing broke,
so that's a good sign.

28
00:01:36,741 --> 00:01:41,684
But again, I haven't actually proven
that gatherNamesOf does what i want

29
00:01:41,684 --> 00:01:45,220
because I haven't actually
seen the value of names.

30
00:01:50,070 --> 00:01:51,540
And if I add a console.log,

31
00:01:51,540 --> 00:01:55,720
you can see that names is not
what I expected it to be.

32
00:01:55,720 --> 00:02:01,090
All their names are undefined, and now I
still don't know where the problem is.

33
00:02:01,090 --> 00:02:03,890
Even after all this generic manual testing

34
00:02:03,890 --> 00:02:07,310
I have more debugging ahead
of me to fix this function.

35
00:02:07,310 --> 00:02:10,411
So, this method of checking
code is very tedious.

36
00:02:10,411 --> 00:02:14,570
And in the end, I'm still unsure of
what went wrong or how to fix it.

37
00:02:14,570 --> 00:02:18,010
So a number of things makes
this process very low value.

38
00:02:18,010 --> 00:02:22,290
First, I was only able to see
one specific piece of my code.

39
00:02:22,290 --> 00:02:26,630
We only have one function in this case,
but imagine if I had a big application

40
00:02:26,630 --> 00:02:30,110
spanning multiple files and
interacting with one another.

41
00:02:30,110 --> 00:02:33,790
I would have to repeat this process
across the whole stack to find a problem,

42
00:02:33,790 --> 00:02:36,310
taking even more of my time and energy.

43
00:02:36,310 --> 00:02:40,097
I also have to add a lot of code to
my real application just to make

44
00:02:40,097 --> 00:02:41,029
the test work.

45
00:02:41,029 --> 00:02:44,493
Now I've littered up my code here
with silly variables and arrays and

46
00:02:44,493 --> 00:02:46,652
function calls that i don't really need.

47
00:02:46,652 --> 00:02:50,630
I just put them in here to see
what's happening inside the program.

48
00:02:50,630 --> 00:02:54,620
That makes my code harder to read and
changes the way my program runs.

49
00:02:54,620 --> 00:02:57,840
And I also have to remember to
remove everything I wrote just for

50
00:02:57,840 --> 00:03:01,340
testing before I really
publish my code anywhere.

51
00:03:01,340 --> 00:03:03,600
For example, var people and

52
00:03:03,600 --> 00:03:07,360
var names don't really do
anything in my application.

53
00:03:07,360 --> 00:03:11,112
They're just example test I used
to figure out what's going on.

54
00:03:11,112 --> 00:03:14,980
And if I forget to remove any of these
statements my application might break and

55
00:03:14,980 --> 00:03:16,830
cause more headaches.

56
00:03:16,830 --> 00:03:18,600
Also, even while I'm debugging,

57
00:03:18,600 --> 00:03:23,140
I have to remember what all my
console.log statements actually mean.

58
00:03:23,140 --> 00:03:27,290
Usually that means I have to spend extra
time typing little notes to myself from

59
00:03:27,290 --> 00:03:29,660
inside every console.log.

60
00:03:29,660 --> 00:03:34,150
Again, we only have one here, but if I
were manually testing a big application

61
00:03:34,150 --> 00:03:38,130
there might be a lot of these log
statements illustrating the issue.

62
00:03:38,130 --> 00:03:42,690
Most importantly, these are just
temporary fixes, and they don't increase

63
00:03:42,690 --> 00:03:46,820
your ultimate confidence in your code
as it continues to grow and change.

64
00:03:46,820 --> 00:03:51,140
So, what happens if I change
the way gatherNamesOf works later?

65
00:03:51,140 --> 00:03:53,760
I'll have to go back and
add all of these statements again.

66
00:03:53,760 --> 00:03:57,030
And maybe have to totally
rethink what I'm testing.

67
00:03:57,030 --> 00:04:00,820
And I won't know with my changes
affected other parts of my code

68
00:04:00,820 --> 00:04:04,410
that depend on gather names of
without testing those as well.

69
00:04:05,590 --> 00:04:06,505
There's a better way.

70
00:04:06,505 --> 00:04:10,450
We'll still always need this method
of guess and check development, but

71
00:04:10,450 --> 00:04:16,060
we can accomplish a lot of the same things
more succinctly using automated tests.

72
00:04:16,060 --> 00:04:18,740
In the next video I'll
show you an example of how

73
00:04:18,740 --> 00:04:22,130
automated testing improves our
development in all these ways.