[JavaScript] All About For loops in JavaScript - Actual Usage in Real Life with Examples!

Learn about basic for-loop, for-each, for-in and for-of loops!

---

Introduction

If you have learned programming languages like Java, it only has two kinds of for-loop, which are general for-loop and enhanced for-loop.

In JavaScript, there are four(4) different kinds of for-loop.

1. General for-loop

2. for-in loop

3. for-of loop

4. for-each loop

As a developer, you need to know the difference and which one to use in a certain situation.

Having this practice and habit can make you become a better developer.

---

1. General For-loop

General for loop is quite straightforward in JavaScript.

This kind of for loop can be used in any circumstance when you want to iterate through a block of code many times.

For every loop, regardless of being while loop or for loop, you need 3 steps.

1. Initialization

   • In this step, you are initializing a variable that will work as a count variable.

   • Or a variable that will be updated in the update step.

   • Syntax:

for (let i = 0; // condition part; // update part) {
    // your codes
}

1. Condition

   • To avoid an infinite loop, you need certain conditions to stop your loop.

   • This step is where you decide how many times you want to iterate through the loop.

   • Syntax:

for (let i = 0; i < 10; // update part) {
    // your codes
}

1. Update (Increment/Decrement)

   • In this step, you want to either increment or decrement your variable.

   • If you want to increase by 1, do i++.

   • If you want to decrease by 1, do i--.

   • If you want to increase by 2, i += 2 works, too.

for (let i = 0; i < 10; i++) {
    // your codes
}

---

2. For-in Loop

For-in loops are mostly used with Objects in real life. Let's just have a look at the example.

let person = {
    name: "John",
    age: 30,
    tel: "0000-0000",
    city: "Singapore",
};

for (const key in person) {
    console.log(key + ": " + person[key]);
}

// Prints the following:

// name: "John"
// age: 30
// tel: "0000-0000"
// city: "Singapore"

---

3. For-of Loop

For-of loops are used to loop through an interable object, such as Arrays, Strings, Maps, NodeLists, Set and DOM.

Iterating through an Array:

let brands = ["Apple", "Google", "Amazon", "Microsoft", "Meta"];
    for (const brand of brands) {
    console.log(brand);
}

// Prints the following:
// Apple
// Google
// Amazon
// Microsoft
// Meta

Iterating through a String

for (const str of "Hello") {
    console.log(str);
}

// Prints the following:
// H
// e
// l
// l
// o

---

4. For-each Loop

For-each loop can only be used to loop through an array. As the name tells you, it gives you "each" element in the array.

Syntax:

array.forEach(function(currentValue, index, arr))

The for-each loop executes a function, and this function is called the callback function.

Generally, the callback function receives three parameters, which are currentValue, index, and array.

• Current Value

  • The current value of your array.

• Index

  • The current index of your array, which starts from 0.

• Array

  • The array itself that you are looping through.

Example:

const animals = ["dog", "cat", "hamster", "elephant", "whale"];

animals.forEach(function (animal, index) {
    console.log(animal);
    console.log(index);
});

// dog
// 0
// cat
// 1
// hamster
// 2
// elephant
// 3
// whale
// 4