1
00:00:00,840 --> 00:00:06,560
Welcome back in the next few videos we're going to discuss javascript loops.

2
00:00:06,570 --> 00:00:08,290
So we have a few different objectives.

3
00:00:08,340 --> 00:00:12,280
The first one is to understand why we use loops and what they are.

4
00:00:12,300 --> 00:00:18,120
The next one is to understand what dry it's an acronym Diyar why what that stands for and how to write

5
00:00:18,120 --> 00:00:19,080
dry code.

6
00:00:19,380 --> 00:00:23,640
And then lastly we'll be writing some simple wild loops to start.

7
00:00:24,780 --> 00:00:30,360
So here's a problem I'll pose if I want it to print the numbers from 1 to 10 each one on a different

8
00:00:30,360 --> 00:00:32,720
line with what we know so far.

9
00:00:32,820 --> 00:00:39,810
I would have to have 10 different cons. logs and that's already not ideal but what if I wanted to do

10
00:00:39,810 --> 00:00:45,930
every number between 1 and 10000 or the first million numbers suddenly I'm having to write a lot of

11
00:00:45,930 --> 00:00:47,120
code myself.

12
00:00:47,370 --> 00:00:48,940
So this is where loops come in.

13
00:00:48,960 --> 00:00:54,990
So even though we most likely wouldn't print the numbers from 1 to 10000 in a real production application

14
00:00:54,990 --> 00:00:55,330
.

15
00:00:55,470 --> 00:01:01,710
Let's take an example like Facebook where a single photo or post can have 10000 different comments on

16
00:01:01,710 --> 00:01:04,340
it like those photos that go viral.

17
00:01:04,380 --> 00:01:07,650
They get thousands and thousands of comments behind the scenes.

18
00:01:07,650 --> 00:01:12,600
There's some sort of loop that's being used to print out all the comments on the page rather than for

19
00:01:12,600 --> 00:01:16,290
every comment there needing to be a separate line of code.

20
00:01:16,320 --> 00:01:22,230
So before we see the syntax of wild loops in javascript I want to introduce this concept called dry

21
00:01:22,230 --> 00:01:24,470
code so dry stands for.

22
00:01:24,470 --> 00:01:25,910
Don't repeat yourself.

23
00:01:26,190 --> 00:01:30,990
It's a concept that's thrown around a lot in all sorts of programming languages but it comes down to

24
00:01:30,990 --> 00:01:33,210
is that we don't want to repeat our code.

25
00:01:33,210 --> 00:01:35,540
So if we take a look at this example here.

26
00:01:35,820 --> 00:01:38,360
This code is very very repetitive.

27
00:01:38,370 --> 00:01:40,690
The only difference is the number that we're printing out.

28
00:01:40,980 --> 00:01:43,860
But otherwise every line is the same.

29
00:01:43,860 --> 00:01:47,710
So this code is not what we would consider dry.

30
00:01:47,790 --> 00:01:52,490
Some people would call this wet which I've heard what code stands for right.

31
00:01:52,500 --> 00:01:55,790
Everything twice that's not as common to hear though as dry.

32
00:01:55,830 --> 00:01:59,000
So what loops do is they allow us to dry up our code.

33
00:01:59,010 --> 00:02:01,040
They are one of the tools at our disposal.

34
00:02:01,110 --> 00:02:05,850
Some of the others that we'll learn about later are functions in arrays and objects but loops are the

35
00:02:05,850 --> 00:02:07,690
most fundamental one.

36
00:02:08,550 --> 00:02:10,840
So we're going to start by talking about.

37
00:02:11,100 --> 00:02:16,760
There are multiple types of loops that will see the first one is the while loop and the while loop is

38
00:02:16,800 --> 00:02:18,440
very similar to an IF statement.

39
00:02:18,690 --> 00:02:27,960
So it takes a condition like X less than five or answer not equal to and and then while that condition

40
00:02:28,290 --> 00:02:33,270
is true it will repeat code that we put in a set of curly braces.

41
00:02:33,480 --> 00:02:39,180
So an if statement is very similar except it doesn't repeat the code it just runs at one time a while

42
00:02:39,180 --> 00:02:43,350
loop will continue to run the code as long as the condition is true.

43
00:02:43,740 --> 00:02:45,020
So here's an example.

44
00:02:45,060 --> 00:02:49,330
This is how we could print the numbers from 1 to 5 Using a while loop.

45
00:02:49,410 --> 00:02:55,020
So we start with a variable called count could be named anything but count we started at 1.

46
00:02:55,350 --> 00:03:01,610
Then we have our while loop with a condition that says count less than 6.

47
00:03:01,650 --> 00:03:05,610
So the very first time this code runs count is equal to 1.

