みなさんこんにちは、現役エンジニアのサメハックです
アパレル企業でトップ販売員を経て
未経験からWebエンジニアに転職し、
現在正社員として5年働いています!
今回はforEach関数の使い方について学んでいきましょう!
駆け出しエンジニアや未経験の方、
また新入社員を指導する先輩社員にとっても
わかりやすいように解説していきます!
- forEach関数が理解できる
- forEach関数の問題点が理解できる
forEach関数とは?
![](https://samehack.com/wp-content/uploads/2022/03/star-trails-828656_1920-1024x683.jpg)
配列に対するループ処理の1つです。
通常のfor文よりすっきりと記述することができます。
実際につかってみよう!
通常の使い方
まずは実際に使ってみましょう!
forEach関数の構文はこうです。
配列.forEach(変数名 => {
// 繰り返したい処理
});
ちょっとわかりにくいと思うので、
例文を見てみましょう。
// 配列の宣言
const userList = ["サメハック", "イヌハック", "ネコハック"];
// 繰り返したい処理
userList.forEach(user => {
console.log(user);
});
【出力結果】
サメハック
イヌハック
ネコハック
このように、配列 userList の中身を1つずつ取り出して
変数 user へ代入して繰り返し処理を行います。
ループの回数(index)を取得したい
![](https://samehack.com/wp-content/uploads/2022/03/learn-2300141_1280-1024x589.jpg)
めったにないですが、indexを取得したいときはこのように記述します
配列.forEach((変数名, index) => {
// 繰り返したい処理
});
先ほどの例に当てはめてみましょう。
// 配列の宣言
const userList = ["サメハック", "イヌハック", "ネコハック"];
// 繰り返したい処理
userList.forEach((user, index) => {
console.log(user + ": " + index);
});
【出力結果】
サメハック: 0
イヌハック: 1
ネコハック: 2
一応このように記述することはできますが、
あまりいい書き方ではないので、別の記述を検討しましょう。
for-of文に書き換えてみよう
![](https://samehack.com/wp-content/uploads/2022/03/laptop-computer-1245981_1920-1024x683.jpg)
先ほどの例文をfor-of文で記述するとこのようになります。
// 配列の宣言
const userList = ["サメハック", "イヌハック", "ネコハック"];
// 繰り返したい処理
for(let user of userList) {
console.log(user);
}
【出力結果】
サメハック
イヌハック
ネコハック
for-of 文の復習をしたい方はこちら!
![](https://samehack.com/wp-content/uploads/cocoon-resources/blog-card-cache/972fb6b815fc3f28005528bf0af79411.jpg)
for文に書き換えてみよう
先ほどの例文を通常のfor文で記述するとこのようになります。
// 配列の宣言
const userList = ["サメハック", "イヌハック", "ネコハック"];
// 繰り返したい処理
for(let i = 0; i < userList.length; i++) {
console.log(userList[i]);
}
【出力結果】
サメハック
イヌハック
ネコハック
for 文の復習をしたい方はこちら!
![](https://samehack.com/wp-content/uploads/2021/10/JavaScript-2-1-320x180.jpg)
と記述すると配列の要素数が取得できるよ!
ちなみにlengthはプロパティなので()は要らないよ!
forEach関数のデメリット
![](https://samehack.com/wp-content/uploads/2022/03/strength-1148029_1280-1-1024x682.jpg)
breakやcontinueが使えない!
forEach関数は、あくまでループ処理ではなく
配列の中身を1つ1つ取り出すだけの関数なので
breakやcontinueが使えません!
以下のような記述をすると、エラーが発生します。
// 配列の宣言
const userList = ["サメハック", "イヌハック", "ネコハック"];
// 繰り返したい処理
userList.forEach( user => {
if(user == "イヌハック") {
// ここでエラーとなる!
// continue も同様
break;
}
console.log(user);
});
break や continue について詳しく知りたい方はこちら
![](https://samehack.com/wp-content/uploads/cocoon-resources/blog-card-cache/972fb6b815fc3f28005528bf0af79411.jpg)
returnすることでcontinue相当の処理が作れる
ちなみにですが return することで、
無理矢理 continue 相当の処理を実装することもできます。
・・・が!
これは正直無理がある記述なのでお勧めしません。
ただ、稀に使われているので一応紹介しておきます。
// 配列の宣言
const userList = ["サメハック", "イヌハック", "ネコハック"];
// 繰り返したい処理
userList.forEach( user => {
if(user == "イヌハック") {
// continueと同様の処理
return;
}
console.log(user);
});
【出力結果】
サメハック
ネコハック
まとめ
![](https://samehack.com/wp-content/uploads/2021/11/dfe65cc8c5d3185e7b92ade5af4cc6bb-4-1024x264.jpg)
- 配列.forEach(変数名 => { // 処理 });
- 配列.forEach((変数名, index) => { // 処理 });
- と記述することで配列の要素を1つずつ取り出せる
- あくまで配列に対してのみ使える関数である
- for~of 文とほぼ同じ動きをする
- continue や break が使えない
- return と記述すると continue 相当の処理が可能※非推奨
![](https://samehack.com/wp-content/uploads/2021/09/00c3d3cf1d32995d7b5414ac551d13f3.png)
満足いただけたら、1クリックなのでSNSフォローしてもらえると嬉しいです🦈