中学生でもわかる！JavaScriptの.forEach()メソッドをマスターしよう！

programming
学習コースキャンペーンバナー

こんにちは、フローです。

今回はJavaScriptの配列メソッドの1つ、

.forEach()メソッドについて詳しく見ていきましょう。

コードを書く時によく使うメソッドですので、しっかりと理解しておきましょう。

.forEach()とは？

JavaScriptの.forEach()メソッドは、

配列の全ての要素に対して関数を適用するメソッドです。

その名前の通り、配列の「各（every）」要素に「特定の処理（for）」を行います。

どんな時に使うのか？

.forEach()メソッドは、

配列の全ての要素に対して何かしらの処理を行いたいときに使います。

例えば、全ての要素を表示したり、

各要素に対して特定の計算を行ったりすることができます。

パターン1：配列の全ての要素を表示する

let numbers = [1, 2, 3, 4, 5];
numbers.forEach((number) => {
  console.log(number);
});

このコードは、配列numbersの全ての要素を順番にコンソールに表示します。

パターン2：各要素に対して特定の計算を行う

let numbers = [1, 2, 3, 4, 5];
let doubled = [];
numbers.forEach((number) => {
  doubled.push(number * 2);
});
console.log(doubled); // [2, 4, 6, 8, 10]

このコードは、

配列numbersの全ての要素を2倍にした新たな配列doubledを作成しています。

パターン3：オブジェクトの配列から特定のプロパティを表示する

let students = [
  { name: "Taro", score: 85 },
  { name: "Hanako", score: 90 },
  { name: "Yoshio", score: 78 }
];
students.forEach((student) => {
  console.log(student.name + ": " + student.score);
});

このコードは、

students配列（学生のオブジェクトの配列）から

各学生の名前とスコアをコンソールに表示しています。

.forEach()の注意点

1.元の配列を変更しません。

ただし、渡される関数が配列の要素を変更する場合は、その影響を受けます。

2.break文を使用してループから抜け出すことができません。

ループから早期に抜け出す必要性がある場合は、forループやfor...ofループ、あるいは配列の.some()メソッドや.every()メソッドなどを使用することを検討してみてください。

3.非同期操作には適していません。

非同期操作を配列の各要素に対して行いたい場合は、for...ofループとasync/awaitを組み合わせるなどの方法を検討してみてください。

まとめ

今回はJavaScriptの.forEach()メソッドについて詳しく見てきました。

配列の各要素に対して何らかの操作を行いたいときに、

このメソッドを使うことでコードを短く、

読みやすくすることができます。

ただし、.forEach()メソッドにはいくつかの注意点があるため、

それらを理解した上で適切に使用することが大切です。

これからも一緒にJavaScriptの世界を探求していきましょう。次回もお楽しみに！

レッツチャレンジ！