More than 3 years have passed since last update.

【Javascript】forEach関数について-学習ノート1

Posted at 2021-06-23

初めに

javascriptのforEach()関数について学習した内容のoutput用記事です。

※内容に間違いなどがある場合はご指摘をよろしくお願いします。
※こちらの記事はあくまでも個人で学習した内容のoutputとしての記事になります。

関数を引数にする関数（高階関数）の一つ。配列の要素を一つひとつに対して関数の中で記述した特定の処理を行うことができる。

forEach()関数を使ってchangesという配列の各要素の値を２倍にしコンソールに表示してみます。

const changes = [100, 400, -300, 120, -50, -330, 1400, 500];

changes.forEach(function (change) {
  console.log(change * 2);
});

配列の各要素の値が２倍になって出力されました。

これはfor of文を使えば同じような結果が得られます。

for (const change of changes) {
  console.log(change * 2);
}

for ofではentries()メソッドを使って、配列の要素をindexとvalueで分けて処理することができます。

for (const [i, change] of changes.entries()) {
  console.log(`${i} : ${change * 2}`);
}

forEach()関数を使う場合、for of文と同じ処理ができますが引数の順番が「value, index, array」になるので要注意です。また、第３引数にarray(配列）を取ることができます。

changes.forEach(function (change, index, array) {
  console.log(`${array} // ${index} : ${change * 2}`);
});

for of文とforEach()関数の違いは色々ありますが、for ofの場合break,continue,returnの３種類の制御文が使えるのに対し、forEach()では使えないところです。

for (const change of changes) {
  if (change > 0) {
    console.log(change * 2);
  } else {console.log('終了');
  break;}
};

同じような処理をforEach()関数でやろうとすると、

changes.forEach(function (change) {
  if (change > 0) {
    console.log(change * 2);
  } else {console.log('終了');
  break;}
});

構文エラーが出てしまいます。forEach()関数は最初から最後まで途切れずに処理を行われるようになっていますので、途中で処理を制御したい場合にはfor of文を使うべきです。