6 Ways to Loop Through an Array in JavaScript

Dealing with arrays is everyday work for every developer. In this article, we are going to see 6 different approaches to how you can iterate through in Javascript.

for Loop

The for loop statement has three expressions:

1. Initialization - initialize the loop variable with a value and it is executed once
2. Condition - defines the loop stop condition
3. Update - executed every time after the code block of the loop has been executed.

for (initialization; condition; update statement) {
    // code block to be executed
}

for loop syntax

Example of for-loop:

var array = [
    {id: 0, name: 'John', age: 20},
    {id: 1, name: 'Jane', age: 22},
    {id: 2, name: 'Bob', age: 24},
    {id: 3, name: 'Ana', age: 26},
];

for(let i = 0; i < array.length; i++){
    console.log(array[i].name);
}

/*
Output:
    John
    Jane
    Bob
    Ana
*/

A break statement can be used to stop the loop at any time.

while Loop

The while loop statement has one expression:

1. Condition - defines the loop stop condition

while (condition) {
    // code block to be executed
}

while loop syntax

Example of while-loop:

var array = [
    {id: 0, name: 'John', age: 20},
    {id: 1, name: 'Jane', age: 22},
    {id: 2, name: 'Bob', age: 24},
    {id: 3, name: 'Ana', age: 26},
];

var i = 0;
while(i < array.length) {
    console.log(array[i].name)
    i++
}

/*
Output:
    John
    Jane
    Bob
    Ana
*/

do/while Loop

The do/while loop statement has one expressions:

1. Condition - defines the loop stop condition

do {
    // code block to be executed
} while (condition)

do/while loop syntax

Example of do/while loop:

var array = [
    {id: 0, name: 'John', age: 20},
    {id: 1, name: 'Jane', age: 22},
    {id: 2, name: 'Bob', age: 24},
    {id: 3, name: 'Ana', age: 26},
];

var i = 0;
do {
    console.log(array[i].name)
    i++
} while(i < array.length)
  
/*
Output:
    John
    Jane
    Bob
    Ana
*/

for/of Loop

The for/of loop statement has two expressions:

1. Iterator - refers to the array who will be iterated
2. Variable - The value of the next iteration stored in a variable (which has to be declared with either const, let, or var to hold the value)

for (value of iterator) {
    // code block to be executed
}

for/of loop syntax

Example of for/off loop:

var array = [
    {id: 0, name: 'John', age: 20},
    {id: 1, name: 'Jane', age: 22},
    {id: 2, name: 'Bob', age: 24},
    {id: 3, name: 'Ana', age: 26},
];

for (let index of array) {
    console.log(index.name)
}

/*
Output:
    John
    Jane
    Bob
    Ana
*/

forEach()

The forEach() is a method of the array that uses a callback function to include any custom logic to the iteration. The forEach() will execute the provided callback function once for each array element.

The callback function takes up 3 arguments:

1. currentValue - value of the current element
2. index (optional) - array index of the current element
3. array (optional) - entire array object

The thisArg (optional) - value for the callback function which will be used as its this value.

array.forEach(callback(currentValue [, index [, array]])[, thisArg]);

forEach() loop syntax

Example of forEach():

var array = [
    {id: 0, name: 'John', age: 20},
    {id: 1, name: 'Jane', age: 22},
    {id: 2, name: 'Bob', age: 24},
    {id: 3, name: 'Ana', age: 26},
];

array.forEach(function(profile, index, myArray) {
    console.log(`Index: ${index}, Name: ${profile.name}`);
});

/*
Output:
    John
    Jane
    Bob
    Ana
*/

map()

The map() method is very similar to the forEach() method as it will also execute the provided callback function for each element in the array. The difference between the two is that the map() method creates and returns a new array based on the result of the provided callback function.

The callback function takes up 3 arguments:

1. currentValue - value of the current element
2. index (optional) - array index of the current element
3. array (optional) - entire array object

The thisArg (optional) - value for the callback function which will be used as its this value.

var new_array = array.map(function callback(currentValue[, index[, array]]) {
    // Return element for new_array
}[, thisArg])

map() loop syntax

Example of map():

var array = [
    {id: 0, name: 'John', age: 20},
    {id: 1, name: 'Jane', age: 22},
    {id: 2, name: 'Bob', age: 24},
    {id: 3, name: 'Ana', age: 26},
];

var newArray = myArray.map(function(profile, index, myArr) {
    var newProfile = {
        'id': index,
        'name': profile.firstName,
        'age': profile.age
    }

    return newProfile
})

newArray.forEach(function(profile, index, myArr) {
    console.log(profile.fullName)
});

/*
Output:
    John
    Jane
    Bob
    Ana
*/

If you want to learn more about both methods forEach() and map(), you can check JavaScript Map vs ForEach Method