Easiest Way To Loop Through an Array in JavaScript

Last updated on October 17, 2022

In JavaScript, there are multiple ways to loop through an array. Some of them belong to older versions of Javascript, others have been introduced in the latest version. Suppose we have an array that contains fruits name,

const fruits = ["apple", "orange", "graphs"];

Let’s apply different ways to loop through on above array.

Foreach Loop

forEach() is the simplest JavaScript function that loops through an array. Below is a simple and clean example,

fruits.forEach((fruit) => {
    console.log(fruit);
});

In this example, the forEach() function loops through the fruits array and allows access to each element. Also, it has a callback function with a fruit parameter, which is called an element of the array. It also provides an index for each element.

fruits.forEach((fruit, index) => {
    console.log(fruit);
});

The second parameter inside the call-back function is the index of each element. It starts from 0 since apple is the first element in the array so the index would be 0.

fruits.forEach((fruit, index, fruits) => {
    console.log(fruit, index, fruits);
});

It also accepts the third parameter, the current array can be passed. It is optional and does not mutate the array. In the following example, we learn what can be achieved with the third parameter,

fruits.forEach((fruit, index, fruits) => {
    fruits[index] = fruit  + ' per kg $10';
});

The above script is adding a string “per kg $10” to each element. fruits[index] and fruit return the same result. Both have value, either it can be apple or any other item of the array. But the difference is fruits[index] can be used to reassign value for a specific item of the array.

The result of fruits[index] and fruit would be the same, but the difference is fruits[index] has the ability to save modified element value or can be assigned a new value to the current element.

For Loop

JavaScript’s for() loop is another way to loop through an array. So it would also allow accessing each element.

for (let i = 0; i < fruits.length; ++i) {
  /* code block */
  console.log(fruits[i]);
}

In this script, the first statement (let i = 0) of the loop starts from 0. The second statement checks if the variable (i) value is less than the array’s length, then allows to execute the code block. Otherwise, it would stop. The third statement increases the value just after the execution of the code block. That means, variable (i) the value would be changed every time when code block executes.

Map Method

Javascript’s map() method iterates each element of the provided array and creates a new array. It has three parameters, call back function, index, and array. Below is the definition of each parameter

Call-Back Function: map() method calls callback function for each item.
Index: It is an optional parameter that shows the current index.
Array: It is also an optional parameter that simply gives an option to use the current element’s array.

Let’s use map() method for iterating on the fruits array that we created earlier.

let addPriceToFruits = [];
fruits.map((fruit, index) => {
    addPriceToFruits[index] = fruit + " is $5 per kg";
});

In this example, map() method loops through the fruits array and adds the string to each element. First, we assigned a blank array to addPriceToFruits variable. Next, the callback function has been passed into map() method that has two arguments, fruit and index. The first argument returns the value of the element and the second returns the index of the element. The index argument helps in pushing each modified element into addPriceToFruits array.

Conclusion

In JavaScript, there are several ways that help you to loop through an array. For example, you can use the forEach() loop, for loop, and map() method.

Written by

Ayaz Ali Shah

I am a skilled full-stack developer with extensive experience in creating and deploying large and small-scale applications. My expertise spans front-end and back-end technologies, along with database management and server-side programming.

Share on: