MDN may have intermittent access issues April 18 13:00 - April 19 01:00 UTC. See whistlepig.mozilla.org for all notifications.

mozilla
Your Search Results

    Array.prototype.forEach()

    Summary

    The forEach() method executes a provided function once per array element.

    Syntax

    arr.forEach(callback[, thisArg])

    Parameters

    callback
    Function that produces an element of the new Array, taking three arguments:
    currentValue
    The current element being processed in the array.
    index
    The index of the current element being processed in the array.
    array
    The array forEach() was called upon.
    thisArg
    Optional. Value to use as this when executing callback.

    Description

    forEach() executes the provided callback once for each element present in the array in ascending order. It is not invoked for indexes that have been deleted or are undefined because no value was provided for them when the array was initialized. However, it is executed for elements that are present and have the value undefined.

    callback is invoked with three arguments:

    • the element value
    • the element index
    • the array being traversed

    If a thisArg parameter is provided to forEach(), it will be passed to callback when invoked, for use as its this value.  Otherwise, the value undefined will be passed for use as its this value. The this value ultimately observable by callback is determined according to the usual rules for determining the this seen by a function.

    The range of elements processed by forEach() is set before the first invocation of callback. Elements that are appended to the array after the call to forEach() begins will not be visited by callback. If the values of existing elements of the array are changed, the value passed to callback will be the value at the time forEach() visits them; elements that are deleted before being visited are not visited.

    Note: There is no way to stop or break a forEach() loop. The solution is to use Array.prototype.every() or Array.prototype.some(). See example below.

    forEach() executes the callback function once for each array element; unlike every() and some(), it always returns the value undefined.

    Examples

    Example: Printing the contents of an array

    The following code logs a line for each element in an array:

    function logArrayElements(element, index, array) {
      console.log('a[' + index + '] = ' + element);
    }
    
    // Note elision, there is no member at 2 so it isn't visited
    [2, 5, , 9].forEach(logArrayElements);
    // logs:
    // a[0] = 2
    // a[1] = 5
    // a[3] = 9
    

    Example: Breaking a loop

    The following code uses Array.prototype.every() to log the content of an array and stop when it reaches a value higher than the given THRESHOLD.

    var THRESHOLD = 12;
    var v = [5, 2, 16, 4, 3, 18, 20];
    var res;
    
    res = v.every(function(element, index, array) {
      console.log('element:', element);
      if (element >= THRESHOLD) {
        return false;
      }
    
      return true;
    });
    console.log('res:', res);
    // logs:
    // element: 5
    // element: 2
    // element: 16
    // res: false
    
    res = v.some(function(element, index, array) {
      console.log('element:', element);
      if (element >= THRESHOLD) {
        return true;
      }
    
      return false;
    });
    console.log('res:', res);
    // logs:
    // element: 5
    // element: 2
    // element: 16
    // res: true
    

    Example: An object copy function

    The following code creates a copy of a given object. There are different ways to create a copy of an object, the following is just one way and is presented to explain how Array.prototype.forEach() works by using ECMAScript 5 Object.* meta property functions.

    function copy(o) {
      var copy = Object.create(Object.getPrototypeOf(o));
      var propNames = Object.getOwnPropertyNames(o);
    
      propNames.forEach(function(name) {
        var desc = Object.getOwnPropertyDescriptor(o, name);
        Object.defineProperty(copy, name, desc);
      });
    
      return copy;
    }
    
    var o1 = { a: 1, b: 2 };
    var o2 = copy(o1); // o2 looks like o1 now
    

    Polyfill

    forEach() was added to the ECMA-262 standard in the 5th edition; as such it may not be present in other implementations of the standard. You can work around this by inserting the following code at the beginning of your scripts, allowing use of forEach() in implementations that don't natively support it. This algorithm is exactly the one specified in ECMA-262, 5th edition, assuming Object and TypeError have their original values and that callback.call evaluates to the original value of Function.prototype.call().

    // Production steps of ECMA-262, Edition 5, 15.4.4.18
    // Reference: http://es5.github.io/#x15.4.4.18
    if (!Array.prototype.forEach) {
    
      Array.prototype.forEach = function(callback, thisArg) {
    
        var T, k;
    
        if (this == null) {
          throw new TypeError(' this is null or not defined');
        }
    
        // 1. Let O be the result of calling ToObject passing the |this| value as the argument.
        var O = Object(this);
    
        // 2. Let lenValue be the result of calling the Get internal method of O with the argument "length".
        // 3. Let len be ToUint32(lenValue).
        var len = O.length >>> 0;
    
        // 4. If IsCallable(callback) is false, throw a TypeError exception.
        // See: http://es5.github.com/#x9.11
        if (typeof callback !== "function") {
          throw new TypeError(callback + ' is not a function');
        }
    
        // 5. If thisArg was supplied, let T be thisArg; else let T be undefined.
        if (arguments.length > 1) {
          T = thisArg;
        }
    
        // 6. Let k be 0
        k = 0;
    
        // 7. Repeat, while k < len
        while (k < len) {
    
          var kValue;
    
          // a. Let Pk be ToString(k).
          //   This is implicit for LHS operands of the in operator
          // b. Let kPresent be the result of calling the HasProperty internal method of O with argument Pk.
          //   This step can be combined with c
          // c. If kPresent is true, then
          if (k in O) {
    
            // i. Let kValue be the result of calling the Get internal method of O with argument Pk.
            kValue = O[k];
    
            // ii. Call the Call internal method of callback with T as the this value and
            // argument list containing kValue, k, and O.
            callback.call(T, kValue, k, O);
          }
          // d. Increase k by 1.
          k++;
        }
        // 8. return undefined
      };
    }
    

    Specifications

    Specification Status Comment
    ECMAScript 5.1 (ECMA-262)
    The definition of 'Array.prototype.forEach' in that specification.
    Standard Initial definition. Implemented in JavaScript 1.6.
    ECMAScript 6 (ECMA-262)
    The definition of 'Array.prototype.forEach' in that specification.
    Release Candidate  

    Browser compatibility

    Feature Chrome Firefox (Gecko) Internet Explorer Opera Safari
    Basic support (Yes) 1.5 (1.8) 9 (Yes) (Yes)
    Feature Android Chrome for Android Firefox Mobile (Gecko) IE Mobile Opera Mobile Safari Mobile
    Basic support (Yes) (Yes) 1.0 (1.8) (Yes) (Yes) (Yes)

    See also

    Hide Sidebar