JS Loop - For

In this tutorial we will learn about JavaScript for loop.

In the previous tutorial we learned about while loop.

for loop

Syntax

for ( initialize; condition; update) {
	//some code
}

In the following example we have for loop that will print "Hello World" 10 times.

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

Explanation:

First the initialization part of the for loop is evaluated. And this happens only once. So, we can see that we have a variable i which is set to 1.

Next the condition is checked. If it is satisfied then we enter the for loop otherwise, we exit the loop. In this case, as long as i <= 10 we will enter the for loop.

Once inside the for loop we execute the code inside it. In this case, we print "Hello World" in the browser console.

After executing the code inside the for loop we move to the update part. This updates the values for the next loop. In this case, we increase the value of i by 1 using the increment operator.

After the update part we again check the condition and repeat the loop

break out of for loop

We use the break keyword when we want to break out of the loop.

In the following example we will break out of the for loop when the value of i = 4.

for ( var i = 1; i <= 10; i++) {
	if ( i == 4 ) {
		break;
	} else {
		console.log("Hello World");
	}
}

The above code will print "Hello World" 3 times.

Explanation

We start by setting the value of i to 1. Then we check if i <= 10. If this condition is satisfied we enter the for loop.

Inside the for loop we check if i is equal to 4. If this is true then we break out of the for loop using break. Otherwise, we print "Hello World" in the browser console.

continue the for loop

We use the continue keyword when we want to continue to the update part of the loop.

In the following code the for loop will print 1,2,3 then skip 4,5,6 and then print 7,8,9 and 10.

for ( var i = 1; i <= 10; i++) {
	if ( i >= 4 && i <= 6 ) {
		continue;
	} else {
		console.log(i);
	}
}

Output

1
2
3
7
8
9
10

Explanation:

In the above for loop we initialize variable i to 1. For value 1 to 3 we print the value of i in the browser console.

When the value of i is between 4 to 6 the continue line is executed which moves us to the update part of the for loop. So, 4,5 and 6 is not printed in the browser console.

When the value of i is between 7 to 10 we print the value in the browser console.

for in loop

We use the for and in keyword to create a for-in loop. We use this to loop through an object.

Syntax

for ( propertyname in objectname ) {
	//some code
}

The propertyname holds the property name of the object.

In the following example we loop through an object and print its detail.

var fruit = {
	name : "Apple",
	from : "India",
	quantity : 1,
	unit : "kg",
	priceperunit : 50
};

for ( var prop in fruit ) {
	console.log("Property : " + prop);
	console.log("Value : " + fruit[prop]);
}

Output

Property : name
Value : Apple
Property : from
Value : India
Property : quantity
Value : 1
Property : unit
Value : kg
Property : priceperunit
Value : 50