Preview
Video Player
00:00
00:00
Using let with for Loops
2:25Using the var keyword in for loops can cause unexpected behavior. In this video we'll see how let solves those issues.
The let keyword is especially
useful in for loops.
0:00
Using var to define the counter in a for
0:04
loop can lead to some really confusing and
unexpected outcomes.
0:07
Let me show you one common example.
0:12
Open buttons.html and
look at this example.
0:15
The program is designed to
select all buttons on the page,
0:20
then the program adds the behavior for
when someone clicks on the button,
0:24
it produces an alert that says button
then the button number pressed.
0:31
The first button should
say button zero pressed.
0:38
The second button should say,
button one pressed, and so on.
0:42
Lets preview the code and
see it in action.
0:47
When we press any button,
it keeps saying button ten pressed.
0:52
Why is that?
0:57
When you click the button,
the array displays the last value of i.
1:01
In other words each time the loop runs,
i is incremented by one.
1:07
When the loop is complete, the value of i
1:13
is ten clicking any button
displays the current value of i.
1:18
This is not what we want.
1:26
We want each button number to appear.
1:28
The problem is related to scope.
1:31
The variable I lives in what's
called the global scope.
1:34
Like this.
1:39
Only the buttons share
the same value of i.
1:44
What we need is to give each of
the buttons its own local copy of i.
1:48
Fortunately, let allows us to do that.
1:54
This means that the let variable
declaration of i is localized to each
2:01
cycle of the for loop.
2:06
In other words the i variable is distinct
for each cycle through the loop.
2:08
Let's preview that now.
2:14
When we click on any button,
2:17
we see that the correct number
of the button get selected.
2:19
Fantastic.
2:23