JavaScript For Loop

Previous Next

JavaScript Loops

Loops can execute a block of code a number of times.

Loops are handy, if you want to run the same code over and over again, each time with a different value.

Often this is the case when working with arrays:

Instead of writing:

text += cars[0] + " ";
text += cars[1] + " ";
text += cars[2] + " ";
text += cars[3] + " ";
text += cars[4] + " ";
text += cars[5] + " ";

You can write:

var i;
for (i = 0; i < cars.length; i++) {
text += cars[i] + " ";
}

Try it now

Different Kinds of Loops

JavaScript supports different kinds of loops:

for - loops through a block of code a number of times
for/in - loops through the properties of an object
for/of - loops through the values of an iterable object
while - loops through a block of code while a specified condition is true
do/while - also loops through a block of code while a specified condition is true

The For Loop

The for loop has the following syntax:

for (statement 1; statement 2; statement 3) {
// code block to be executed
}

Statement 1 is executed (one time) before the execution of the code block.

Statement 2 defines the condition for executing the code block.

Statement 3 is executed (every time) after the code block has been executed.

Example

for (i = 0; i < 5; i++) {
text += "The number is " + i + " ";
}

Try it now

From the example above, you can read:

Statement 1 sets a variable before the loop starts (var i = 0).

Statement 2 defines the condition for the loop to run (i must be less than 5).

Statement 3 increases a value (i++) each time the code block in the loop has been executed.

Statement 1

Normally you will use statement 1 to initialize the variable used in the loop (i = 0).

This is not always the case, JavaScript doesn't care. Statement 1 is optional.

You can initiate many values in statement 1 (separated by comma):

Example

for (i = 0, len = cars.length, text = ""; i < len; i++) {
text += cars[i] + " ";
}

Try it now

And you can omit statement 1 (like when your values are set before the loop starts):

Example

var i = 2;
var len = cars.length;
var text = "";
for (; i < len; i++) {
text += cars[i] + " ";
}

Try it now

Statement 2

Often statement 2 is used to evaluate the condition of the initial variable.

This is not always the case, JavaScript doesn't care. Statement 2 is also optional.

If statement 2 returns true, the loop will start over again, if it returns false, the loop will end.

Statement 3

Often statement 3 increments the value of the initial variable.

This is not always the case, JavaScript doesn't care, and statement 3 is optional.

Statement 3 can do anything like negative increment (i--), positive increment (i = i + 15), or anything else.

Statement 3 can also be omitted (like when you increment your values inside the loop):

Example

var i = 0;
var len = cars.length;
for (; i < len; ) {
text += cars[i] + " ";
i++;
}

Try it now

Practice Excercise Practice now

JavaScript For In

The For/In Loop

The JavaScript for/in statement loops through the properties of an Object:

Syntax

for (key in object) {
// code block to be executed
}

Example

var person = {fname:"John", lname:"Doe", age:25};

var text = "";
var x;
for (x in person) {
text += person[x];
}

Try it now

Example Explained

The for in loop iterates over a person object
Each iteration returns a key (x)
The key is used to access the value of the key
The value of the key is person[x]

For/In Over Arrays

The JavaScript for/in statement can also loop over the properties of an Array:

Syntax

for (variable in array) {
code
}

Example

var numbers = [45, 4, 9, 16, 25];

var txt = "";
var x;
for (x in numbers) {
txt += numbers[x] + " ";
}
document.getElementById("demo").innerHTML = txt;

Try it now

Do not use for in over an Array if the index order is important.

The index order is implementation-dependent, and array values may not be accessed in the order you expect.

It is better to use a for loop, a for of loop, or Array.forEach() when the order is important.

Array.forEach()

The forEach() method calls a function (a callback function) once for each array element.

Example

var txt = "";
var numbers = [45, 4, 9, 16, 25];
numbers.forEach(myFunction);

function myFunction(value, index, array) {
txt = txt + value + " ";
}

Try it now

Note that the function takes 3 arguments:

The item value
The item index
The array itself

The example above uses only the value parameter. The example can be rewritten to:

Example

var txt = "";
var numbers = [45, 4, 9, 16, 25];
numbers.forEach(myFunction);

function myFunction(value) {
txt = txt + value + " ";
}

Try it now

Practice Excercise Practice now

JavaScript For Of

The For/Of Loop

The JavaScript for/of statement loops through the values of an iterable object.

It lets you loop over iterable data structures such as Arrays, Strings, Maps, NodeLists, and more:

Syntax

for (variable of iterable) {
// code block to be executed
}

variable - For every iteration the value of the next property is assigned to the variable. Variable can be declared with const, let, or var.

iterable - An object that has iterable properties.

Browser Support

For/of was added to JavaScript in 2015 (ECMAScript 2015)

Safari 7 was the first browser to support for/of:

Chrome 38	Edge 12	Firefox 51	Safari 7	Opera 25
Oct 2014	Jul 2015	Oct 2016	Oct 2013	Oct 2014

For/of is not supported in Internet Explorer.

Looping over an Array

Example

let cars = ["BMW", "Volvo", "Mini"];
let text = "";

for (let x of cars) {
text += x + " ";
}

Try it now

Looping over a String

Example

let language = "JavaScript";
let text = "";

for (let x of language) {
text += x + " ";
}

Try it now

Practice Excercise Practice now

JavaScript While Loop

Loops can execute a block of code as long as a specified condition is true.

The While Loop

The while loop loops through a block of code as long as a specified condition is true.

Syntax

while (condition) {
// code block to be executed
}

Example

In the following example, the code in the loop will run, over and over again, as long as a variable (i) is less than 10:

Example

while (i < 10) {
text += "The number is " + i;
i++;
}

Try it now

If you forget to increase the variable used in the condition, the loop will never end. This will crash your browser.

The Do/While Loop

The do/while loop is a variant of the while loop. This loop will execute the code block once, before checking if the condition is true, then it will repeat the loop as long as the condition is true.

Syntax

do {
// code block to be executed
}
while (condition);

Example

The example below uses a do/while loop. The loop will always be executed at least once, even if the condition is false, because the code block is executed before the condition is tested:

Example

do {
text += "The number is " + i;
i++;
}
while (i < 10);

Try it now

Do not forget to increase the variable used in the condition, otherwise the loop will never end!

Comparing For and While

If you have read the previous chapter, about the for loop, you will discover that a while loop is much the same as a for loop, with statement 1 and statement 3 omitted.

The loop in this example uses a for loop to collect the car names from the cars array:

Example

var cars = ["BMW", "Volvo", "Saab", "Ford"];
var i = 0;
var text = "";

for (;cars[i];) {
text += cars[i] + " ";
i++;
}

Try it now

The loop in this example uses a while loop to collect the car names from the cars array:

Example

var cars = ["BMW", "Volvo", "Saab", "Ford"];
var i = 0;
var text = "";

while (cars[i]) {
text += cars[i] + " ";
i++;
}

Try it now

Practice Excercise Practice now

Previous Next

JavaScript For Loop

JavaScript Loops

Instead of writing:

You can write:

Different Kinds of Loops

The For Loop

Example

Statement 1

Example

Example

Statement 2

Statement 3

Example

JavaScript For In

The For/In Loop

Syntax

Example

Example Explained

For/In Over Arrays

Syntax

Example

Array.forEach()

Example

Example

JavaScript For Of

The For/Of Loop

Syntax

Browser Support

Looping over an Array

Example

Looping over a String

Example

JavaScript While Loop

The While Loop

Syntax

Example

Example

The Do/While Loop

Syntax

Example

Example

Comparing For and While

Example

Example

COMPANY

Products

OTHERS

Partner