1
00:00:00,700 --> 00:00:04,007
JavaScript provides several
different ways to create loops.

2
00:00:04,007 --> 00:00:05,910
They all essentially do the same thing.

3
00:00:05,910 --> 00:00:07,375
Repeat an action over and

4
00:00:07,375 --> 00:00:11,782
over again over a given number of times
until a stopping condition is true.

5
00:00:11,782 --> 00:00:15,370
To better explain, think back to when you
learned about conditional statements.

6
00:00:15,370 --> 00:00:20,681
For example, the if statement runs a block
of code if a particular condition is true.

7
00:00:20,681 --> 00:00:25,240
An if statement looks like this,
inside the parentheses goes a condition.

8
00:00:25,240 --> 00:00:28,968
If the condition is true,
then the code inside the code block runs.

9
00:00:28,968 --> 00:00:33,141
In this example, if the value stored in
the variable name is the string Gadget,

10
00:00:33,141 --> 00:00:35,270
then an alert dialog appears.

11
00:00:35,270 --> 00:00:37,475
Loops use conditions in a similar way.

12
00:00:37,475 --> 00:00:39,771
The while loop for example,
has a structure and

13
00:00:39,771 --> 00:00:42,260
syntax that resembles an if statement.

14
00:00:42,260 --> 00:00:45,617
There's the while keyword
followed by a set of parentheses.

15
00:00:45,617 --> 00:00:48,870
A condition also goes inside
the set of parentheses.

16
00:00:48,870 --> 00:00:53,568
But instead of the code inside the block
running only once when the condition is

17
00:00:53,568 --> 00:00:57,569
true, it runs over and over again
as long as the condition is true.

18
00:00:57,569 --> 00:01:01,117
All right, let's have a go at the
challenge of logging ten random numbers to

19
00:01:01,117 --> 00:01:03,110
the console using a while loop.

20
00:01:03,110 --> 00:01:06,202
You can code along with me by launching
the workspace with this video.

21
00:01:06,202 --> 00:01:09,058
You can also download the project
files for this course and

22
00:01:09,058 --> 00:01:10,695
use your preferred text editor.

23
00:01:10,695 --> 00:01:15,670
Open the file while.js
located inside the js folder.

24
00:01:15,670 --> 00:01:18,773
This file is already linked to index.html,
and

25
00:01:18,773 --> 00:01:23,099
there's already a function in
this file called getRandomNumber.

26
00:01:23,099 --> 00:01:28,285
It returns a random number from one to
a number that's supplied to the function.

27
00:01:28,285 --> 00:01:31,825
For example,
if you call the function like this,

28
00:01:31,825 --> 00:01:34,874
it returns a random
number from one to six.

29
00:01:34,874 --> 00:01:38,515
You learned all about how this function
works in an earlier JavaScript course.

30
00:01:38,515 --> 00:01:41,266
Check the teacher's notes
if you need a refresher.

31
00:01:41,266 --> 00:01:44,916
To log ten random numbers from one to six,

32
00:01:44,916 --> 00:01:49,820
you could call the function
once inside console.log,

33
00:01:49,820 --> 00:01:54,117
then copy the statement and
paste it nine times.

34
00:01:57,030 --> 00:02:00,839
Whenever you copy and paste code to
perform the same action again and again,

35
00:02:00,839 --> 00:02:02,267
it should be a warning sign,

36
00:02:02,267 --> 00:02:06,333
there's likely a better more maintainable
way of writing and running the code.

37
00:02:06,333 --> 00:02:10,078
This is where a loop comes in,
to help you avoid code duplication.

38
00:02:10,078 --> 00:02:12,810
I'll start by adding a while statement.

39
00:02:14,260 --> 00:02:17,031
Notice that just like
a conditional statement,

40
00:02:17,031 --> 00:02:19,676
there's no semi colon
after the final brace.

41
00:02:19,676 --> 00:02:23,193
Now what should go inside this condition?

42
00:02:23,193 --> 00:02:25,970
I want to return ten random numbers.

43
00:02:25,970 --> 00:02:29,223
So I need to run this loop ten times.

44
00:02:29,223 --> 00:02:33,740
First, I'll need some way to keep track
of the number of times the loop runs.

45
00:02:33,740 --> 00:02:36,743
Tracking values sounds like a job for
a variable.

46
00:02:36,743 --> 00:02:42,218
I'll start by declaring a variable
outside the loop named counter and

47
00:02:42,218 --> 00:02:44,644
assigning it the number zero.

48
00:02:44,644 --> 00:02:48,816
Think of this counter as a lap counter at
a race that keeps track of how many times

49
00:02:48,816 --> 00:02:51,120
a runner goes around the track.

50
00:02:51,120 --> 00:02:56,228
At the start of a race, a runner has
run around the track zero times,

