JavaScript：forEachメソッド-配列のループ方法を１分で解説

forEach ループは、JavaScriptで配列の各要素に対して繰り返し操作を行うためによく使用されるメソッドです。forEachメソッドを利用することで、配列内の各要素に対して関数を１度ずつ適用することができます。

参考　Javascript：配列（array）とは？

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

numbers.forEach(function(number) {
    console.log(number * 2); // 各要素に2を乗算して出力
});

Webエンジニア/Webデザイナーを目指す方であれば知らないと恥ずかしい超・基本知識の１つです。是非最後までご覧ください。

参考　【JavaScript入門】基本文法/基礎文法を5分で

forEach メソッドの構文ルール

forEach メソッドは、JavaScriptの配列に対して使用できるメソッドで、配列内の各要素に対して指定した関数を実行します。基本的な構文は次の通り。

array.forEach(function(element, index, array) {
    // ここで何かしらの処理を行う
});

1. array：操作を行いたい配列。
2. function(element, index, array)：配列の各要素に対して実行される関数。この関数は最大で3つの引数を取ることができます。
   • element：配列の現在処理されている要素。
   • index：配列の現在処理されている要素のインデックス。
   • array：操作が行われている配列自体。

forEach メソッドは、配列の最初の要素から最後の要素まで、配列内の各要素に対して順番に関数を１度ずつ呼び出します。この関数は、現在の要素、その要素のインデックス、および配列自体にアクセスすることができます。

参考　コールバック関数とは？

サンプル　fruits 配列の操作

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

fruits.forEach(function(element, index) {
    console.log('Element at position ' + index + ' is ' + element);
});

// 実行結果
// Element at position 0 is apple
// Element at position 1 is banana
// Element at position 2 is cherry

↑の例では、fruits 配列の各要素に対して、その要素とインデックスを使用してメッセージをコンソールに出力しています。要素が３つあるため、この関数は３回繰り返されているという点がポイントです。

forEach メソッドのサンプルコード

forEach メソッドを使った基本から応用までのいくつかのサンプルコードを提供します。これらのサンプルコードを理解することで、forEach の動作原理とその柔軟な使用方法がよく理解できると思います。

サンプルコード１　配列の各要素を出力

配列内の各要素を単純に出力する基本的な使用法です。

let colors = ['赤', '青', '黄'];
colors.forEach(function(color) {
    console.log(color);
});

// 赤
// 青
// 黄

サンプルコード２　 要素とそのインデックスを出力

配列の各要素とそのインデックス（位置）を出力します。

let animals = ['犬', '猫', '鳥'];
animals.forEach(function(animal, index) {
    console.log(index + ': ' + animal);
});

// 0: 犬
// 1: 猫
// 2: 鳥

サンプルコード３　配列の数値の合計を計算

配列内の数値の合計を計算する例です。

let numbers = [1, 2, 3, 4, 5];
let sum = 0;
numbers.forEach(function(number) {
    sum += number;
});
console.log('合計:', sum);

// 15

サンプルコード４　オブジェクトの配列を操作して新しい配列を作成

オブジェクトの配列を扱い、特定のプロパティ値で新しい配列を作成します。

let people = [
    { name: '太郎', age: 25 },
    { name: '花子', age: 22 },
    { name: '次郎', age: 30 }
];

let names = [];
people.forEach(function(person) {
    names.push(person.name);
});
console.log('名前の配列:', names);


// ["太郎", "花子", "次郎"]

サンプルコード５　thisを使ってオブジェクト内の配列を操作

forEachのthisArgパラメータを利用して、特定のコンテキスト（this）からメソッドを呼び出します。

let data = {
    numbers: [1, 2, 3],
    double: []
};

data.doubleNumbers = function() {
    this.numbers.forEach(function(number) {
        this.double.push(number * 2);
    }, this); // `this`を`data`オブジェクトに設定
};

data.doubleNumbers();
console.log('倍にした数:', data.double);

// ["2", "4", "6"]

これらの例は、forEach メソッドの基本的な使い方から、少し応用的な使い方までをカバー。forEach を使うことで、配列内の各要素に対して一貫した操作を効率的に行うことができます。さらに、オプショナルな引数を活用することで、より柔軟にコードを書くことが可能になります。

forEachメソッドのTips

1. break や continue は使えない
   • forEach ループでは、break や continue 文を使ってループの実行を早期に終了させたり、現在の繰り返しをスキップしたりすることはできません。ループを早期に終了させる必要がある場合は、for ループや for...of ループを利用しましょう。
2. 非同期処理に注意
   • forEach で非同期関数を扱う場合、各繰り返しの処理が完了する前に次の繰り返しが開始されるため、期待する順序で処理が完了しない場合があります。非同期処理を配列の各要素に対して順番に適用したい場合は、async/await と for...of ループを組み合わせる方法が適切。
3. this の扱い
   • forEach の第二引数として thisArg を提供することで、コールバック関数内の this の値を指定できます。これにより、特定のオブジェクトコンテキスト内で関数を実行する際の柔軟性が向上します。

let person = {
    name: '太郎',
    hobbies: ['読書', '映画鑑賞', 'ウォーキング'],
    printHobbies: function() {
        this.hobbies.forEach(function(hobby) {
            console.log(this.name + 'の趣味: ' + hobby);
        }, this); // ここで `this` を `person` オブジェクトに設定
    }
};

person.printHobbies();

forEachメソッドを利用する際の注意点

1. 配列の変更に注意
   • forEach ループの実行中に配列自体を変更する（要素の追加、削除、置換など）と、予期せぬ結果を招くことがあります。特に、配列の長さが変更される操作は避けるべき。
2. 戻り値は無視される
   • forEach に渡されるコールバック関数の戻り値は無視されます。つまり、forEach を使用して新しい配列を生成するなどの操作を直接行うことはできません。そのような場合は、map や filter などのメソッドを利用する方が適切です。
3. パフォーマンスの検討
   • 大規模な配列を扱う場合、forEach メソッドのパフォーマンスに注意する必要があります。特定の状況では、伝統的な for ループの方が高速に動作することがあります。パフォーマンスが重要な場面では、異なるアプローチのパフォーマンスを比較検討することが望ましい。

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

console.log('変更前の配列:', numbers);

numbers.forEach(function(number, index) {
    if (number === 3) {
        numbers.push(6); // 配列に新しい要素を追加
    }
    console.log(number);
});

console.log('変更後の配列:', numbers);