DEV Community

Adhi sankar
Adhi sankar

Posted on

Understanding the `forEach()` Method in JavaScript

#javascript #webdev #beginners #tutorial

Introduction

The forEach() method is one of the most commonly used array methods in JavaScript. It allows you to iterate through each element of an array and perform a specific action. Unlike traditional for loops, forEach() makes the code cleaner, shorter, and easier to read.

It is mainly used when you want to perform an operation on every element of an array without creating a new array.

What is the forEach() Method?

The forEach() method executes a callback function once for each element in an array.

In simple words:

forEach() loops through every element of an array and executes a function for each item.

Syntax 

array.forEach(function(element, index, array) {
    // Code to execute
});
Enter fullscreen mode Exit fullscreen mode

Parameters

  • element – The current element being processed.
  • index (optional) – The index of the current element.
  • array (optional) – The array being traversed.

Example 1: Print Array Elements 

const fruits = ["Apple", "Banana", "Orange"];

fruits.forEach(function(fruit) {
    console.log(fruit);
});
Enter fullscreen mode Exit fullscreen mode

Output 

Apple
Banana
Orange
Enter fullscreen mode Exit fullscreen mode

Explanation

  • forEach() visits each element one by one.
  • The callback function receives the current fruit.
  • console.log() prints each fruit.

Example 2: Using Index 

const colors = ["Red", "Green", "Blue"];

colors.forEach(function(color, index) {
    console.log(index + " : " + color);
});
Enter fullscreen mode Exit fullscreen mode

Output 

0 : Red
1 : Green
2 : Blue
Enter fullscreen mode Exit fullscreen mode

Example 3: Using Arrow Function 

const numbers = [10, 20, 30];

numbers.forEach(number => {
    console.log(number);
});
Enter fullscreen mode Exit fullscreen mode

Output 

10
20
30
Enter fullscreen mode Exit fullscreen mode

Arrow functions make the code shorter and easier to read.

Real-Life Example

Imagine a teacher has a list of students.

Rahul
Priya
Arun
Sneha
Enter fullscreen mode Exit fullscreen mode

The teacher calls each student's name one by one.

Similarly, forEach() goes through every element in an array and performs the same action for each item.

Where is forEach() Used?

The forEach() method is commonly used for:

  • Displaying data
  • Printing array values
  • Updating HTML elements
  • Performing calculations
  • Processing API response data

Difference Between forEach() and map()

forEach() map()
Executes a function for each element Creates and returns a new array
Does not return a new array Returns a new array
Used for performing actions Used for transforming data

Example 

const nums = [1, 2, 3];

nums.forEach(num => console.log(num * 2));
Enter fullscreen mode Exit fullscreen mode

Output:

2
4
6
Enter fullscreen mode Exit fullscreen mode 
const doubled = nums.map(num => num * 2);

console.log(doubled);
Enter fullscreen mode Exit fullscreen mode

Output:

[2, 4, 6]
Enter fullscreen mode Exit fullscreen mode

Advantages

  • Easy to understand and use.
  • Makes code cleaner than a traditional for loop.
  • Automatically iterates through all elements.
  • Reduces the chances of loop-related errors.
  • Works well with callback functions.

Limitations

  • Cannot use break or continue to stop the loop.
  • Does not return a new array.
  • Not suitable when you need to transform array data (use map() instead).

Conclusion

The forEach() method is a simple and powerful way to iterate through arrays in JavaScript. It executes a callback function for every element in the array, making the code more readable and maintainable. It is best used when you want to perform an action on each array element without creating a new array.

Top comments (0)