Foreach In JavaScript

by|inArticles||3 min read
Master JavaScript forEach<br>
Master JavaScript forEach<br>

JavaScript is a versatile and widely-used programming language, particularly known for its role in web development. Among its many features, the forEach function stands out as a fundamental tool for iterating over arrays. This article will delve into the forEach function, providing clear examples to illustrate its usage and benefits.

The forEach method in JavaScript is an Array method that provides a simple way to iterate over array elements. It executes a provided function once for each array element, in order, and is often favored for its readability and ease of use compared to traditional for loops.


The basic syntax of the forEach function is as follows:

array.forEach(function(currentValue, index, arr), thisValue)
  • currentValue: The current element being processed in the array.
  • index (Optional): The index of the current element being processed.
  • arr (Optional): The array the forEach method was called upon.
  • thisValue (Optional): A value to use as this when executing the function.

Basic Example

To demonstrate the basic usage of forEach, consider an array of numbers:

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

numbers.forEach(function(number) {

This code will output each number in the array to the console.

Advanced Usage

The forEach function is versatile, allowing for more complex operations during iteration.

Accessing Index and Array

You can also access the index and the original array within the callback function:

let fruits = ['apple', 'banana', 'cherry'];

fruits.forEach(function(fruit, index, array) {
  console.log(`Fruit at index ${index} is ${fruit}`);

This code outputs the index and value of each array element.

Using Arrow Functions

For a more concise syntax, forEach can be used with arrow functions:

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

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

The thisValue Argument

The thisValue argument can be used to pass a context to the function:

let data = {
  numbers: [1, 2, 3],
  multiplyByTwo: function() {
    this.numbers.forEach(function(number) {
      console.log(number * 2);
    }, this);


This example multiplies each number in the numbers array by two, using the data object as the context.

Limitations and Considerations

While forEach is powerful, it has limitations:

  • It cannot be terminated or skipped (unlike a for loop or break/continue statements).
  • It does not return a value, so it's not chainable like other array methods (map, filter, etc.).

jQuery .each() Method

The .each() method in jQuery is used to iterate over the elements of a jQuery object, executing a function for each matched element. It's particularly useful when dealing with DOM elements selected by jQuery, allowing developers to manipulate these elements with ease.


The syntax for the .each() method is:

$(selector).each(function(index, element){
  // Your code here
  • index: The index position of the element in the set.
  • element: The current DOM element being processed.

Basic Usage

In a typical scenario, you might use .each() to iterate over a set of selected DOM elements:

$('div').each(function(index, element) {
  console.log(`Div number ${index} is:`, element);

This example logs each div element found in the DOM.

Differences from Native JavaScript forEach

It's important to note that jQuery's .each() and the native JavaScript forEach method, although similar in functionality, have different applications:

  • .each() is jQuery-specific and is used primarily to iterate over jQuery objects.
  • forEach is a standard JavaScript method used to iterate over arrays.

Benefits of Using jQuery .each()

  • Chaining: jQuery allows for chaining methods, making code concise and readable.
  • Context-Aware: Inside the callback function of .each(), this refers to the current element, simplifying DOM manipulations.
  • Compatibility: jQuery ensures compatibility across various browsers, abstracting away the differences in DOM APIs.


The forEach function in JavaScript is a simple yet powerful tool for iterating over arrays. It enhances code readability and efficiency, particularly when combined with arrow functions and other modern JavaScript features. While it has certain limitations, its ease of use makes it a go-to choice for many common array iteration tasks.

Thank you for reading this far! Let’s connect. You can @ me on X (@debilofant) with comments, or feel free to follow. Please like/share this article so that it reaches others as well.

© Copyright 2024 - - All rights reservedVer. 415