48
00:03:06,000 --> 00:03:07,820
So one is less than six.

49
00:03:07,860 --> 00:03:09,820
So this is true.

50
00:03:09,900 --> 00:03:14,340
So here's an example of using a while loop to print the numbers from 1 to 5.

51
00:03:14,700 --> 00:03:16,650
So we start by initially.

52
00:03:17,400 --> 00:03:21,410
So we start by initializing a variable called count could be named anything.

53
00:03:21,660 --> 00:03:29,160
And we started as one then we have our while loop and the syntax again is while and then a condition

54
00:03:29,160 --> 00:03:29,360
.

55
00:03:29,550 --> 00:03:33,100
In this case the condition is count less than 6.

56
00:03:33,120 --> 00:03:36,550
So the first time that this loop runs count is 1.

57
00:03:36,780 --> 00:03:39,090
So one less than six is true.

58
00:03:39,270 --> 00:03:41,310
So then this code is run.

59
00:03:41,970 --> 00:03:49,340
So that's going to print out count is 1 and then it will add 1 to count and then it goes again.

60
00:03:49,590 --> 00:03:54,150
And it checks is count which is to is to less than 6.

61
00:03:54,300 --> 00:03:54,980
That's true.

62
00:03:55,020 --> 00:03:57,990
So it prints again and it adds 1 to count.

63
00:03:57,990 --> 00:03:59,310
Now it's three.

64
00:03:59,400 --> 00:04:00,650
This is true again.

65
00:04:00,750 --> 00:04:08,910
So it prints counted three adds one to count which is four and so on until the final time count is five

66
00:04:09,420 --> 00:04:11,010
five is less than six.

67
00:04:11,040 --> 00:04:13,090
We print out count five.

68
00:04:13,170 --> 00:04:15,450
We add one to count which is now six.

69
00:04:15,750 --> 00:04:20,600
And then it tries to run again and it realizes six is not less than six.

70
00:04:20,880 --> 00:04:23,600
So then it's done and that's it.

71
00:04:23,610 --> 00:04:28,530
So I'll go ahead and open up my con. and run this code just paste it in here.

72
00:04:28,530 --> 00:04:29,970
Count starts at 1.

73
00:04:30,000 --> 00:04:33,530
It runs wild count is less than six.

74
00:04:33,570 --> 00:04:41,110
I hit enter and I get counted 1 all the way down until the last time a the loop count is five so I could

75
00:04:41,110 --> 00:04:49,090
also try changing this a bit if I wanted to print the numbers between five and 20 if I wanted 20 to

76
00:04:49,090 --> 00:04:50,230
be included.

77
00:04:50,230 --> 00:04:55,780
I would need to change this to either be less than or equal to 20 or less than 21.

78
00:04:56,260 --> 00:05:03,710
So I'll do less than or equal to and that will actually include 20 as you can see five down to 20.

79
00:05:03,760 --> 00:05:08,150
Similarly I can also do things where I'm not just adding one every time.

80
00:05:08,260 --> 00:05:16,590
So if I want to count by twos I would just write count plus equals two rather than just adding one.

81
00:05:16,600 --> 00:05:18,930
So this time it will start at 5.

82
00:05:19,180 --> 00:05:20,530
Then it will go through.

83
00:05:20,530 --> 00:05:21,710
The condition is true.

84
00:05:21,730 --> 00:05:24,340
It prints out the Count and adds to it.

85
00:05:24,340 --> 00:05:32,150
Now we're at seven and then it adds to next time and so on and we end up with this 5 7 9 11 13:15 1719

86
00:05:32,180 --> 00:05:32,690
.

87
00:05:33,190 --> 00:05:38,440
So as you can probably see already a loop can help us save a lot of time rather than having to have

88
00:05:38,650 --> 00:05:42,280
10 different cons about log statements or 15 Konst about log statements.

89
00:05:42,280 --> 00:05:47,340
We just wrote it one time in a loop and that takes care of the rest for us.

90
00:05:48,640 --> 00:05:54,040
So I have another example here where instead of just printing numbers we're using a while loop to loop

91
00:05:54,040 --> 00:05:59,800
through a string and printout every character separately so the output looks like this.

92
00:05:59,890 --> 00:06:02,770
H E L L O N separate lives.

93
00:06:02,800 --> 00:06:03,700
So that's five.

94
00:06:03,710 --> 00:06:09,100
console dot log statements and the way that we achieve that we start with our string equal to hello

95
00:06:09,110 --> 00:06:09,490
.

96
00:06:09,990 --> 00:06:15,070
It's called as TR then we have our accounts which will be the number that we use to access a character

97
00:06:15,070 --> 00:06:15,650
in the string.

