JavaScriptでは、繰り返し処理としてfor文が良く使われていますが、配列メソッドにも似たような機能を持つ「forEachメソッド」が用意されています。

for文が配列以外にも幅広く使用できる一方、forEachメソッドは配列の要素のみに実行することが可能です。

for文を使うと初期値や条件式などを細かく設定できることにも利便性を感じますが、記述が長くなりやすく、必ずしもfor文を使うのが吉とは限りません。

そこで今回は、効率良く配列の繰り返し処理が行えるforEachメソッドについて解説し、その中でfor文との比較も取り上げていきます。

以下の記事ではfor文の使いかたを解説しています。for文の基本をおさえることでforEachの理解も深まるため、参考にしてみてください。

forEachメソッド

「forEachメソッド」とは、配列のすべての要素に対してコールバック関数を実行することができます。要素一つひとつに繰り返し処理が行われ、さいごの要素まで行き渡ったら、処理が終了します。

繰り返し処理を中断するbreakやcontinueが使用できない点に注意が必要です。

基本構文

arr.forEach((value, index, array) => {
  実行したい処理
});

サンプル

const array = [10, 20, 30, 40, 50];

array.forEach((value, index, array) => {
  console.log(`${value}は、[${array}]の中で ${index} 番目の要素です`);
});

実行結果

//'10は、[10,20,30,40,50]の中で 0 番目の要素です'
//'20は、[10,20,30,40,50]の中で 1 番目の要素です'
//'30は、[10,20,30,40,50]の中で 2 番目の要素です'
//'40は、[10,20,30,40,50]の中で 3 番目の要素です'
//'50は、[10,20,30,40,50]の中で 4 番目の要素です'

javascript forEach

このように複雑な記述なく、それぞれの要素をかんたんに取り出せることがforEachの特徴です。

値・インデックス・配列の最大3つの引数を記述することができ、値だけでなくインデックスを取得したい時などに便利です。

実際には、第1, 2引数や第1引数のみ記述する場面も多くあります。
配列の単数形が第1引数の名前としてよく使われているため、参考にすると良いでしょう。

以下では、配列名を「colors」とし、第1引数(一つひとつの要素)を「color」としています。

const colors = ['red', 'blue', 'yellow', 'white', 'black'];

colors.forEach((color) => {
  console.log(`My favorite color is ${color}`);
});

実行結果

//'My favorite color is red'
//'My favorite color is blue'
//'My favorite color is yellow'
//'My favorite color is white'
//'My favorite color is black'

javascript forEach

forEachは配列にオブジェクトを格納した形にも使うことができます。

const lists = [
  { country: 'Japan', capital: 'Tokyo'},
  { country: 'France', capital: 'Paris'},
  { country: 'Canada', capital: 'Ottawa'},
  { country: 'Norway', capital: 'Oslo'},
  { country: 'Brazil', capital: 'Brasilia'}
];

lists.forEach((list) => {
  console.log(`The capical of ${list.country} is ${list.capital}`);
});

実行結果

//'The capital of Japan is Tokyo'
//'The capital of France is Paris'
//'The capital of Canada is Ottawa'
//'The capital of Norway is Oslo'
//'The capital of Brazil is Brasilia'

javascript forEach

配列の中身はオブジェクトのため、第1引数の「list」と「country」や「capital」を繋げることで、プロパティ名や値をそれぞれ取得することができます。

for文との比較

forEachの基本的な使いかたを掴んだところで、for文と比較してみましょう。

少し補足ですが、インデックスの順序通りに処理を行うことが保証されていないfor-inは、配列には不向きです。
このことから、配列の繰り返し処理にはfor-ofかforEachメソッドを使う方法が適しているため、ここではこの2つを比較していきます。

基本的な繰り返し処理

for-ofの場合

const array = [10, 20, 30, 40, 50];

for (let item of array) {
  console.log(item); 
};
//10
//20
//30
//40
//50

forEachの場合

const array = [10, 20, 30, 40, 50];

array.forEach(item => console.log(item));
//10
//20
//30
//40
//50

出力結果は同じものが返ります。
かんたんな処理の場合は、for-ofとforEachの記述量に大差はありませんが、forEachだとアロー関数を少ない記述で書くことも可能です。

処理を中断する

for-ofの場合

const array = [1, 2, 3, 4, 5];

for (const value of array) {
  if (value === 4) break;
  console.log(value); 
}
//1
//2
//3

forEachの場合

const array = [1, 2, 3, 4, 5];

array.forEach((value) => {
  if (value === 4) break;
  console.log(value); 
});
//'Uncaught SyntaxError: Illegal break statement'

for-ofの場合は、処理を中断させることができますが、冒頭でも述べたように、forEachの場合は、breakやcontinueを使用することができず、エラーとなります。

条件によって処理を制御させたい場合には、forEachが使えないため、この点がforEachのデメリットにもなります。

繰り返し処理から途中で抜け出す必要がある場合には、従来型のforまたは、for-ofを使う方が賢明です。

インデックスを取得する

for-ofの場合

const array = ['a', 'b', 'c', 'd', 'e'];

for (const [index, value] of array.entries()) {
  console.log(`${index}: ${value}`);
};
//'0: a'
//'1: b'
//'2: c'
//'3: d'
//'4: e'

forEachの場合

const array = ['a', 'b', 'c', 'd', 'e'];

array.forEach((value, index) => {
  console.log(`${index}: ${value}`);
});
//'0: a'
//'1: b'
//'2: c'
//'3: d'
//'4: e'

どちらもインデックスを取得し、同様の結果が返りますが、インデックスの取得をfor-ofで実現するには、entriesメソッドのような他のメソッドを使用する必要があったりと、少し周りくどい印象となります。

単純な繰り返し処理の中でインデックスを取得したい場合には、forEachを使う方が効率的だと言えます。

まとめ

今回は配列の繰り返し処理に使えるforEachメソッドについて解説しました。

JavaScriptでは色々な方法で繰り返し処理を行うことができますが、配列においてはforEachを使うと便利な場面が出てくるため、覚えておきたいメソッドです。

  • すべての要素に対して繰り返し処理が行われる
  • value, index, arrayの引数を用いることができる
  • 繰り返し処理を途中で抜ける場合には、forEachは使えない

これらのポイントを意識して、配列の繰り返し処理にforEachを取り入れていきましょう。

Javascript関連記事