Looping through an array of data is an inevitable yet common task when it comes to building web apps, and every developer goes through it at least once in their code. In this article, I’m sharing with you some ways one can loop through an array, with examples that can be applied in any code using JavaScript only.
Prerequisites
This article does not require any coding, but if you are interested in following along with the examples, you can either use the Node.js REPL or browser developer tools.
Loop methods
1. For loop
This is the classic way to loop over an array, it’s an old method yet still widely used. The method creates a loop with three optional expressions. The first expression sets a counter variable declared with var or let keywords "usually referred to as i" to 0, it represents the index of each array item.
The counter variable is optional, and there can be more than one counter variable in one loop.
let i = 0;
The second expression represents a test that checks out before every iteration of the loop, it defines the conditions for the loop to run, and the counter variable must always be less than the number of items in the array. If the condition is met, it will be set to true and the loop will start over again. If it’s not met, then the condition will be set to false and the loop will end.
This expression is optional and can be omitted. If it’s omitted, all the conditions would be set to true.
i < array.length;
The third expression increments the value of the counter variable i, it can also be used to decrement the value of the counter variable.
i++ || i--
Example
I created an array with different drinks and looped over it using the for-loop method.
let drinks = ["soda", "water", "juice", "tea"];
for (let i = 0; i < drinks.length; i++) {
console.log(i); // index
console.log(drinks[i]); // value
}
//output: 0, soda, 1, water, 2, juice, 3, tea
2. While loop
Looping through an array using the while loop is almost identical to using the for-loop.
The while loop also uses a counter variable set to 0 and while that variable is less than the array’s length, the counter variable will increment using the i++ while also looping through our drinks array just as shown below.
let drinks = ["soda", "water", "juice", "tea"];
let i = 0; //counter variable
while (i < drinks.length) {
console.log(drinks[i]);
i++; //increment to loop over the array
}
//output: "soda", "water", "juice", "tea"
3. Do while loop
The do-while loop takes a slightly different approach than the while loop. This loop will console log the drinks while the counter variable is less than the drinks array length, this loop runs once only until it checks that the condition is true, then it will keep on running as long as it’s true.
let drinks = ["soda", "water", "juice", "tea"];
let i = 0; //counter variable
do {
console.log(drinks[i]);
i++;
} while (i < drinks.length);
//output: "soda", "water", "juice", "tea"
4. ForEach()
forEach() is a new array method that was introduced with the new ES6 features, this method is used to easily loop through arrays.
The forEach array method calls a function for each element in the array, but it doesn’t work if the array is empty.
Example
The code below runs a function for each item in the array, I used item as a parameter, but you can use anything else, it will output the same results.
let drinks = ["soda", "water", "juice", "tea"];
drinks.forEach(item=> console.log(item));
//output: "soda", "water", "juice", "tea"
5. map()
map() array method uses a callback function and returns a new array with the wanted results, in our case, we’re looking to loop through the drinks array.
let drinks = ["soda", "water", "juice", "tea"];
drinks.map(item=> console.log(item));
//output: "soda", "water", "juice", "tea"
The difference between the map and for Each method:
The map method is almost identical to the forEach method, as it runs a function for each element in the array. The difference is that the map method returns a new array and the forEach method returns an undefined value.
Example
Below, I looped through an array of numbers between 1 and 5 and squared each number of the array using the map() method in one solution and the forEach() method in the second one.
let n= [1, 2, 3, 4, 5];
let squareN = n.map((num) => num * num)
console.log(n);
console.log(squareN);
// n: [1,2,3,4,5]
// suqareN: [1,4,9,16,25]
The n array remains unchanged, and the map() array returned a new array with the wanted results.
let n= [1, 2, 3, 4, 5];
let squareN = n.forEach((num) => num * num)
console.log(n);
console.log(squareN);
// n: [1,4,9,16,25]
// 1
// 4
// 9
// 16
// 25
// undefined**
When using the forEach method, the function looped through all the elements and returned the wanted results, but unlike returning a new array like map() it returns undefined.
Conclusion
Looping through an array is a must-know skill for both JavaScript and React, I found that react requires a lot of looping through arrays, which made me go back and learn more about this basic yet important concept.
If you are just starting out with JavaScript, and you'd like to learn more, I recommend you check their docs. it’s more detailed and a great reference to have!
Also, feel free to message me on Twitter if you have any suggestions or feedback! DMs are always open for everyone!