JavaScript Loops

❮ Prev Next ❯

Loops in JavaScript are used to execute a block of code repeatedly until a certain condition is met.

Loops are one of the main control structures of JavaScript.

With a loop we can automate and repeat indefinitely a block of code, for how many times we want it to run.

JavaScript provides many ways to iterate through loops.

There are different types of loops available in JavaScript, each serving a specific purpose.

I want to focus on 3 ways:

  • while loops
  • do while loops
  • for loops
  • for of loops
  • for in loops

while Loop

The while loop is the simplest looping structure that JavaScript provides us.

We add a condition after the while keyword, and we provide a block that is run until the condition evaluates to true.

Example: 

let list = ["a", "b", "c"];
let i = 0;
while (i < list.length){ 
  console.log(list[i]);//value
  console.log(i);//index
  i = i + 1;
}

Example 

let list = ["a", "b", "c"];
let i = 0;
while (i < list.length){ 
  console.log(list[i]);//value
  console.log(i);//index
  i = i + 1;
}

You can interrupt a whileloop using the break keyword, like this: 


while (true){ 
  if(somethingIsTrue) break;//value
}

Example 

let list = ["a", "b", "c"];
let i = 0;
while (i < list.length){ 
  if(list[i] === "b") break;//value
  console.log(list[i]);//value
  console.log("it will break after found the value");//value
  i = i + 1;
}

and if you decide that in the middle of a loop you want to skip the current iteration, you can jump to the next iteration using continue: 


while (true){ 
    if(somethingIsTrue) continue;//value
    //do something else
}

Example 

let list = ["a", "b", "c"];
let i = 0;
while (i < list.length){ 
  if(list[i] === "b") {
    i = i + 1;
    continue;//value
  }
  console.log(list[i]);//value
  console.log("it will continue after found the value");//value
  i = i + 1;
}

do while Loop

Very similar to while, we have do..whileloops. It's basically the same as whileexcept the condition is evaluated after the code block is executed.

This is useful if you always want to execute the code in the loop at least once and the expression cannot be tested until the code has executed at least once.

This means the block is always executed at least once.

Example: 

let list = ["a", "b", "c"];
let i = 0;
do{ 
  console.log(list[i]);//value
  console.log(i);//index
  i = i + 1;
} while (i < list.length)

Example 

let list = ["a", "b", "c"];
let i = 0;
do{ 
  console.log(list[i]);//value
  console.log(i);//index
  i = i + 1;
} while (i < list.length)

for Loop

The second very important looping structure in JavaScript is the for loop.

We use the forkeyword and we pass a set of 3 instructions: the initialization, the condition, and the increment part.

Example: 

let list = ["a", "b", "c"];
for(let i = 0; i < list.length; i++){ 
  console.log(list[i]);//value
  console.log(i);//index
}

Example 

let list = ["a", "b", "c"];
for(let i = 0; i < list.length; i++){ 
  console.log(list[i]);//value
  console.log(i);//index
}

Just like with whileloops, you can interrupt a forloop using breakand you can fast forward to the next iteration of a forloop using continue.

for...of Loop

This loop is relatively recent (introduced in 2015) and it's a simplified version of the forloop:

The for...ofloop is used to iterate over the elements of an iterable object, such as arrays or strings.

Example: 

let fruits = ["apple", "banana", "orange"];
for(const fruit of fruits){ 
  console.log(fruit); //value
}

Example 

let fruits = ["apple", "banana", "orange"];
for(const fruit of fruits){ 
  console.log(fruit); //value
}

for...in Loop

The for...infor/in loop executes on any data type that can be iterated on. For the most part, you use the for...in loop on arrays and objects.

The for...inloop is used to iterate over the properties of an object.

Example: 


let person = {
  name:"Muhammad",
  age:30,
  gender:"Male"
};
for(const key in person){ 
  console.log(key + ": " + person[key]); //value
}

This loop iterates over each property of the person object and logs both the property name and its corresponding value.

Example 


let person = {
  name:"Muhammad",
  age:30,
  gender:"Male"
};
for(const key in person){ 
  console.log(key + ": " + person[key]); //value
}

Loops are fundamental constructs in JavaScript for iterating through data structures and performing repetitive tasks efficiently.

❮ Prev Next ❯