6.9 Iterating an Array

Earlier, in the section about control flow, you discovered the different loops available in JavaScript. In this section, you learn that if you want to iterate over an array, you can use the for...of loop. By writing for (let number of numbers), each iteration sets number to one of the elements of the array. Logging it to the console then prints 1, 2 and 3 in order.

Iterating with forEach

There is another way to walk through an array that you will often see in online tutorials: the forEach method. Every array exposes this method, and it accepts a callback function. We pass a function that takes a parameter — here called number — and inside the body we log that number to the console. When forEach runs, this callback is executed for every element of the array, each element being passed as an argument. After saving, the console again displays 1, 2 and 3.
  • for...of gives you the value of each element.
  • forEach calls a callback for each element and can also expose the index.
As shown previously, we can use arrow function syntax to simplify the callback. We remove the function keyword, place an arrow between the parameters and the body, drop the parentheses since there is only one parameter, and remove the trailing semicolon because the statement is not inside a block. The end result is much more concise. There is really no significant difference between these two ways of iterating an array. 
numbers.forEach(number => console.log(number));
The one thing worth knowing is that the callback passed to forEach can optionally take a second parameter: the index. By writing (number, index), we can log each element together with its position in the array. The for...of loop does not give you the index directly; if you need it, you can use the for...in loop instead. That wraps up this video about iterating an array in JavaScript — see you in the next one.

Summary

This lesson covers multiple approaches to iterating over arrays in JavaScript, including the for...of loop and the forEach method. You'll learn how to use arrow functions to simplify callback syntax and how to access both array values and their indices during iteration.

Key points

  • Use the for...of loop to directly iterate through array elements
  • The forEach method provides an alternative that executes a callback function for each element
  • Arrow functions can simplify forEach callback syntax by removing brackets and parentheses
  • The forEach callback can receive both the element value and its index as parameters
  • The for...in loop is less preferred for arrays compared to for...of

FAQ

What's the difference between for...of and forEach in JavaScript?

for...of is a loop statement that directly iterates over array values, while forEach is a method that executes a callback function for each element. Arrow functions can make forEach syntax more concise and readable.

How do I access the array index when using forEach?

Add a second parameter to the forEach callback function to receive the index. For example: array.forEach((element, index) => console.log(index, element)).

Should I use for...in to iterate over arrays?

for...in can technically iterate arrays but is less preferred; use for...of or forEach instead for cleaner, more predictable behavior specifically designed for array iteration.