【JavaScript】forEachでreturnは効かない？ループを抜ける方法と最適な代替案

JavaScriptの配列操作において、最も馴染み深いメソッドの一つが forEach 文です。

しかし、いざ使ってみると「if 文で条件に一致した瞬間にreturnしてループを抜けたいのに、なぜか最後まで処理が止まらない」「値をreturnしたはずなのに受け取れない」といったトラブルに直面することが多々あります。

このような疑問を抱えている方に向けて、この記事ではJavaScriptの forEach におけるreturnの挙動を徹底解説します。

基本の仕組みから、処理をスキップ（continue）する方法、そして実務で推奨される「途中で抜けられる」最新のループ手法まで、サンプルコードを交えて詳しく紹介します。

forEach の基本と return の挙動を理解する

まずは、Array.prototype.forEach の基本的な仕組みと、その中でのreturnの扱いについて正確に把握しましょう。

ここを誤解していると、意図しないバグを生む原因になります。

forEach 内の return は「コールバック関数の終了」に過ぎない

JavaScriptの forEach 文は、配列の各要素に対して「コールバック関数」を実行する仕組みです。

そのため、forEach のブロック内でreturnを記述しても、それは「その要素に対する関数の処理を終わらせる」だけであり、ループ全体を終了させる効果はありません。

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

numbers.forEach((num) => {
    if (num === 3) {
        // 3の時に return してループを止めたい（が、止まらない）
        return; 
    }
    console.log("処理中:", num);
});

実行結果

処理中: 1
処理中: 2
処理中: 4
処理中: 5

このプログラムでは、数値が「3」の場合にreturnを実行しています。
しかし、実行結果を見ると分かる通り、「3」の表示はスキップされているものの、「4」と「5」の処理は続行されています。

これは、forEach が内部的に「配列の要素分だけ個別の関数を呼び出している」ためです。

1つの要素に対する関数がreturnで終わっても、ブラウザは次の要素に対してまた新しく関数を呼び出します。

つまり、forEach におけるreturnは、通常のループにおけるcontinueと同じような挙動になるのです。

forEach 自体は return value（戻り値）を返さない

もう一つの注意点は、forEach メソッド自体の戻り値です。

forEach は常に undefined を返します。
たとえコールバック関数内で値をreturnしても、それが forEach の結果として返ってくることはありません。

const list = [10, 20, 30];

// 合計を返したいが...
const result = list.forEach((val) => {
    return val * 2;
});

console.log("結果:", result);

実行結果

結果: undefined

このコードでは、各要素を2倍にして返そうとしていますが、result 変数には何も格納されず undefined になっています。

C# foreach returnのように、呼び出し元のスコープへ値を返すような挙動を期待している場合は注意が必要です。
値を加工して新しい配列を作りたい場合は、後述する map メソッドなどを使用するのが正解です。

forEach で「途中で抜ける」「スキップする」方法

「どうしても forEach を使いたいけれど、条件によって処理を制御したい」という場合、どのように記述すべきでしょうか。

標準的なbreakやcontinueが使えないという制約の中で、実現可能な方法を整理します。

return を continue の代わりとして使う

前述の通り、forEach 内でのreturnは現在のループ回を終了させ、次の要素へ移る動作をします。
これを利用すれば、実質的にcontinueと同じ制御が可能です。

const users = [
    { name: "田中", active: true },
    { name: "佐藤", active: false },
    { name: "鈴木", active: true }
];

users.forEach((user) => {
    // アクティブでないユーザーはスキップする
    if (!user.active) {
        return; 
    }
    console.log("配信対象:", user.name);
});

このソースコードでは、user.active が false の場合にのみreturnさせることで、その後の console.log を実行させないようにしています。

これにより、特定の条件に合致しない要素を読み飛ばすフィルターのような役割を果たしています。

あくまで「次の要素の処理」は行われるという点を念頭に置いておけば、便利なテクニックと言えます。

forEach を break させる唯一の方法（非推奨）

技術的には、forEach を途中で強制終了させる（抜ける）方法は存在します。
それは「例外（Error）を投げる」ことです。

try {
    [1, 2, 3, 4, 5].forEach((n) => {
        if (n === 3) throw new Error("LoopEnd");
        console.log(n);
    });
} catch (e) {
    if (e.message !== "LoopEnd") throw e;
}

この方法は確かに機能しますが、本来のエラー処理のための仕組みをループ制御に使うのは、コードの可読性を著しく下げ、デバッグを困難にするため、現場では非推奨とされています。

「途中で止めたい」というニーズがあるなら、無理に forEach を使うのではなく、次に紹介する適切な手法へ切り替えるべきです。

目的別！forEach の代わりとなる最適なループ手法

「条件が一致したらreturnで値を返したい」
「特定の場所で抜ける必要がある」

こういった実務上の要件を満たすためには、他の構文やメソッドを使い分けるのがプロの書き方です。

途中で処理を終了したいなら for…of 文

ES6以降で導入された for...of 文は、現在のJavaScript開発において最も推奨されるループ構文の一つです。

この構文であれば、他のプログラミング言語と同様にbreakやcontinueが使用でき、関数内であればreturnで関数ごと終了させることも可能です。

function findTarget(arr) {
    for (const val of arr) {
        if (val === "Target") {
            console.log("見つかりました！");
            // ループも関数も即座に終了し、値を返す
            return true; 
        }
        console.log("探索中:", val);
    }
    return false;
}

const data = ["Apple", "Target", "Orange"];
findTarget(data);

このソースコードは、配列の中から特定の文字列を探す関数です。

for...of を使うことで、目的のデータが見つかった瞬間にreturnを実行し、無駄なループを一切回さずに処理を終えることができています。

パフォーマンスと読みやすさの両面で、forEach よりも優れている場面が多い手法です。

条件に合う要素を判定したいなら some / every

「配列の中に条件を満たすものが1つでもあるか？」を確認したいだけなら、some メソッドが最適です。

このメソッドは、コールバック関数が true を返した瞬間にループを終了し、全体の結果として true を返します。

const scores = [40, 55, 80, 30];

// 70点以上の人が1人でもいるか？
const hasHighScorer = scores.some((score) => {
    console.log("チェック:", score);
    return score >= 70;
});

console.log("判定結果:", hasHighScorer);

実行結果

チェック: 40
チェック: 55
チェック: 80
判定結果: true

some メソッドは、3番目の要素である「80」が条件を満たした時点で、自動的にループを終了しています。
その後の「30」のチェックは行われません。

このように、論理的な判定を伴うループにおいては、専用のメソッドを使うことで「 抜ける 」処理をコードに明示的に書く必要すらなくなります。

よくある疑問：forEach の順番保証とインデックス取得

最後に、forEach を使う際によく検索される、実用的な知識について補足します。

要素の順番は保証されるか

JavaScriptの forEach は、配列の要素のインデックス順（0, 1, 2…）に実行されることが保証されています。

ただし、非同期処理（async/await）を組み合わせる場合には注意が必要です。

forEach 内で非同期処理を待機させようとしても、待機を待たずに次の要素の処理が並列的に始まってしまうため、順番通りに完了させたい場合は for...of を使うのが鉄則です。

インデックス（index）を取得する書き方

forEach のコールバック関数は、第2引数としてインデックスを受け取ることができます。

const colors = ["Red", "Green", "Blue"];

colors.forEach((color, index) => {
    console.log(`${index}: ${color}`);
});

この記述方法により、現在の要素が何番目なのかを簡単に把握できます。
これは for 文でカウンタ変数（i）を用意する手間を省ける、forEach の大きなメリットの一つです。

JavaScriptのスキルを活かして年収を上げる方法

以上、JavaScriptにおけるforEachでのreturnの挙動などについて詳しく解説してきました。