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

Posted by Keith Corona
Keith Corona
9,553 Points

How the loop condition in a for loop works

for (var i = 1; i <= 10; i += 1) {
  html += '<div>' + i + '</div>';
}

In the video, it is explained that i<=10 is ran right before the first time through the loop and after each time the loop runs. What does this mean? Is it ran twice in each case to check for its validity?

5 Answers

Fynn Lehnert
Fynn Lehnert
15,244 Points

i is a placeholder for the number of the current iteration. first you'll define the starting point of i ( in most cases 1 ) the you'll define the termination point ( in your case 10 ) as i <=10 and then you'll define the steps the loop takes for each iteration until it gets terminated ( in most cases i++ which is the same as i +=1 ).

if you still dont get this for loop, try to picture it as if youd say to a friend: "hey, count from 1 to 10 and with every new number jump on one foot" 

var friend = "Jeff";
for(i = 1; i <=10; i +=1){
   friend.say( i );
   friend.jump();
}
Keith Corona
Keith Corona
9,553 Points

Hello Fynn,

It seems as though my question wasn't fully recorded when I submitted it. In the video, it is stated that the condition (i <=10 in this case) is ran right before the first time through and after each loop. What does this mean? Is the condition i<=10 ran twice for each loop?

Fynn Lehnert
Fynn Lehnert
15,244 Points

please write your question again

Keith Corona
Keith Corona
9,553 Points
Keith Corona
Keith Corona
9,553 Points

Let me get back to you, it seems as though each time I write in the condition, it stops my question from being posted.

Fynn Lehnert
Fynn Lehnert
15,244 Points

wrap your code inside 3 of those ticks: ( ``` ) click markdown Cheatcheet below for help

Keith Corona
Keith Corona
9,553 Points
Keith Corona
Keith Corona
9,553 Points 
for (var i = 1; i <= 10; i += 1) {
  html += '<div>' + i + '</div>';
}

In the video, it is explained that 

i<=10

is ran right before the first time through the loop and after each time the loop runs. What does this mean? Is it ran twice in each case to check for its validity?

Fynn Lehnert
Fynn Lehnert
15,244 Points

could you link to the video?

i can just think of a different meaning... first the browser reads the code and checks the validity and if the function is triggered, it runs/ executes the code

Keith Corona
Keith Corona
9,553 Points
Keith Corona
Keith Corona
9,553 Points

https://teamtreehouse.com/library/javascript-loops-arrays-and-objects/simplify-repetitive-tasks-with-loops/for-loops around 5:29 is when he mentions it being ran right before and after each time the loop runs.

Fynn Lehnert
Fynn Lehnert
15,244 Points

oh i see: it means that the middle part runs twice

  1. the initial run that runs before the loop starts to check if i is less or equal to 10

and each time the loop has run to check if it should go for another round

let me write this out for you:

for( i = 1; i <=10; i++) {
 console.log(  "hi" );
}

this runs as the following:

is i less or equal to 10? i is 1 "hi" i +1

is i less or equal to 10? i is 2 "hi" i +1

is i less or equal to 10? i is 3 "hi" i +1

and so on until i is 10

is i less or equal to 10? i is 10 "hi" loop quits

Keith Corona
Keith Corona
9,553 Points
Keith Corona
Keith Corona
9,553 Points

I see now. Thank you!

Fynn Lehnert
Fynn Lehnert
15,244 Points

happy it helped you. also please mark my answer correct so other know your question is solved ;)