loops in JavaScript

loops are almost available in every language and JavaScript is no exception. Loops are just like its name suggest looping a task number of times. In other word repeating a task a number of times. Loops are made to make developer’s life easy and keeping code clean and efficient. Suppose you have to print a name around 10 times , now you have got 2 options either you manually print it or play smart by using loop.

Types of loops

In JavaScript there are quite a few loops available to use such as classical for loop , while , do…while, for..in, for…of etc. Each has their own use in different occasions while some can be used interchangeably. But all of this can only be known when we know about these loops.So let’s start with types of loops in detail with examples.

for loop

for loop is the classical loop to loop through a task number of times. for loop is typically used when the number of iteration is known. for loop consist of 3 things in one line:

• Initialization

• condition

• Increment/Decrement

for(let i = 0; i < 5; i++){
console.log(i)
}
// 0, 1, 2, 3, 4

while loop

while loop runs till the condition is true. So if a condition is true forever loop will run infinitely crashing the current environment(tab or terminal). In most cases while and for loop can be used interchangeably.Though it is good to use for loop when number of iteration is known, use while loop when number of iteration is unknown.

 let i = 0;
while(i < 5){
console.log(i)
i++
}
// 0, 1, 2, 3, 4

do…while loop

do…while loop is exactly same as while loop with the exception that it will run at least for once no matter whether condition is true or not. It is usually used in such places where we have to perform a task at least once no matter if it’s true or false.

let i = 0;
do{
console.log(i + 1)
} while ( i < 5 )
// 1 ,2 ,3 ,4 ,5

for…in loop

for…in loop is typically used with objects. It is used to iterate over the keys of the object.

const obj = {a:1, b:2, c:3}
for(const key in obj){
console.log(`key is: ${key}, value is: ${obj[key]}`)
}
// key is: a, value is: 1
// key is: b, value is: 2
// key is: c, value is: 3

for…of loop

for…of loop is used with arrays and other iterable objects such as string, sets, map etc. for…of loop can not be directly applied on objects.

const arr = [10, 20, 30, 40, 50]
for(const num of arr) {
console.log(num)
}
// 10 20 30 40 50

If we try to use for..of loop on objects we will get error like this:

const obj = {a:1, b:2, c:3}
for(const key of obj){
console.log(`key is: ${key}, value is: ${obj[key]}`)
}
// TypeError: obj is not iterable

Therefor if we wish to use for..of on object we take a round to do so:

const obj = {a:1, b:2, c:3}
for(const [key,value] of Object.entries(obj)){
console.log(`key is: ${key}, value is: ${value}`)
}
// key is: a, value is: 1
// key is: b, value is: 2
// key is: c, value is: 3

To loop over objects, we can use Object.keys(), Object.values(), or Object.entries()

🔚 Summary

JavaScript provides various types of loops to handle repetitive tasks efficiently. Traditional loops like for, while, and do...while offer control over iteration flow, while for...in is ideal for object keys and for...of is great for iterable values like arrays. Understanding when and how to use each loop helps write cleaner, more effective code.