51
00:02:56,228 --> 00:03:00,443
each time around the track,
or each time the loop runs,

52
00:03:00,443 --> 00:03:02,883
we'll add one to this counter.

53
00:03:02,883 --> 00:03:07,604
Inside the braces,
you update the counter variable by

54
00:03:07,604 --> 00:03:12,846
adding one to its current value
with counter plus equals 1.

55
00:03:12,846 --> 00:03:18,350
This code block contains all of the code
that runs each time the loop runs.

56
00:03:18,350 --> 00:03:22,474
For each time through the loop,
the counter increments by one.

57
00:03:22,474 --> 00:03:26,052
So now that I have a way to keep track
the number of times the loop runs,

58
00:03:26,052 --> 00:03:28,440
I'll create a test condition.

59
00:03:28,440 --> 00:03:33,699
Between the parentheses,
type counter is less than 10.

60
00:03:33,699 --> 00:03:38,518
In other words, as long as the number
assigned to the counter variable is

61
00:03:38,518 --> 00:03:41,520
less than ten,
the loop will repeat itself.

62
00:03:42,790 --> 00:03:46,915
Now I'll execute some
code inside the loop.

63
00:03:46,915 --> 00:03:49,805
I'll use the getRandomNumber function

64
00:03:49,805 --> 00:03:54,653
to generate a random number from one
to ten and log it to the console.

65
00:03:59,710 --> 00:04:02,551
I want to display the random
number in a message.

66
00:04:02,551 --> 00:04:07,369
So I'll use backticks to
create a template literal that

67
00:04:07,369 --> 00:04:11,673
displays the message,
the random number is, and

68
00:04:11,673 --> 00:04:16,900
to insert or interpolate
the number into the string output,

69
00:04:16,900 --> 00:04:24,508
I'll place the call to the getRandomNumber
function within dollar sign curly braces.

70
00:04:24,508 --> 00:04:26,840
I'll save the file.

71
00:04:26,840 --> 00:04:30,226
When I preview index.html
in the browser and

72
00:04:30,226 --> 00:04:34,692
open the JavaScript console,
ten random numbers appear.

73
00:04:34,692 --> 00:04:38,180
Now, what if you want 100 random numbers?

74
00:04:38,180 --> 00:04:39,864
The loop makes it really simple.

75
00:04:39,864 --> 00:04:46,951
Back in the while.js, change the test
condition to counter is less than 100.

76
00:04:49,210 --> 00:04:50,969
How about 1,000?

77
00:04:54,140 --> 00:04:55,915
Okay, I'll set this back to ten.

78
00:05:02,644 --> 00:05:07,120
Now let's take a moment to look into the
inner workings of the JavaScript engine.

79
00:05:07,120 --> 00:05:10,618
We'll slow everything down and
look at how this program works and

80
00:05:10,618 --> 00:05:14,383
how the browser's JavaScript engine or
interpreter runs this code.

81
00:05:14,383 --> 00:05:17,400
First, it loads and
reads through the program.

82
00:05:17,400 --> 00:05:20,984
It memorizes the function and
checks for any syntax errors.

83
00:05:20,984 --> 00:05:23,130
Then it starts to run the program.

84
00:05:23,130 --> 00:05:27,285
It creates a variable named counter
which points to the value zero.

85
00:05:27,285 --> 00:05:29,010
Then it looks at the while loop.

86
00:05:29,010 --> 00:05:30,576
It evaluates the condition.

87
00:05:30,576 --> 00:05:34,016
At this point,
the counter variable holds the value zero.

88
00:05:34,016 --> 00:05:37,818
The loop condition asks,
is counter less than ten?

89
00:05:37,818 --> 00:05:39,588
Zero is indeed less than ten, so

90
00:05:39,588 --> 00:05:44,150
the JavaScript engine enters the code
block and does several things.

91
00:05:44,150 --> 00:05:49,220
First, it calls the function to generate
a random number from one to ten and

92
00:05:49,220 --> 00:05:51,486
it increases the counter by one.

93
00:05:51,486 --> 00:05:54,480
The counter variable now
holds the value one.

94
00:05:54,480 --> 00:05:57,309
Then the loop goes back to
the while condition and

95
00:05:57,309 --> 00:06:00,281
checks the condition again,
is one less than ten?

96
00:06:00,281 --> 00:06:02,980
Yes it is, so the loop runs again.

97
00:06:02,980 --> 00:06:07,065
It runs again and again until
the condition is no longer true.

98
00:06:07,065 --> 00:06:11,333
When the counter variable is equal to ten,
the condition is no longer true, so

99
00:06:11,333 --> 00:06:14,191
the loop ends and
the rest of the program continues.

100
00:06:14,191 --> 00:06:17,377
In this case, the loop is
the last part of this program, so

101
00:06:17,377 --> 00:06:19,997
the entire script is done and
the program ends.