[ Web Proxy ]
URL:
Viewing: https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Array/forEach [Back]  [Original]

Array.prototype.forEach() - JavaScript | MDN

MDN Web Docs

View in English Always switch to English

Array.prototype.forEach()

Baseline

20157

forEach()

const array = ["a", "b", "c"];

array.forEach((element) => console.log(element));

// : "a"
// : "b"
// : "c"

js
forEach(callbackFn)
forEach(callbackFn, thisArg)

callbackFn

element

index

array

forEach()

thisArg

callbackFn this

(undefined)

forEach() callbackFn map() forEach() undefined

callbackFn

forEach() this length

forEach() forEach()

for, for...of, for...in every(), some(), find(), findIndex()

forEach() forEach

js
const ratings = [5, 4, 5];
let sum = 0;

const sumFunction = async (a, b) => a + b;

ratings.forEach(async (rating) => {
  sum = await sumFunction(sum, rating);
});

console.log(sum);
// : 14
// : 0

for forEach

js
const items = ["item1", "item2", "item3"];
const copyItems = [];

// before
for (let i = 0; i < items.length; i++) {
  copyItems.push(items[i]);
}

// after
items.forEach((item) => {
  copyItems.push(item);
});

: console.table()

forEach()

1

js
const logArrayElements = (element, index /*, array */) => {
  console.log(`a[${index}] = ${element}`);
};

//  2 
// 
[2, 5, , 9].forEach(logArrayElements);
// :
// a[0] = 2
// a[1] = 5
// a[3] = 9

thisArg

js
class Counter {
  constructor() {
    this.sum = 0;
    this.count = 0;
  }
  add(array) {
    // Only function expressions have their own this bindings.
    array.forEach(function countEntry(entry) {
      this.sum += entry;
      ++this.count;
    }, this);
  }
}

const obj = new Counter();
obj.add([2, 5, 9]);
console.log(obj.count); // 3
console.log(obj.sum); // 16

thisArg (this) forEach() callbackFn this

: thisArg this

Array.prototype.forEach() Object.*

js
const copy = (obj) => {
  const copy = Object.create(Object.getPrototypeOf(obj));
  const propNames = Object.getOwnPropertyNames(obj);
  propNames.forEach((name) => {
    const desc = Object.getOwnPropertyDescriptor(obj, name);
    Object.defineProperty(copy, name, desc);
  });
  return copy;
};

const obj1 = { a: 1, b: 2 };
const obj2 = copy(obj1); // obj2 looks like obj1 now

Array.prototype.flat()

js
const flatten = (arr) => {
  const result = [];
  arr.forEach((item) => {
    if (Array.isArray(item)) {
      result.push(...flatten(item));
    } else {
      result.push(item);
    }
  });
  return result;
};

// 
const nested = [1, 2, 3, [4, 5, [6, 7], 8, 9]];
console.log(flatten(nested)); // [1, 2, 3, 4, 5, 6, 7, 8, 9]

callbackFn 3

array filter() forEach()

js
const numbers = [3, -1, 1, 4, 1, 5];
numbers
  .filter((num) => num > 0)
  .forEach((num, idx, arr) => {
    // arr 
    // 
    console.log(arr[idx - 1], num, arr[idx + 1]);
  });
// undefined 3 1
// 3 1 4
// 1 4 1
// 4 1 5
// 1 5 undefined

forEach()

js
const arraySparse = [1, 3, /*  */, 7];
let numCallbackRuns = 0;

arraySparse.forEach((element) => {
  console.log({ element });
  numCallbackRuns++;
});

console.log({ numCallbackRuns });

// { element: 1 }
// { element: 3 }
// { element: 7 }
// { numCallbackRuns: 3 }

3 7

forEach()

forEach() this length length

js
const arrayLike = {
  length: 3,
  0: 2,
  1: 3,
  2: 4,
  3: 5, // length  3  forEach() 
};
Array.prototype.forEach.call(arrayLike, (x) => console.log(x));
// 2
// 3
// 4

ECMAScript 2027 LanguageSpecification
# sec-array.prototype.foreach


Web Proxy Viewer  |  New URL  |  Original Page