array.forEach()

In this lesson, you'll learn about the method in JavaScript, which is used to execute a function for each element in an array. This method provides a cleaner and more readable alternative to the traditional loop for certain use cases.

What is array.forEach method?

The method performs an action for each element in the array. While you can achieve the same result using a standard loop, offers a more concise and expressive syntax.

Let's take an example where we need to log each value in an array called to the console, along with their respective indices . Here's how we can do it using a standard loop:

let names = ['Jon', 'Jenny', 'Johnny'];

for (let i = 0; i < names.length; i++) {
    console.log(i, names[i]);
}

// Output:
// 0 'Jon'
// 1 'Jenny'
// 2 'Johnny'

In this case, we declare and initialize a variable , and the loop compares it with . If the expression evaluates to , the loop executes. After the loop body is executed, the value of increments by one.

• We can eliminate this process using the method!

Syntax

Here is the syntax of the method:

array.forEach((value, index) => {
    // ...
});

The first argument of the method is the function you want to execute for each element of the array. This can have three arguments:

• The value of the current element
• The index of the current element
• The array itself

So, we can perform the same action using in this manner:

let names = ['Jon', 'Jenny', 'Johnny'];

names.forEach((value, index) => {
    console.log(index, value);
});

Using a Named Function as a Callback

If you want to use a named function as a callback, it can be done like this:

function logArrayElement(element, index) {
    console.log(index, element);
}

names.forEach(logArrayElement);

Ensure that the order of arguments in the predefined/named function used as the callback matches the syntax requirements .

Return Value

This method returns and is not chainable, meaning you can't call another method on the array after using . Therefore, you cannot use cascading notation with .

let returnValue = names.forEach(function (value) {
    console.log(value);
});

console.log(returnValue); // undefined

Typically, this method is used to execute , such as logging all the elements in the array after performing a series of actions on the array.

How to use it

Use When:

• The callback function is to be executed on every single element of the array.
• You want to improve performance (provided the first condition is satisfied).

Don't Use When:

• You want to stop or break the loop when some condition is true. For example, if you want to log elements of but break the loop if the value of the current element is 3, you must use a standard loop.
• The callback function is asynchronous. Instead, use the standard loop.

Example

Here is a real example where can be used:

let sum = 0;
const numbers = [65, 44, 12, 4];

numbers.forEach((number) => {
    sum += number;
});

console.log(sum); // 125

The method is a powerful tool for iterating over arrays, providing a clean and expressive way to perform actions on each element.

0 Comments

Top comments

"Please login to view comments"

Join the Conversation!

Subscribing gives you access to the comments so you can share your ideas, ask questions, and connect with others.

Upgrade your account