forEach()関数の概念

forEach() 関数は、
配列を走査し、各要素に対してコールバック関数を実行するための関数です。
配列内のすべての要素に対して、指定したコールバック関数を順番に一度ずつ実行します。

forEach() 関数を使うことで、 繰り返し処理を記述することなく、コールバック関数を使って配列の要素を手軽に処理することができます。

JavaScript 
const arr = ["あ", "い", "う"];

arr.forEach(function(element) {
    console.log(element);
});
// "あ"
// "い"
// "う"

各要素の値だけでなく、インデックスや配列そのものもコールバック関数内で使用できます。たとえば、配列の要素を出力したり、特定の処理を行ったりすることが可能です。

配列を走査する方法はいくつかありますが、
forEach() 関数は、map() 関数と並んで、最も広く使われているループ処理のひとつです。forEach() と map() の違いについては、こちらを参照してください。

forEach() 関数の使い方について説明します

構文

JavaScript - 構文 
arr.forEach(function(currentValue[, index[, array]]) {
    // 実行するコード
}[, thisArg]);

arr は forEach() 関数に適用する配列です。

引数

forEach() 関数の引数
function arr 配列の各要素に適用されるコールバック関数です。
このコールバック関数は、3つの引数を持つことができます。
  • currentValue（必須）：処理対象の現在の要素。この引数を通じて現在の要素にアクセスできます。
  • index（省略可能）：処理対象の現在の要素のインデックス。この引数を使用して現在の要素のインデックスにアクセスできます。
  • array（省略可能）：forEach() 関数を呼び出した配列。この引数を使って元の配列にアクセスできます。
thisArg （省略可能）function を実行する際の this として使用するオブジェクトです。この引数は必要に応じて使用されます。

コールバック関数

第一引数であるコールバック関数（function）に関して、関数の形式別の構文は以下の通りです。

JavaScript 
// アロー関数
forEach((element) => { /* … */ })
forEach((element[, index]) => { /* … */ })
forEach((element[, index[, array]]) => { /* … */ })

// コールバック関数
forEach(callbackFn)
forEach(callbackFn[, thisArg])

// インラインコールバック関数
forEach(function (element) { /* … */ })
forEach(function (element[, index]) { /* … */ })
forEach(function (element[, index[, array]]) { /* … */ })
forEach(function (element[, index[, array]]) { /* … */ }[, thisArg])
コールバック関数の実装に関する説明

forEach() 関数は配列の各要素を順に処理し、指定された関数を呼び出します。
配列の各要素に対して関数を呼び出す際、その要素の値、インデックス、および元の配列を引数として渡します。指定された関数は配列のサイズ分だけ繰り返し実行され、配列の要素数に応じてコールバック関数の呼び出し回数が決まります。

戻り値

forEach() 関数の戻り値は常に undefined です。新しい配列は生成されません。

JavaScript 
const numbers = [1, 2, 3, 4, 5];

const result = numbers.forEach(function(number) {
    return number * 2; // コールバック関数でどんな値を返しても、forEach() の戻り値は常に undefined です。
});

console.log(result); // 出力: undefined

使用例

forEach() 関数は配列の各要素を順に処理し、それぞれの要素に対して何らかの操作を行いたい場合に適しています。
この関数は戻り値がないため、各要素を処理したり、何かの作業を実行する目的で主に使用されます。

例えば、以下のような場合に forEach() 関数を使用できます。
使用例を通して説明します。

  1. 配列の要素を出力する
  2. 配列の要素を合計する
  3. 特定の条件を満たす配列の要素を探す
  4. 配列の要素を文字列に変換して新しい配列を作成する
  5. 配列の要素の特定のプロパティを変更する
  6. 別の方法を検討すべき場合

配列の要素を出力する

JavaScript 
const numbers = [1, 2, 3, 4, 5];

numbers.forEach(function(number) {
    console.log(number);
}); // 出力: 1 2 3 4 5

配列の要素を合計する

JavaScript 
const numbers = [1, 2, 3, 4, 5];
let sum = 0;

numbers.forEach(function(number) {
    sum += number;
});

console.log(sum); // 出力: 15 (1 + 2 + 3 + 4 + 5)

特定の条件を満たす配列の要素を探す

JavaScript 
const numbers = [10, 25, 30, 45];

let foundNumber = null;

numbers.forEach(function(number) {
    if (number > 30) {
        foundNumber = number;
    }
});

console.log(foundNumber); // 出力: 45

配列の要素を文字列に変換して新しい配列を作成する

JavaScript 
const names = ['Alice', 'Bob', 'Charlie'];
const greetings = [];

names.forEach(function(name) {
    greetings.push(`Hello, ${name}!`); // 配列の末尾に値を追加する
});

console.log(greetings); // 出力: ['Hello, Alice!', 'Hello, Bob!', 'Hello, Charlie!']

コード補足説明
配列の push() メソッドは、配列の末尾に1つ以上の要素を追加（push、後ろから押し込む）するための関数です。

配列の要素の特定のプロパティを変更する

JavaScript 
const people = [
    {name: 'Alice', age: 30},
    {name: 'Bob', age: 25},
    {name: 'Charlie', age: 35}
];

