Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

JavaScript Using let with for Loops

Posted by Unsubscribed User
Unsubscribed User
3,436 Points

How did the "i" iterate?

I don't understand how the "i" iterate to 10 whenever we click on a button. It's declared in the for loop to start at "0" and then increase by "1" each time the loop iterate. Can someone explain to me why "i" is always 10? How is it interpreted by the browser to result 10?

3 Answers

Steven Parker
Steven Parker
229,744 Points
Steven Parker
Steven Parker
229,744 Points

The variable "i" is 10 because there are 10 buttons. As the loop goes through the buttons, the value in "i" gets larger each time. So after the loop finishes, "i" will be 10 since the loop executed 10 times.

So if all button event handlers share "i" as a global (defined using "var"), then when any event occurs, "i" will be 10 since that was the value it had (and still does) after finishing the loop.

But if you define "i" using let instead of var, then each button gets it's own value instead of sharing the final one.

Unsubscribed User
Unsubscribed User
3,436 Points

Thank you for the reply. My understanding is that the loop goes through the buttons and it executes the what's between the {} before it changed "i" value. And this is why I didn't understand why it went through all the buttons regardless of clicking the button. Can you explain what's wrong with my understanding? I have another question. What's "i++"?

Steven Parker
Steven Parker
229,744 Points
Steven Parker
Steven Parker
229,744 Points

The code in the loop just establishes click handlers for the buttons, they don't actually run until the buttons are clicked (long after the loop has finished).

When used as a statement by itself, "i++" is the the same thing as "i += 1". The "++" as used here is the post-increment operator and it just adds one to variable it is placed after.

Sukhbat lkhagvadorj
Sukhbat lkhagvadorj
1,820 Points
Sukhbat lkhagvadorj
Sukhbat lkhagvadorj
1,820 Points

This was confusing me as well but I was missing the part where "button.addEventListener" function does not get executed unless we click on it. So the important part is that before we click, the loop already gets executed (10 times) thus the i = 10 by the time we click on any button.

andren
andren
28,558 Points
andren
andren
28,558 Points

A for loop has three parts. The part where you define the index, the part where you define what the condition for running the loop should be, and the part where you define what should happens after each run of the loop.

The loop in the video has i > buttons.length defined as it's condition for running. That means it will only run while i is less than the length of the buttons list. Since there are 10 buttons that means it runs exactly 10 times.

After running 10 times i will equal 10, since the i++ code that runs after each loop has been run 10 times. And since the buttons simply print the current (after the loop has ran) value of i they all print 10.

Unsubscribed User
Unsubscribed User
3,436 Points

Thank you for the reply. My understanding is that the loop goes through the buttons and it executes the what's between the {} before it changed "i" value. And this is why I didn't understand why it went through all the buttons regardless of clicking the button. Can you explain what's wrong with my understanding? I have another question. What's "i++"?