Heads up! To view this whole video, sign in with your Courses account or enroll in your free 7-day trial. Sign In Enroll
Preview
Start a free Courses trial
to watch this video
Use the `while` statement to create a loop that executes code as long as a condition evaluates to true.
Reminder
The value of a variable declared with const cannot be changed through reassignment. We're using the addition assignment operator (+=) to add one to the current value of counter, until it reaches the value 10.
let counter = 0;
while ( counter < 10 ) {
console.log( getRandomNumber(10) );
counter += 1;
}
In this case, it's important to use the keyword let, which, as you learned, lets you change (or manipulate) a variable's value through reassignment.
Resources
Related Discussions
Have questions about this video? Start a discussion with the community and Treehouse staff.
Sign upRelated Discussions
Have questions about this video? Start a discussion with the community and Treehouse staff.
Sign up
JavaScript provides several
different ways to create loops.
0:00
They all essentially do the same thing.
0:04
Repeat an action over and
0:05
over again over a given number of times
until a stopping condition is true.
0:07
To better explain, think back to when you
learned about conditional statements.
0:11
For example, the if statement runs a block
of code if a particular condition is true.
0:15
An if statement looks like this,
inside the parentheses goes a condition.
0:20
If the condition is true,
then the code inside the code block runs.
0:25
In this example, if the value stored in
the variable name is the string Gadget,
0:28
then an alert dialog appears.
0:33
Loops use conditions in a similar way.
0:35
The while loop for example,
has a structure and
0:37
syntax that resembles an if statement.
0:39
There's the while keyword
followed by a set of parentheses.
0:42
A condition also goes inside
the set of parentheses.
0:45
But instead of the code inside the block
running only once when the condition is
0:48
true, it runs over and over again
as long as the condition is true.
0:53
All right, let's have a go at the
challenge of logging ten random numbers to
0:57
the console using a while loop.
1:01
You can code along with me by launching
the workspace with this video.
1:03
You can also download the project
files for this course and
1:06
use your preferred text editor.
1:09
Open the file while.js
located inside the js folder.
1:10
This file is already linked to index.html,
and
1:15
there's already a function in
this file called getRandomNumber.
1:18
It returns a random number from one to
a number that's supplied to the function.
1:23
For example,
if you call the function like this,
1:28
it returns a random
number from one to six.
1:31
You learned all about how this function
works in an earlier JavaScript course.
1:34
Check the teacher's notes
if you need a refresher.
1:38
To log ten random numbers from one to six,
1:41
you could call the function
once inside console.log,
1:44
then copy the statement and
paste it nine times.
1:49
Whenever you copy and paste code to
perform the same action again and again,
1:57
it should be a warning sign,
2:00
there's likely a better more maintainable
way of writing and running the code.
2:02
This is where a loop comes in,
to help you avoid code duplication.
2:06
I'll start by adding a while statement.
2:10
Notice that just like
a conditional statement,
2:14
there's no semi colon
after the final brace.
2:17
Now what should go inside this condition?
2:19
I want to return ten random numbers.
2:23
So I need to run this loop ten times.
2:25
First, I'll need some way to keep track
of the number of times the loop runs.
2:29
Tracking values sounds like a job for
a variable.
2:33
I'll start by declaring a variable
outside the loop named counter and
2:36
assigning it the number zero.
2:42
Think of this counter as a lap counter at
a race that keeps track of how many times
2:44
a runner goes around the track.
2:48
At the start of a race, a runner has
run around the track zero times,
2:51
each time around the track,
or each time the loop runs,
2:56
we'll add one to this counter.
3:00
Inside the braces,
you update the counter variable by
3:02
adding one to its current value
with counter plus equals 1.
3:07
This code block contains all of the code
that runs each time the loop runs.
3:12
For each time through the loop,
the counter increments by one.
3:18
So now that I have a way to keep track
the number of times the loop runs,
3:22
I'll create a test condition.
3:26
Between the parentheses,
type counter is less than 10.
3:28
In other words, as long as the number
assigned to the counter variable is
3:33
less than ten,
the loop will repeat itself.
3:38
Now I'll execute some
code inside the loop.
3:42
I'll use the getRandomNumber function
3:46
to generate a random number from one
to ten and log it to the console.
3:49
I want to display the random
number in a message.
3:59
So I'll use backticks to
create a template literal that
4:02
displays the message,
the random number is, and
4:07
to insert or interpolate
the number into the string output,
4:11
I'll place the call to the getRandomNumber
function within dollar sign curly braces.
4:16
I'll save the file.
4:24
When I preview index.html
in the browser and
4:26
open the JavaScript console,
ten random numbers appear.
4:30
Now, what if you want 100 random numbers?
4:34
The loop makes it really simple.
4:38
Back in the while.js, change the test
condition to counter is less than 100.
4:39
How about 1,000?
4:49
Okay, I'll set this back to ten.
4:54
Now let's take a moment to look into the
inner workings of the JavaScript engine.
5:02
We'll slow everything down and
look at how this program works and
5:07
how the browser's JavaScript engine or
interpreter runs this code.
5:10
First, it loads and
reads through the program.
5:14
It memorizes the function and
checks for any syntax errors.
5:17
Then it starts to run the program.
5:20
It creates a variable named counter
which points to the value zero.
5:23
Then it looks at the while loop.
5:27
It evaluates the condition.
5:29
At this point,
the counter variable holds the value zero.
5:30
The loop condition asks,
is counter less than ten?
5:34
Zero is indeed less than ten, so
5:37
the JavaScript engine enters the code
block and does several things.
5:39
First, it calls the function to generate
a random number from one to ten and
5:44
it increases the counter by one.
5:49
The counter variable now
holds the value one.
5:51
Then the loop goes back to
the while condition and
5:54
checks the condition again,
is one less than ten?
5:57
Yes it is, so the loop runs again.
6:00
It runs again and again until
the condition is no longer true.
6:02
When the counter variable is equal to ten,
the condition is no longer true, so
6:07
the loop ends and
the rest of the program continues.
6:11
In this case, the loop is
the last part of this program, so
6:14
the entire script is done and
the program ends.
6:17
You need to sign up for Treehouse in order to download course files.
Sign upYou need to sign up for Treehouse in order to set up Workspace
Sign up