people.forEach(function(person) {
    person.age += 5; // 全ての人の年齢を5歳ずつ増やす
});

console.log(people);
/* 出力:
    [
        {name: 'Alice', age: 35},
        {name: 'Bob', age: 30},
        {name: 'Charlie', age: 40}
    ]
*/

別の方法を検討すべき場合

上記の例は、forEach() 関数を活用して、配列の要素に対して様々な処理を簡単に行う方法を示しています。forEach() を使うことで、ループを自分で書かずに、簡潔に配列を順に処理し、目的の操作を実行できます。

しかし、途中でループ（巡回）を中断する必要がある場合は、for ループや while ループなどと break 文を使う方が適しています。 また、新しい配列を作成する必要がある場合は、map() 関数を使うと便利です。

途中でループ（巡回）を中断する必要がある場合
JavaScript 中断するために、for ループと break 文を使用しました。 
const numbers = [1, 2, 3, 4];
let foundNumber = null;

for (let i = 0; i < numbers.length; i++) {
    if (numbers[i] > 3) {
        foundNumber = numbers[i];
        break; // 繰り返しを中断
    }
}

console.log(foundNumber); // 出力: 4

コード補足説明
for ループは、特定の回数や範囲だけ繰り返し処理を行う文です。

コード補足説明
break 文はループ内で使用され、実行中の現在の文を即座に終了し、次のコードへ制御を移す命令です。

新しい配列を作成する必要がある場合
JavaScript 新しい配列を作成するために、map() 関数を使用しました。 
const numbers = [1, 2, 3, 4, 5];

const doubledNumbers = numbers.map(function(number) {
    return number * 2;
});

console.log(doubledNumbers); // 出力: [2, 4, 6, 8, 10]

コード補足説明
配列の map() 関数は、配列を走査して各要素にコールバック関数を適用し、その結果を集めた新しい配列を返すための関数です。

JavaScript の forEach() 関数と map() 関数は、どちらも配列の要素を順に処理し、コールバック関数を適用する関数です。
しかし、forEach() 関数は各要素を単に順に処理するだけなのに対し、map() 関数は各要素を指定したコールバック関数で変換し、新しい配列を返すという違いがあります。

以下は、forEach() 関数と map() 関数の違いを示すサンプルコードです。

JavaScript 
const numbers = [1, 2, 3, 4, 5];

// forEach() 関数を使用
const squaredNumbersForEach = [];

numbers.forEach(function(number) {
    squaredNumbersForEach.push(number * number);
});

console.log("Using forEach():", squaredNumbersForEach);
// 出力: "Using forEach():" [1, 4, 9, 16, 25]

// map() 関数を使用
const squaredNumbersMap = numbers.map(function(number) {
    return number * number;
});

console.log("Using map():", squaredNumbersMap);
// 出力: "Using map():" [1, 4, 9, 16, 25]

上記の例では、forEach() 関数は配列の各要素を順に処理し、要素の二乗した値を squaredNumbersForEach 配列に追加しています。forEach() 関数は戻り値がなく、元の配列を変更したり、別の配列に値を追加する必要がある場合に使われます。

一方、map() 関数は各要素を二乗して、新しい配列 squaredNumbersMap を生成します。map() 関数は変換処理の結果を新しい配列として返します。

これにより、forEach() 関数と map() 関数の使用方法および結果の違いを比較できます。forEach() 関数は各要素に対して処理を行いながら配列を変更したり別の配列に値を追加しますが、map() 関数は変換処理を通じて新しい配列を生成します。

forEach() 関数と map() 関数の長所と短所

forEach() 関数と map() 関数はそれぞれ異なる長所と短所を持っています。各々の長所は短所にもなり得ますし、短所は長所にもなり得るため、この点を注意して参考にしてください。

forEach() 関数の長所
  • map() 関数よりコードが簡潔です
  • 戻り値がないため、処理結果を別の変数に保存したり利用したりする必要がありません
  • 元の配列を直接変更できるため、必要に応じて配列を修正できます
forEach() 関数の短所
  • 配列の各要素を別の値に変換したり、特定の処理を実行したり、配列の要素をフィルタリングする用途には使えません
  • 新しい配列を返しません
map() 関数の長所
  • 各配列要素を変換して新しい配列を返します
  • 返された配列は元の配列と同じ長さであり、各要素は変換された値で構成されます
  • 変換処理によって新しい配列を生成するため、元の配列は変更されません
map() 関数の短所
  • 新しい配列を生成する過程でメモリを使用するため、大きなサイズの配列ではパフォーマンスの問題が発生する可能性があります
  • forEach() 関数よりコードが長くなることがあります

全体的に見ると、map() 関数は配列の要素を処理するのにより便利な関数です。しかし、forEach() 関数はコードが簡潔なため、特定の状況ではより有用な関数となる場合があります。

ブラウザ互換性

forEach() 関数のブラウザー互換性
メソッド
デスクトップ Chrome
Chrome
デスクトップデスクトップ Edge
Edge
デスクトップ Firefox
Firefox
Safari
Safari
forEach() 1 12 1.5 3

仕様書

forEach（）関数の仕様書
仕様書
forEach() ECMAScript Language Specification
#sec-array.prototype.foreach

参考資料

関連項目