What's the usual thing you do with an array? Iterate through its items! This is where forEach() array method can be helpful.
This post describes how to use forEach() array method to iterate items of an array in JavaScript. Plus, you'll will read about forEach() best practices like correct handling of this and how to iterate array-like objects.
Are you tired of cherry-picking information about JavaScript? There's an easier way.
Take "Modern JavaScript From The Beginning 2.0" course by Brad Traversy to become proficient in JavaScript in just a few weeks. Use the coupon code DMITRI and get your 20% discount!
1. Basic forEach example
array.forEach()method iterates over the array items, in ascending order, without mutating the array.
The first argument of forEach() is the callback function called for every item in the array. The second argument (optional) is the value of this set in the callback.
array.forEach(callback [, thisArgument])
Let's see how forEach() works in practice.
colors array has 3 items. Let's use forEach() to log to console each color:
const colors = ['blue', 'green', 'white'];function iterate(item) { console.log(item);}colors.forEach(iterate);// logs "blue"// logs "green"// logs "white"
iterate is the callback function. colors.forEach(iterate) executes iterate function for each item in colors.
3 invocation of iterate() function are perfomed:
iterate('blue')iterate('green')iterate('white')
That's how, in a few words, forEach() method works.
2. Index of the iterated element
array.forEach(callback)executes thecallbackfunction with 3 arguments: the current iterated item, the index of the iterated item and the array instance itself.
array.forEach(callback(item [, index [, array]]))
Let's access the index of each item in the colors array:
const colors = ['blue', 'green', 'white'];function iterate(item, index) { console.log(`${item} has index ${index}`);}colors.forEach(iterate);// logs "blue has index 0"// logs "green has index 1"// logs "white has index 2"
iterate() is called with the iterated item and the index arguments. The callback is executed 3 times:
iterate('blue', 0)iterate('green', 1)iterate('white', 2)
3. Access the array inside the callback
To access the array itself during the iteration, you can use the 3rd parameter inside the callback function.
Let's log the message The last iteration! when JavaScript executes the last iteration on the array items.
const colors = ['blue', 'green', 'white'];function iterate(item, index, array) { console.log(item); if (index === array.length - 1) { console.log('The last iteration!'); }}colors.forEach(iterate);// logs "blue"// logs "green"// logs "white"// logs "The last iteration!"
The 3rd parameter array inside the callback function is the array on which forEach() method was called on.
4. this inside the callback
Let's run the following example in a browser, and pay attention to the value of this:
const letters = ['a', 'b', 'c'];function iterate(letter) { console.log(this === window); // true}letters.forEach(iterate); // logs 3 times "true"
this inside iterate() equals to window, which is the global object in the browser environment. Follow regular function invocation to get more information.
In some situations, you might need to set this to an object of interest. Just indicate this object as the second argument:
array.forEach(callback, thisArgument)
Let's implement a Unique class, which always holds an unique list of items:
class Unique { constructor(items) { this.items = items; } append(newItems) { newItems.forEach(function(newItem) { if (!this.items.includes(newItem)) { this.items.push(newItem); } }, this); }}const uniqueColors = new Unique(['blue']);console.log(uniqueColors.items); // => ['blue']uniqueColors.append(['red', 'blue']);console.log(uniqueColors.items); // => ['blue', 'red']
newItems.forEach(function() {}, this) is called with the second argument pointing to this, i.e. the instance of Unique class.
Inside the callback of forEach(), this points also to an instance of Unique. Now it's safe to access this.items.
For the above example using an arrow function as the callback of forEach() would be better (check the demo). The arrow function preserves the value of this from the lexical scope, so there's no need to use the second argument on forEach().
5. forEach skips empty slots
forEach() skips the empty slots of the array (named sparse array).
const sparseArray = [1, , 3];sparseArray.length; // => 3sparseArray.forEach(function(item) { console.log(item);}); // logs 1, 3
sparseArray contains 1, an empty slot, and 3. forEach() iterates over 1 and 3, but skips the empty slot.
6. Iterate array-like objects using forEach
forEach() can iterate over array-like objects using an indirect call:
const arrayLikeColors = { "0": "blue", "1": "green", "2": "white", "length": 3};function iterate(item) { console.log(item);}Array.prototype.forEach.call(arrayLikeColors, iterate);// logs "blue"// logs "green"// logs "white"
arrayLikeColors is an array-like object. To iterate over its items, you have to call forEach() indirectly: Array.prototype.forEach.call(...).
Alternatively, you can transform the array-like object into an array using Array.from(), then iterate:
const arrayLikeColors = { "0": "blue", "1": "green", "2": "white", "length": 3};function iterate(item) { console.log(item);}Array.from(arrayLikeColors).forEach(iterate);// logs "blue"// logs "green"// logs "white"
7. When to use forEach()
forEach() fits to iterate array items, without breaking, and having simultaneously some side-effect.
Side-effects examples are a mutation of an outer scope variable, I/O operations (HTTP requests), DOM manipulations, logging to console ,and alike.
For example, let's select all input elements from the DOM and use forEach() to clear them:
const inputs = document.querySelectorAll('input[type="text"]');inputs.forEach(function(input) { input.value = '';});
The side effect in the callback function is clearing the value of the input field.
Keep in mind that you cannot normally break the iteration of forEach() (other than a tricky way to throw an error to stop the iteration, which is a cheap hack). The method normally iterates over all the items.
If your case requires an early break from the cycle, a better option is the classic for or for..of.
When the array iteration computes a result, without side-effects, a better alternative is to select an array method like:
For example, let's determine if all numbers of an array are even.
The first solution involves forEach() method:
let allEven = true;const numbers = [22, 3, 4, 10];numbers.forEach(function(number) { if (number % 2 === 1) { allEven = false; // Break here }});console.log(allEven); // => false
The code determines correctly if all numbers are even: since the array contains 3, the variable allEvent is false. The problem is the impossibility to break after finding the first odd number 3.
For this situation, a better alternative is array.every() method:
const numbers = [22, 3, 4, 10];const allEven = numbers.every(function(number) { return number % 2 === 0;});console.log(allEven); // => false
array.every() makes the code shorter. Also .every() method breaks iterating after finding the first odd number — so the code skips unnecessary steps.
8. Conclusion
array.forEach(callback) method is a good way to iterate over all array items. Its first argument is the callback function, which is invoked for each item in the array with 3 arguments: item, index, and the array itself.
forEach() is useful to iterate over all array items, without breaking, involving simultaneously some side-effects. Otherwise, consider an alternative array method.
Have questions on how array.forEach() works? Write a comment and let's discuss!
