javascript
  1. javascript-foreach
PreviousNext

JavaScript forEach()

The JavaScript forEach() method is used to execute a function on each element in an array. It is one of the simplest ways to loop through an array and process each element with a custom function. The forEach() method is available in all browsers and can be used in both ES6 (ECMAScript 2015) and earlier versions of JavaScript.

Syntax

The syntax for forEach() is as follows:

array.forEach(function(currentValue, index, array) {
  // code to be executed
}, thisArg);
  • currentValue - The value of the current element being processed in the array
  • index (optional) - The index of the current element being processed in the array
  • array (optional) - The array forEach() was called upon
  • thisArg (optional) - Object to use as this when executing the callback function

Example

Let's look at an example of using forEach() to loop through an array of numbers and print each element to the console.

let numbers = [1, 2, 3, 4, 5];
numbers.forEach(function(number) {
  console.log(number);
});

The output will be:

1
2
3
4
5


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Array forEach Example</title>
</head>
<body>

<!-- Placeholder for displaying the output -->
<p id="output"></p>

<script>
    // Array
    let numbers = [1, 2, 3, 4, 5];

    // Iterate through array elements using forEach and display in HTML
    numbers.forEach(function(number) {
        document.getElementById("output").innerHTML += number + "<br>";
    });
</script>

</body>
</html>
Try Playground

Output

TheforEach()` method does not return anything. It simply processes each element in the array according to the function provided.

Explanation

The forEach() method executes a provided function once for each array element. It takes an anonymous function as an argument which receives three parameters:

  • currentValue: the current element being processed in the array
  • index (optional): the index of the current element being processed in the array
  • array (optional): the array forEach() was called upon

You can use any of these parameters inside the anonymous function to perform operations on the array elements.

Use

The forEach method is best used when you need to perform some operation on each element in the array, such as printing to the console or updating a variable. It is faster and simpler than using a for` loop and can make your code more concise and readable.

Important Points

The following are some important points to remember when using the forEach() method:

  • Execution cannot be stopped halfway. You cannot use a break or return statement inside the anonymous function to terminate the loop.
  • forEach() does not copy the array you pass to it. Therefore, any modifications you make to the array inside the function will affect the original array.
  • If you need to support Internet Explorer or other older browsers, you may need to use a polyfill or a similar method such as a for loop.

Summary

The forEach() method is a powerful and convenient way to loop through an array of elements and apply a custom function to each element. It is easy to use, efficient, and can make your code more expressive and readable. By understanding how to use forEach(), you can write more efficient and expressive code in your JavaScript projects.

splice()map()
Published on: