【JavaScript】forEach関数の使い方【for文との違いも】

みなさんこんにちは、現役エンジニアのサメハックです

アパレル企業でトップ販売員を経て
未経験からWebエンジニアに転職し、
現在正社員として5年働いています！

今回はforEach関数の使い方について学んでいきましょう！

駆け出しエンジニアや未経験の方、
また新入社員を指導する先輩社員にとっても
わかりやすいように解説していきます！

この記事を読むと・・・

forEach関数が理解できる
forEach関数の問題点が理解できる

forEach関数とは？
実際につかってみよう！
forEach関数のデメリット
1. breakやcontinueが使えない！
2. returnすることでcontinue相当の処理が作れる
まとめ

forEach関数とは？

配列に対するループ処理の１つです。

通常のfor文よりすっきりと記述することができます。

配列にしか使えないよ！

実際につかってみよう！

通常の使い方

まずは実際に使ってみましょう！
forEach関数の構文はこうです。

配列.forEach(変数名 => {
    // 繰り返したい処理
});

ちょっとわかりにくいと思うので、
例文を見てみましょう。

// 配列の宣言
const userList = ["サメハック", "イヌハック", "ネコハック"];

// 繰り返したい処理
userList.forEach(user => {
    console.log(user);
});

【出力結果】
サメハック
イヌハック
ネコハック

このように、配列 userList の中身を１つずつ取り出して
変数 user へ代入して繰り返し処理を行います。

ループの回数（index）を取得したい

めったにないですが、indexを取得したいときはこのように記述します

配列.forEach((変数名, index) => {
    // 繰り返したい処理
});

先ほどの例に当てはめてみましょう。

// 配列の宣言
const userList = ["サメハック", "イヌハック", "ネコハック"];

// 繰り返したい処理
userList.forEach((user, index) => {
    console.log(user + ": " + index);
});

【出力結果】
サメハック: 0
イヌハック: 1
ネコハック: 2

一応このように記述することはできますが、
あまりいい書き方ではないので、別の記述を検討しましょう。

indexを取得したい場合はfor文を使用するのがおすすめだよ！

for-of文に書き換えてみよう

先ほどの例文をfor-of文で記述するとこのようになります。

// 配列の宣言
const userList = ["サメハック", "イヌハック", "ネコハック"];

// 繰り返したい処理
for(let user of userList) {
    console.log(user);
}

【出力結果】
サメハック
イヌハック
ネコハック

for-of 文の復習をしたい方はこちら！

404 NOT FOUND – サメハック

Infomation for Engineer🦈

個人的に一番すっきり見えるので、書き換えるならfor-of文がおすすめだよ！

for文に書き換えてみよう

先ほどの例文を通常のfor文で記述するとこのようになります。

// 配列の宣言
const userList = ["サメハック", "イヌハック", "ネコハック"];

// 繰り返したい処理
for(let i = 0; i < userList.length; i++) {
    console.log(userList[i]);
}

【出力結果】
サメハック
イヌハック
ネコハック

for 文の復習をしたい方はこちら！

【JavaScript】繰り返し(ループ)処理を解説！【for】

この記事を読むと・・・ for文による繰り返し処理がわかる

配列名.length
と記述すると配列の要素数が取得できるよ！

ちなみにlengthはプロパティなので()は要らないよ！

forEach関数のデメリット

breakやcontinueが使えない！

forEach関数は、あくまでループ処理ではなく
配列の中身を１つ１つ取り出すだけの関数なので
breakやcontinueが使えません！

以下のような記述をすると、エラーが発生します。

// 配列の宣言
const userList = ["サメハック", "イヌハック", "ネコハック"];

// 繰り返したい処理
userList.forEach( user => {
    if(user == "イヌハック") {
        // ここでエラーとなる！
        // continue も同様
        break;
    }
    console.log(user);
});

break や continue について詳しく知りたい方はこちら

404 NOT FOUND – サメハック

Infomation for Engineer🦈

breakやcontinueを使いたい場合は、for-of文を使おう！

returnすることでcontinue相当の処理が作れる

ちなみにですが return することで、
無理矢理 continue 相当の処理を実装することもできます。

・・・が！
これは正直無理がある記述なのでお勧めしません。

ただ、稀に使われているので一応紹介しておきます。

// 配列の宣言
const userList = ["サメハック", "イヌハック", "ネコハック"];

// 繰り返したい処理
userList.forEach( user => {
    if(user == "イヌハック") {
        // continueと同様の処理
        return;
    }
    console.log(user);
});

【出力結果】
サメハック
ネコハック

現場で何度か目にしたので一応知っておくとよいよ！

まとめ

配列.forEach(変数名 => { // 処理 });
配列.forEach((変数名, index) => { // 処理 });
と記述することで配列の要素を１つずつ取り出せる
あくまで配列に対してのみ使える関数である
for~of 文とほぼ同じ動きをする
continue や break が使えない
return と記述すると continue 相当の処理が可能※非推奨

満足いただけたら、1クリックなのでSNSフォローしてもらえると嬉しいです🦈

twitter
instagram