Five Ways to Iterate Through Arrays in JavaScript
Greetings, friends! In this tutorial, I will show you five ways of iterating through an array. The first three are definitely the most common and the best ways to iterate through an array. The last two ways are for special use cases, but I wanted to mention them in case you're curious.
1. Using for Loops
We can use a normal for loop statement to iterate through the entire length of an array. Since arrays are "zero indexed" in JavaScript, we start with zero and stop when we reach the length of the array.
const array = ['pizza', 'donut', 'potato'];
for (let i = 0; i < array.length; i++) {
console.log(array[i]);
}
/* OUTPUT:
pizza
donut
potato
*/
2. Using Array.forEach
The Array.forEach method was implemented in the ECMAScript 2015 (or ES6) specification of the JavaScript language. This method can be used on any array and lets us iterate through each element, performing an operation with that element as we iterate through the entire array.
const array = ['pizza', 'donut', 'potato'];
array.forEach(element => {
console.log(element);
});
/* OUTPUT:
pizza
donut
potato
*/
3. Using for...of Loops
The for...of loop was added in the ECMAScript 2015 (or ES6) standard as well. This type of loop lets us iterate through what are known as iterables using an iterator. By default, arrays have iterators that will step through each element of the array.
const array = ['pizza', 'donut', 'potato'];
for (const element of array) {
console.log(element);
}
/* OUTPUT:
pizza
donut
potato
*/
4. Using for...in Loops
The for...in loop lets us iterate through properties of an object that are considered "enumerable." By default, the indices of an array are considered enumerable properties, so the for...in loop works on them. However, as mentioned in my tutorial on for...in versus for...of loops, it's generally not a good idea to use for...in loops with arrays. It's better to use one of the above three ways of iterating through an array instead.
const array = ['pizza', 'donut', 'potato'];
for (const i in array) {
console.log(array[i]);
}
/* OUTPUT:
pizza
donut
potato
*/
5. Using Generators and yield*
The final way of iterating through an array is through the use of generators. Generators let us lazily iterate through an object considered iterable by calling the next method. Since arrays are a type of iterable, we can use the yield* expression to delegate (or forward) our generator to an array. This way of iterating through an array is useful if you want to simply step through elements of an array one by one.
const array = ['pizza', 'donut', 'potato'];
function *delegateToArray(array) {
yield* array;
}
// Create a new generator that points to an array
const g = delegateToArray(array);
console.log(g.next().value);
console.log(g.next().value);
console.log(g.next().value);
/* OUTPUT:
pizza
donut
potato
*/
Conclusion
In this tutorial, we have seen five different ways of iterating through an array. The first three ways are the most commonly used ways, and the last two are meant for special use cases. JavaScript is a very flexible language and offers multiple tools to get the job done.