DEV Community: Sri Sai Jyothi

Describing For loops in JavaScript

Sri Sai Jyothi — Sun, 12 Jul 2020 11:47:50 +0000

1. The Standard For loop

let numbers = [10,20,30];
for(i = 0; i < a.length; i++ ){
  console.log(numbers[i]);
}

👉 We can use break, continue, and return inside of the standard for loop.

2. forEach Loop

let numbers = [1,2,3];
numbers.forEach(function(value){
  console.log(value);
}

Now, we'll get exactly as the same output as in case of the standard for-loop.

👉 We CANNOT use break or continue inside forEach loop.

👉 We can use the return keyword (forEach is anyway a function so it doesn't make any difference to use it)

3. For-in Loop

👉 It is used for looping over object properties.

What happens if we loop through an array?

// Looping through Objects
let obj = {a:10, b:20, c:30};
for(let prop in obj){
console.log(prop) //0
console.log(typeof(prop)) //string
}

//Looping through an array
let numbers = [10,20,30];
for(let index in numbers){
console.log(index) //0
console.log(typeof(index)) // string❗
}

4. For-Of Loop

👉 Use for-of to loop over itterables like arrays.

let numbers = [10,20,30];
for(let index of numbers){
console.log(index) //0
console.log(typeof(index)) // number❗
}

Summary

📝 The main difference between for and forEach is the use of break, continue, and return
📝 The main difference between for-in and for-of is the former is used to iterate over Object properties and the latter is for iterables like arrays.