Basics of loops in JavaScript

Learn about Different ways to loop in JavaScript

Javascript Jeep🚙💨
Nov 30 · 4 min read
Image by Tine Ivanič

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

  • initialValuei = 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/incrementi = i+1 → Executed every-time after each iteration.

Let’s breakdown how it works

At the beginning of the for loop 

The above code will be executed like

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

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);
}

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);
}

The initial value, condition and increment all are optional

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

Example 1 : without initial value

var i = 0;

Example 2 : without condition

var i = 0;

Example 3 : without increment

var i = 0;

while loop

syntax

while(condition) {
operation
}

In while loop we have only space for checking condition .

let i = 0;

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

let i = 0;

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;

continue

let i = 0;

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;

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);

We can also use break and continue inside the loop.

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

Buy me a coffee.

Buy me a coffee.

JavaScript in Plain English

Learn the web's most important programming language.

Javascript Jeep🚙💨

Written by

Articles related to javascript

JavaScript in Plain English

Learn the web's most important programming language.

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade