JavaScript While, Do-While, For and For-In 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

Loops are used in JavaScript to perform repeated tasks based on a condition. Conditions typically return true or false. A loop will continue running until the defined condition returns false.

For loop Syntax

        
for (initialization; condition; increment/decrement) {
 	 // code
}
        
    

The for loop consists of three optional expressions, followed by a code block:

initialization - This expression runs before the execution of the first loop, and is usually used to create a counter.

condition - This expression is checked each time before the loop runs. If it evaluates to true, the statement or code in the loop is executed. If it evaluates to false, the loop stops.

increment/decrement - This expression is executed after each iteration of the loop. This is usually used to increment a counter but can be used to decrement a counter instead.

Example 1

        
for (let i = 0; i < 3; i++) {
 	console.log(i);
}

//Output :
 0 
 1
 2        
    

Example 2 

We can use for loop to display odd-even numbers

        
for (let i = 0; i <=5; i++) {
     if(i%2!=0){
	console.log(i);	  //Odd-even numbers
     }
}

//Output : 
1
3
5        
    

Example 3 

We can use for loop to add numbers

        
let sum = 0;
for (let i = 0; i <= 9; i++, sum += i);

console.log(sum);

//Output : 55
                
    

for/in

The JavaScript for in-statement loops through the properties of an object

Syntax

        
for (key in object) {
  // code
}
        
    

Example 1.  

We can use for in loop for the array also.

        
// define array
const sports = [ 'cricket', 'hockey', 'football' ];

// using for...in loop
for (let x in sports) {
    console.log(sports[x]);
}

//Output : 
Cricket
Hockey
Football        
    

Example 2. 

We can use it for in loop with strings.

 

        
const string = 'John';
// using for...in loop
for (let i in string) {
    console.log(string[i]);
}

//Output : 
J
o
h
n        
    

Example 3. 

We can iterate through objects.

        
const person = {
    name: 'John',
    age: 20
}
 
// using for...in
for ( let key in person ) {
    // display the properties
    console.log(`${key} => ${person[key]}`);
}

//Output : 
"name => John"
"age => 20"        
    

for/of

The for..of loop in JavaScript allows you to iterate over iterable objects (arrays, sets, maps, strings, etc).

Syntax

        
for (element of iterable) {
    // code
}
        
    

Example 1.  

We can use for of loop with an array.

        
// array
const person = ['John', 'Carter', 'Brandom'];

// using for...of
for ( let x of person ) {
    // display the values
    console.log(x);
}

//Output : 
"John"
"Carter"
"Brandom"        
    

Example 2.  

We can use for of loop with strings.

        
// string
const str = 'John';

// using for...of loop
for (let i of str) {
    console.log(i);
}

//Output : 
J
o
h
N        
    

Example 3.  

We can use for of loop with sets.

        
const set = new Set([1, 2, 3]);
// looping through Set
for (let x of set) {
    console.log(x);
}
 
//Output : 
1
2
3        
    

While

The while statement creates a loop that executes a specified statement as long as the test condition evaluates to true. The condition is evaluated before executing the statement.

Syntax

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

If the condition evaluates to true, the code inside the while loop is executed.

The condition is evaluated again.

This process continues until the condition is false.

When the condition evaluates to false, the loop stops.

Example 1.

Program to display numbers from 1 to 5

        
let i = 1, n = 5;

// while loop from i = 1 to 5
while (i <= n) {
    console.log(i);
    i += 1;
}

//Output : 
1
2
3
4
5        
    

Example 2.

Program to display odd numbers

        
let i=0;
while(i<=5){
    if(i%2!=0){
        console.log(i);//Odd Even Numbers
    }
    i++;
}

//Output : 
1
3
5        
    

Example 3

Program to display sum

        
let sum = 0;
let i = 0;
while (i <= 9){
  sum += i;
  i++;
}

console.log(sum);

// Output : 45        
    

do/while

The do...while statement creates a loop that executes a specified statement until the test condition evaluates to false. The condition is evaluated after executing the statement, resulting in the specified statement executing at least once.

Syntax

        
do {
    // code
} while(condition)
        
    

The body of the loop is executed at first. Then the condition is evaluated.

If the condition evaluates to true, the body of the loop inside the do statement is executed again.

The condition is evaluated once again.

If the condition evaluates to true, the body of the loop inside the do statement is executed again.

This process continues until the condition evaluates to false. Then the loop stops.

Example 1

Program to display numbers

        
let i = 1;
const n = 5;

// do...while loop from 1 to 5
do {
    console.log(i);
    i++;
} while(i <= n);

//Output : 
1
2
3
4
5        
    

Example 2

Program to display odd numbers

        
let i=0;
  do {
    if(i%2!=0){
        console.log(i);      //Odd Even Numbers
    }
    i++;
} while(i<=5); 

//Output : 
1
3
5        
    

Example 3

Program to sum numbers

        
let sum = 0;
let i = 0;
  do {
   sum += i;
  i++;
} while(i <= 9);

console.log(sum); 

//Output : 45            
    
Posted in

Ankit Patel

Leave a Comment

Your email address will not be published.

Scroll to Top