ES5 introduced an array function called forEach that specializes in looping through arrays. It makes the use of a loop index counter optional. It also invokes a callback function to do its work. (You’ll see how callback functions work ahead.) That means you can reuse the same code to transform other arrays if you need to. Here’s how to use forEach to display the names of four planets:
let planets = ["jupiter", "venus", "saturn", "mars"];
planets.forEach(displayElements);
function displayElements(element) {
console.log(element);
}The result of this is exactly the same as our first example: the console displays each of the planet names in order.
You can see that forEach’s argument is the function called displayElements:
planets.forEach(displayElements);This means that the array should send each of its four elements to the displayElements function, one at a time. displayElements is what’s known as a callback function. It’s a function that’s being “called back” by another function to do some extra work. It’s as if forEach is saying, “Hey! displayElements, come and help me display these planet names!”
The displayElements function has one parameter, which represents the current element that it’s processing:
function displayElements(element) {
console.log(element);
}he first time the loop runs, the value of element will be jupiter. The second time, it will be venus, and so on.
The loop will run as many times as there are elements in the array. You don’t need a loop counter variable, like i, to keep track of it.
The other advantage is that you can reuse the displayElements function with another array if you want to. Here’s how to use it to display the contents of a second array, called mountains:
let planets = ["jupiter", "venus", "saturn", "mars"];
let mountains = ["everest", "k2", "kanchanjunga", "lhotse"];
planets.forEach(displayElements);
mountains.forEach(displayElements);
function displayElements(element) {
console.log(element);
}This will now display all the planets and all the mountains. We only need to write the displayElements function once, and it works perfectly with both arrays.
What about the index counter variable, our dear old friend, i? We can access it by using a second, optional parameter in the callback function. Here’s how:
let planets = ["jupiter", "venus", "saturn", "mars"];
planets.forEach(displayElements);
function displayElements(element, i) {
console.log(i + ": " + element);
}Here’s the result:
0: jupiter
1: venus
2: saturn
3: marsforEach and the other array methods we’ll look at ahead also let you use a third optional parameter in the callback function. It’s a reference to the array itself. Here’s an example:
function displayElements (element, i, array) {
console.log(array.toString());
}This will display the calling array, which in this example would be:
jupiter, venus, saturn, mars In most cases you’ll probably only need to use a loop once, and not need to separate the forEach method from the callback function. In that case, you can use forEach with an anonymous callback function, like this:
let planets = ["jupiter", "venus", "saturn", "mars"];
planets.forEach((planet) => {
console.log(planet);
});It’s anonymous because the arrow function that does the work doesn’t have a name. Applying what you’ve just learned about formatting Java ES6 functions, you can write the whole thing very succinctly and readably as follows:
planets.forEach(planet => console.log(planet));This simple format will replace most of your for loops when you’re working with arrays.
