JavaScriptのforEachとは？for・map・filterとの違いや基本的な使い方を徹底解説
JavaScriptプログラミングで、配列処理は頻繁におこなわれる操作です。forEachメソッドは配列処理に便利な一方、特性を正しく理解する必要があります。
本記事では、forEachの基本から応用まで、コード例を交えて徹底解説します。for、map、filterなど他の方法との違いも比較しながら、forEach活用ノウハウをお伝えします。
効率的なコーディングと可読性の高いコード作成を目指しましょう。
Contents
JavaScriptの「forEach」とは？
JavaScriptの「forEach」は、配列の要素を順番に処理するためのメソッドです。配列の全要素に対して、指定した関数を一度ずつ実行します。 例えば、配列の各要素を表示したり、DOM操作など特定の処理を実行したりする際に便利です。
forEachの特徴として、副作用をともなう場合があります。つまり、元の配列を変更する可能性があります。
forとの違い
forEachはforより簡潔に記述できます。forループでは初期化、条件、増分の3つの部分を明示的に記述する必要がありますが、forEachでは省略できます。
forとは異なり、forEachではbreak文を使用できないため、すべての要素を処理する必要がある場合はforEachが適していますが、途中で処理を中断したい場合はforループのほうが適しています。
mapとの違い
forEachとmapの主な違いは、戻り値にあります。
forEachは戻り値を持たない一方、mapは元の配列の各要素に対して関数を適用し、適用結果から新しい配列を作成します。
元の配列を変更せずに新しい配列を生成したい場合はmapを使用し、各要素に対して処理を実行したい場合はforEachを使用するのが適切です。
filterとの違い
forEachは各要素に対して処理を実行するのに対し、filterは、指定した条件を満たす要素だけを含む新しい配列を返します。
例えば、配列から偶数の要素だけを抽出したい場合はfilterが適していますが、すべての要素に対して特定の処理を実行したい場合はforEachが適しています。
forEachの基本的な使い方と実例
forEachメソッドの基本的な構文は以下のとおりです。
array.forEach(function(currentValue, index, arr) {
// 処理内容
});
forEachメソッドは、配列の各要素に対して指定した関数を実行します。
関数は、現在の要素（currentValue）、現在のインデックス（index）、処理中の配列（arr）を引数として受け取ります。
forEachの具体的な使用例を見てみましょう。
const fruits = [‘りんご’, ‘バナナ’, ‘オレンジ’];
fruits.forEach(function(fruit, index) {
console.log(`${index + 1}番目のフルーツは${fruit}です`);
});
上記の例では、配列fruitsの各要素を対象に、要素とインデックスを使って文字列を出力しています。
次に、配列の各要素を2倍にする処理を考えてみましょう。
const numbers = [1, 2, 3, 4, 5];
const doubledNumbers = [];
numbers.forEach(function(number) {
doubledNumbers.push(number * 2);
});
console.log(doubledNumbers); // [2, 4, 6, 8, 10]
上記の例では、配列numbersの各要素を2倍にして、新しい配列に追加しています。
foreachとメソッドチェーン
forEachはメソッドチェーンの最後に使うことが多いです。例えば、配列をフィルタリングしてから各要素に対して処理をおこなう場合、次のように書けます。
const numbers = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
numbers.filter(num => num % 2 === 0)
.forEach(num => console.log(num));
上記の例では、偶数のみをフィルタリングしてから、各偶数をコンソールに出力しています。
foreachを使う際の注意
forEachの注意点として、途中で処理を中断できないことがあります。 特定の条件で処理を中断したい場合は、for文やsome()メソッドなどの他の方法を検討するとよいでしょう。
他にも、新しい配列を作成する場合はmap()メソッド、条件に合う要素を抽出する場合はfilter()メソッドなど、より適したメソッドがあるため、処理内容によって使い分けるようにしましょう。
forEachのコールバック関数の書き方
コールバック関数の基本的な構文は以下のとおりです。
array.forEach(function(currentValue, index, array) {
// 処理内容
});
アロー関数を使用すると、より簡潔に記述できます。
array.forEach((currentValue, index, array) => {
// 処理内容
});
forEachでのthisの扱い
コールバック関数内でthisを使用する場合は注意が必要です。
通常の関数では、thisは呼び出し元のオブジェクトを指しますが、アロー関数ではthisが外側のスコープから継承されます。
const obj = {
numbers: [1, 2, 3],
multiplyBy: 2,
multiply() {
this.numbers.forEach(function(num) {
console.log(num * this.multiplyBy); // undefinedになる
});
}
};
// 修正例
obj.multiply = function() {
this.numbers.forEach((num) => {
console.log(num * this.multiplyBy); // 正しく動作する
});
};
forEachで配列の要素を変更する
forEachのコールバック関数は戻り値を持ちません。
配列の要素を変更したい場合は、元の配列を直接変更するか、新しい配列を作成する必要があります。
const numbers = [1, 2, 3];
numbers.forEach((num, index, array) => {
array[index] = num * 2; // 元の配列を直接変更
});
console.log(numbers); // [2, 4, 6]
まとめ
forEachは配列処理を簡潔に記述できる強力なツールですが、戻り値がない点や中断できない点に注意が必要です。
コールバック関数の書き方やthisの扱いも押さえておくと、より効果的に活用できます。
ぜひ自分のプロジェクトでforEachを試してみてください。