98
00:06:15,670 --> 00:06:16,760
It's the index.

99
00:06:16,760 --> 00:06:21,200
And I remember the first character is always at index 0.

100
00:06:21,220 --> 00:06:27,820
So then what we're going to do is say while count is less than the length of the string so the length

101
00:06:27,820 --> 00:06:30,090
is one two three four or 5.

102
00:06:30,430 --> 00:06:37,780
So while the counting is less than 5 We're going to print out the string with a character add index

103
00:06:37,810 --> 00:06:38,710
of count.

104
00:06:38,740 --> 00:06:42,060
So what that means I'll open up my Consul and step through this.

105
00:06:42,070 --> 00:06:44,430
We start this this over here.

106
00:06:44,500 --> 00:06:49,450
String is equal to hello Vark counts is zero.

107
00:06:50,230 --> 00:06:55,090
So rather than just copying the while loop over I'm going to start with just showing you how it works

108
00:06:55,090 --> 00:06:55,480
.

109
00:06:55,480 --> 00:07:01,710
So while count is less than the string length and string length is five.

110
00:07:01,750 --> 00:07:03,760
So 0 is less than 5.

111
00:07:03,820 --> 00:07:04,620
That is true.

112
00:07:04,840 --> 00:07:09,330
We're going to cancel that log string bracket count.

113
00:07:09,370 --> 00:07:13,180
So that's going to be a string of zero which gives us h.

114
00:07:13,480 --> 00:07:18,610
And then we add one to count so count plus plus.

115
00:07:18,610 --> 00:07:20,780
So now count is 1.

116
00:07:21,070 --> 00:07:27,280
So we repeat this again is count less than string length is one less than five.

117
00:07:27,670 --> 00:07:28,340
Yes.

118
00:07:28,480 --> 00:07:30,380
So now we do this line again.

119
00:07:30,430 --> 00:07:34,150
console dot log string of count and count is now 1.

120
00:07:34,150 --> 00:07:35,210
So we get it.

121
00:07:35,440 --> 00:07:43,210
So this keeps going until the very last time or a printout Oh and we add 1 to count which then is equal

122
00:07:43,210 --> 00:07:46,910
to 5 and 5 is not less than 5.

123
00:07:46,930 --> 00:07:49,050
So the loop is over.

124
00:07:49,060 --> 00:07:53,940
Remember that the length is always one greater than the highest index of a string.

125
00:07:54,370 --> 00:08:02,440
So the length is five characters but the maximum index is four because we start at 0 1 2 3 0 is at index

126
00:08:02,440 --> 00:08:03,670
4.

127
00:08:03,730 --> 00:08:08,490
So that's how you could use a loop to print out every character in a string.

128
00:08:09,820 --> 00:08:14,740
So one must note about wildly AUPs is that we can create something called an infinite loop.

129
00:08:14,740 --> 00:08:16,160
If we're not careful.

130
00:08:16,220 --> 00:08:21,260
So an infinite loop occurs when the condition that we provide is never false.

131
00:08:21,430 --> 00:08:26,680
So it just keeps going and going and going and going forever and these are obviously problematic.

132
00:08:26,710 --> 00:08:28,290
They can crush a browser.

133
00:08:28,300 --> 00:08:30,210
They take up all the memory in javascript.

134
00:08:30,370 --> 00:08:32,510
It's not something that you ever want to do.

135
00:08:32,740 --> 00:08:35,840
So here's an example of how one would happen.

136
00:08:36,040 --> 00:08:43,870
We have count equal to zero and then we're saying wow count is less than 10 cancelled out log count

137
00:08:43,880 --> 00:08:44,360
.

138
00:08:44,710 --> 00:08:49,540
Well count is always less than 10 because it's zero and we're never changing count.

139
00:08:49,930 --> 00:08:52,970
So it's never incremented is never going to be over 10.

140
00:08:53,050 --> 00:08:55,420
So this will just print zero forever.

141
00:08:55,540 --> 00:08:59,550
So I don't recommend you do this but you could copy this and paste it into your console.

142
00:08:59,620 --> 00:09:02,830
And what you would see it would print a ton of zeros to start.

143
00:09:03,010 --> 00:09:08,440
And rather than running infinitely most browsers nowadays would actually stop it and alert you that

144
00:09:08,440 --> 00:09:12,910
there's some bad code written there's some infinite loop that's running.

145
00:09:12,940 --> 00:09:16,080
So just to contrast that with a loop like this.

146
00:09:16,240 --> 00:09:23,140
We have an increment count we have to make this condition at some point be false if we don't it will

147
00:09:23,140 --> 00:09:25,880
just keep running forever like this one does here