fervor [>]CODING & CURIOSITY
FERVOR LEARNING SYSTEMTUTORIALS
← JavaScript

JavaScript / 3 MIN READ

forEach()

Iterate through arrays with forEach

From the original Fervor library. Examples may use older package versions.

The forEach Method in JavaScript

In this tutorial, we’ll explore the forEach method in JavaScript, which is used to iterate over arrays and perform a function on each element in the array. We’ll cover the basic syntax of using the forEach method and provide examples to demonstrate its usage. Let’s get started!

Introduction to forEach

The forEach method is a powerful tool for iterating over each element in an array and applying a specified function to it. This can be particularly useful when you need to perform an action on every item in the array.

Basic Syntax

The basic syntax of the forEach method is as follows:

array.forEach(function(currentValue, index, array) {
    // Code to execute on each element
});

In this syntax:

  • array is the array you want to iterate over.
  • The forEach method takes a function as an argument, which will be executed for each element in the array.
  • The function takes three arguments:
    • currentValue: The value of the current element in the array.
    • index: The index of the current element in the array.
    • array: The array that forEach was called on.

Using forEach to Iterate Over an Array

Let’s start with an example of using the forEach method to loop over an array of numbers:

const numbers = [1, 2, 3, 4, 5];

numbers.forEach(function(number) {
    console.log(number);
});

In this example, we use the forEach method to iterate over the numbers array and log each number to the console. The function we pass to forEach takes one argument, number, which represents the current element in the array.

You can also use arrow function syntax with forEach:

const numbers = [1, 2, 3, 4, 5];

numbers.forEach(number => {
    console.log(number);
});

This code achieves the same result using an arrow function.

Bonus: Using Ternary Condition in forEach

Let’s explore a bonus scenario using the forEach method with a ternary operator. Suppose we have an array of numbers and we want to calculate the sum of all even numbers:

const numbers = [1, 2, 3, 4, 5];
let sum = 0;

numbers.forEach(number => number % 2 === 0 ? sum += number : null);

console.log(sum);

In this example, we initialize the sum variable to 0 and use the forEach method to iterate through the numbers array. The callback function uses a ternary operator to check if the current number is even. If it is, the number is added to the sum variable. If it’s odd, the ternary operator returns null.

Conclusion

The forEach method is a handy tool for looping through arrays and applying a function to each element. It simplifies the process of iterating over array items and performing operations on them. Whether you’re using a regular function or an arrow function, the forEach method provides a clear and concise way to work with arrays.

Experiment with different scenarios to become more comfortable with the forEach method and its capabilities!

Additional Resources


Feel free to explore more applications of the forEach method and incorporate it into your coding projects. Happy coding!

Home

Keep your curiosity going.Explore more JavaScript →
287 TUTORIALS · 22 TOPICSREADY