How to Use .forEach() to Iterate Over Elements in JavaScript

1. Use .forEach() to Execute a Function for Every Element in an Array in JavaScript
2. Perform Checks on Every Element to Break Execution if Certain Conditions Are Not Met in JavaScript

Iteration is one of the most powerful tools in every coder’s arsenal, which is why most languages have a variety of methods associated with different kinds of logic loops.

JavaScript has a variety of such methods, depending on what you are trying to achieve. In this case, the .forEach() method is a bit more potent than a simple for loop, mainly because it allows you to execute a specific function for every element you iterate over.

Granted, you can also use a regular loop to achieve the same thing if you nest the desired function call inside the loop somewhere, but .forEach() simplifies the code quite a bit. In addition, it may also be a bit easier to maintain later on, and it improves readability as well.

For starters, here is how .forEach() can be used in your code:

Use .forEach() to Execute a Function for Every Element in an Array in JavaScript

The simplest way to demonstrate the usefulness of .forEach() is by seeing it in action when iterating over an array of elements.

const myArray = ['element1', 'element2', 'element3'];

myArray.forEach(element => console.log(element));

Output:

"element1"
"element2"
"element3"

The example above uses the arrow notation, but that is not the only option. The same result can be achieved using an inline callback function, as follows:

const myArray = ['element1', 'element2', 'element3'];

myArray.forEach(function(element) {
  console.log(element);
})

Output:

"element1"
"element2"
"element3"

This method is a bit more verbose, which means that it requires a bit more boiler plating. That being said, verbosity is sometimes a good thing to aim for if you are working with a team and want to make your code as straightforward as possible.

Perform Checks on Every Element to Break Execution if Certain Conditions Are Not Met in JavaScript

Some of you may have already noticed that when working with .forEach(), the associated function is always executed for every element in the array. That is not always desirable, especially if the function in question takes a lot of processing power and has a long execution time.

For those cases, it may be good to have some conditions to be met for the function to be executed. To achieve this, all you have to do is introduce an if statement and return something if the conditions evaluate to false.

Here is how that would look in action:

const myArray = ['element1', 'element2', 'element3'];

myArray.forEach(function(element) {
  if (element === 'element2') {
    return;
  } else {
    console.log(element);
  }
});

Output:

"element1"
"element3"

As you can see, the function skips the array element that meets the condition we have set. However, the iteration continues with the following elements in the array, which is the expected behavior.

This method evaluates every item in the array before executing the associated function since there may be cases where you may not want the function to be executed. By doing this, you eliminate the step of filtering the array beforehand.