Welcome to the Treehouse Community

The Treehouse Community is a meeting place for developers, designers, and programmers of all backgrounds and skill levels to get support. Collaborate here on code errors or bugs that you need feedback on, or asking for an extra set of eyes on your latest project. Join thousands of Treehouse students and alumni in the community today. (Note: Only Treehouse students can comment or ask questions, but non-students are welcome to browse our conversations.)

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and a supportive community. Start your free trial today.

JavaScript Using let with for Loops

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
220,416 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.

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
220,416 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.

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,538 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.

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++"?