JavaScript For Loop

In this tutorial, you will learn about JavaScript for loop. for loop in JavaScript is used to execute a block of code a number of times. In the previous tutorial, we have seen all about JavaScript while loop with the help of an example.

In this guide We will see all about JavaScript for loop and their types with appropriate example.

JavaScript For Loop

JavaScript for loop is used to execute a block of code a specific number of times. for example, if you want to display a message 10 times, Then you can use for loop. It is just a simple example, you can perform more complex operations using for loop.

Types of JavaScript For Loop

JavaScript support three types of for loop:

• for:- loop through a block of the code number of times.
• for/in:- loop through properties of an object.
• for/of:- loop through values of the iterable object.

The for loop

The for loop is used to execute a block of code number of times.

Syntax

for(intializeExpression; condition; updateExpression;)
{
	//Block of code
}

Working of for loop:

1. The intializeExpression initializes or declares variables and executes only once.
2. The condition is evaluated,
   a. If the condition evaluates false, the for loop is terminated.
   b. If the condition evaluates true, the block of code inside for loop is executed.
3. updateExpression will update the value of intializeExpression when the condition is true.
4. The condition is evaluated again. This process continues until when the condition is false.
   

Flowchart of JavaScript for loop

Example: Display number from 1 to 10

<script>
// Display number from 1 to 10
for(var i = 1; i <= 10; i++)
{
	console.log(i);
};
</script>

Output

1
2
3
4
5
6
7
8
9
10

Example: Display all the item from the array.

// Display all the item from the array lang.
var lang = ['Java', 'Python', 'PHP', 'CSS', 'HTML', 'jQuery'];
for(var i = 0; i < lang.length; i++ )
{
	console.log(lang[i]);
};

Output

Java
Python
PHP
CSS
HTML
jQuery

The For/in Loop

The For/in statement loop through properties of an object.

Syntax

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

Example: Display the object key’s value one by one

// Display the object key's value 
var x;
var person = {firstname: 'Vishvajit', lastname: 'Rao', age: 22, email: '[email protected]'};
for ( x in person )
{
	console.log(person[x]);
};

Output

Vishvajit
Rao
22
[email protected]

Example Explain:

1. The for-in loop iterate over a person object.
2. Each iteration returns a key x.
3. The key x is used to access the value of the key.
4. The value of the key is access using person[x].

The For/Of loop

The For/Of statement loop through the value of iterable object.

Syntax

for (variable of iterable)
{
	// block of code
};

Example: Display all the item of the iterable

// display the item of lang iterable
var lang = ['Java', 'Python', 'PHP', 'CSS', 'HTML', 'jQuery'];
var x;
for (x of lang)
{
	console.log(x);
};

Output

Java
Python
PHP
CSS
HTML
jQuery

Looping Over a String

You can loop over a string using for of loop.

Example

var lang = "Hello"
var x;
for (x of lang)
{
	console.log(x);
};

Output

H
e
l
l
o

Conclusion

In this article, we have seen all about JavaScript for loop with the help of an example. for loop in JavaScript is used to execute a block of code a number of times. There are various types of for loops available in JavaScript.

Except printing numbers using for loop, you can perform more complex operations. When you will work on a real-life project, then for loop will very helpful for you to handle more complex operations.

if you like this ( for loop in JavaScript ) article, please share and keep visit for further JavaScript tutorials.