Basics of loops in JavaScript

Learn about Different ways to loop in JavaScript

What is Loop ?

Consider we need to print “hi” 5 times. If we don’t have loop , what we would be doing is

console.log("hi");
console.log("hi");
console.log("hi");
console.log("hi");
console.log("hi");

But , if we know how to use loop , then we can simplify the above code to

for(let i = 1; i <= 5; i++) {
   console.log('👋');
}

Loop

Looping is a way of executing the same function repeatedly .

In other words

Loops are used to execute the same block of code again and again, until certain condition is met.

Different Types of Loops available in JavaScript

• for
• while
• do while

for

syntax

for(initialValue; condition; step or increment) {
   // operation
}

Example .

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

In the above code

• initialValue →i = 0 → Will be executed at the beginning of the loop
• condition → i < len → is checked every-time before the body of the loop is executed
• operation → console.log(i) ; → body of the loop
• step/increment → i = i+1 → Executed every-time after each iteration.

Let’s breakdown how it works

At the beginning of the for loop 

 i = 0 ; is initialised 

First Iteration

 i < len is checked

 i is printed

After end of first iteration 
   i = i + 1 is executed

Second iteration

 i < len check

   print i

This will be repeated  until the condition becomes false.

The above code will be executed like

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

// initial Value
let i = 0

// if condition → execute body 
if (0 < 2)  → true → log(1)

// increment 
i = i+1; 
i = 1;

// if condition → execute body 
if (1 < 2)  → true → log(1)

// increment 
i = i+1; 
i = 2;

// if condition → execute body
if (2 < 2)  → false→ loop terminated

If you want to break the loop , while running the loop , we can use break . break keyword will break the loop , break keyword is only valid inside looping statement.

for(let i =0; i < 5; i = i +1 ){
   if(i > 2) {
      break;
   }
   console.log(i);
}

// the above code will print

0,1,2, when the value of i is 3 the loop breaks

In some case we don’t need to execute the operation for specific value for that we can use continue statement. continue statement will break the current iteration . Once the JavaScript engine Executes continue statement , the block of code below the continue statement will not be executed.

for(let i =0; i < 5; i = i +1 ) {
    if(i%2 == 0) {
       continue; // if continue is 
    }
    console.log(i);
}

1,3

The initial value, condition and increment all are optional

for(;;) {
   console.log("Infinite loop");
}

Example 1 : without initial value

var i = 0;

for( ; i< 5 ; i = i+1 ) {
   console.log(i);
}

---

Example 2 : without condition

var i = 0;

for(;; i =i + 1) {
if( i < 5) { 
      break;
   }
   console.log(i);
}

// output

0,1,2,3,4

---

Example 3 : without increment

var i = 0;

for(;;) {
   if( i < 5) { 
      break;
   }
   console.log(i);
i = i + 1;
}

// output

0,1,2,3,4

---

while loop

syntax

while(condition) {
   operation
}

In while loop we have only space for checking condition .

let i = 0;

while(i < 5) {
   console.log(i);
   i = i + 1;
}

//output 

1,2,3,4,5

If we forgot the increment then it will result in infinite loop

let i = 0;

while(i < 5) {
   console.log(i);
}

In the above code the value of i will always 0 , so the loops run infinitely .

The break and continue work same for while also

let i = 0;

while(i < 5) {
if(i == 2) {
     break;
  }
  console.log(i);
}

//output

0,1

continue

let i = 0;

while(i < 5) {
if(i == 2) {
     continue
  }
  console.log(i); 
  i = i + 1; 
}

//output

0,1,3,4,5

do while

syntax

do {
   // body
} (condition is checked)

do…while loop will execute the body once , then it check for the condition , If the condition is true , it go for next iteration, otherwise stop the loop.

let i = 0;

do{

   console.log(i);

} while(i != 0);

//output
0;

In the above code even though i !=0 condition fails , the body of the do…while is executed once.

let i = 0;
do {
  console.log(i);
  i = i + 1;
} while (i < 3);

// output

0,1,2

We can also use break and continue inside the loop.

Let’s join your hand 🤚 with me JavaScript Jeep🚙💨 .

Buy me a coffee.