JavaScriptのreturn, break, continueの違いを完全解説

JavaScriptのプログラミングを学んでいると、「return」「break」「continue」といった制御文に出会うことが多いです。それぞれの違いを正しく理解することで、コードをより効率的に書くことができ、エラーも減ります。

本記事では、初心者でも理解しやすいように、各キーワードの違いと使い方について具体的に説明しますね。

この記事を読むことで、JavaScriptの基本的な制御文をマスターし、プログラムの流れを自由にコントロールできるようになります。

本記事の監修者：Zetto

 現役ITエンジニア
 Java Gold保有
 TypeScript(Vue.js)
 Java(SpringBoot)
 Programming Dream編集長

return, break, continueの違いを整理しよう

ここまで、「return」「break」「continue」についてそれぞれの詳細を学んできました。この節では、3つの制御文の違いをまとめて整理し、それぞれがどのように異なる役割を果たしているのかを見ていきます。

それぞれの制御文の違いを比較

「return」「break」「continue」の役割を理解するためには、どのようにプログラムの流れを制御するのかを比較するのが有効です。

return, break, continueの役割の違い

• return: 関数を終了し、関数の結果を返します。
• break: ループを終了させます。
• continue: ループのその回の処理をスキップし、次の回に進みます。

どの場面でどの文を使うべきかの具体例

• returnは関数の処理を途中で終了させて結果を返したいときに使います。
• breakは特定の条件でループ自体を終わらせたいときに有効です。
• continueはループを継続しつつ、特定の条件のときだけ処理を飛ばしたい場合に使います。

制御フローを変える仕組みの理解

「return」「break」「continue」の3つは、それぞれがプログラムの流れを変えるための重要な役割を持っています。

フローの終了（return）とループの終了（break）、スキップ（continue）の違い

• returnは関数を終わらせ、値を返します。
• breakはループ全体を終わらせ、次の処理に進みます。
• continueはループのその回を飛ばし、次の繰り返しに進みます。

分岐と繰り返しの処理における使い方のまとめ

これらの違いをしっかり理解することで、プログラムの制御が正確にできるようになります。また、適切に使い分けることで、コードの効率や可読性も向上します。

JavaScriptのreturn, break, continueの基本を理解しよう

JavaScriptには、プログラムの流れをコントロールするために重要な「return」「break」「continue」という3つのキーワードがあります。それぞれの特徴を理解し、正しく使うことは、プログラムの効率や可読性に大きく影響します。

JavaScriptの基本的な制御文とは？

プログラムの流れを制御する「制御文」とは、処理を特定の方法で進めたり止めたりするための命令のことを指します。この節では、まず制御文の概要について学びましょう。

制御文の役割

JavaScriptにおける制御文の役割は、プログラムがどのように進むかを指示することです。「return」「break」「continue」は、その中でもよく使われる重要な制御文です。それぞれ異なる動きをしますが、共通してプログラムの流れをコントロールする役割を持っています。

return, break, continueが使われる場面

• return: 関数を終わらせて結果を返すために使います。
• break: ループ処理を途中で終了させるために使います。
• continue: 現在のループの繰り返しをスキップして次に進むために使います。

それぞれの使い方を深く理解することで、複雑な処理でも効率的に書けるようになります。

JavaScriptプログラムにおける制御の重要性

JavaScriptでは、プログラムが特定の条件でどう動くかを制御することが重要です。たとえば、エラーハンドリングをする場合や、大量のデータを扱うループの中で余計な処理を省きたい場合などに、この制御文が活躍します。

よく使われる制御文の種類

JavaScriptには「if文」「for文」など他にも多くの制御文がありますが、特に「return」「break」「continue」は、プログラムの終了やスキップに関わるため重要です。これから各制御文の詳細を一つずつ解説していきます。

returnの使い方とその役割

「return」は関数内で使われ、関数の結果を返すための重要なキーワードです。まずは、「return」の基本から見ていきましょう。

return文とは？どのように使うのか

「return」は、関数の中で計算された結果を呼び出し元に返すときに使います。また、関数の中で「return」を書いた位置以降のコードは実行されません。これにより、不要な処理を避けてプログラムの効率を上げることができます。

return文の例

以下の例を見てみましょう。

function 足し算(a, b) {
    return a + b; // 計算結果を返す
    console.log("この行は実行されません");
}

上記の関数「足し算」は、2つの数値「a」と「b」を受け取り、その和を返します。なお、「return」以降に書かれた「console.log()」は実行されないことに注意してください。

関数の終了と値の返却

関数は特定の処理を行い、その結果を「return」で返します。これにより、計算結果や処理の出力を別の処理に活用できます。たとえば、以下のように他の関数で利用することができます。

function 乗算(x, y) {
    return x * y;
}

let result = 乗算(3, 4); // resultには12が入る

関数の戻り値をうまく活用することで、コードの再利用性が向上し、プログラムがより読みやすくなります。

複数のreturnを使ったサンプルコード

複数の条件で異なる結果を返すために、関数内で複数のreturnを使うことがあります。

function 評価(score) {
    if (score >= 90) {
        return "優秀";
    } else if (score >= 70) {
        return "良好";
    } else if (score >= 50) {
        return "合格";
    } else {
        return "不合格";
    }
}

console.log(評価(85)); // 良好が表示される

この例では、スコアに応じて異なる評価が返されます。returnを使って複数の条件で処理を分けることで、明確な結果を得ることができます。

returnを使う際の注意点

「return」を使う際には、いくつかの注意点があります。特に、関数の処理の途中で使う場合、どのタイミングで処理が終了するのかをしっかり理解しておく必要があります。

早期終了のメリットとデメリット

関数の中で条件を満たしたときに早期に処理を終了させるために「return」を使うことがあります。これにより、無駄な処理を避けることができますが、複数の「return」が存在すると、どの条件でどのように終了するかが複雑になりがちです。コードの可読性が落ちないように注意しましょう。

関数の戻り値についての考え方

「return」で返す値は、単なる数値や文字列だけでなく、オブジェクトや配列など複雑なデータも返すことができます。この柔軟性を利用すると、プログラムを効果的に組み立てることができます。

breakの使い方とその役割

「break」はループ内で使われ、特定の条件が満たされたときにループを終了するために使います。ループが続いていると不要な処理が増えてしまう場合に便利です。

break文とは？どのように使うのか

「break」は、通常「for」や「while」などのループの中で使用され、条件が満たされたときにループを終了させます。

ループから抜けるためのbreakの役割

例えば、次のような「for」ループを考えてみます。

for (let i = 0; i < 10; i++) {
    if (i === 5) {
        break; // ループを終了する
    }
    console.log(i);
}

このコードでは、「i」が5になると「break」が実行されてループが終了します。そのため、コンソールには「0」から「4」までが表示されます。

if条件と組み合わせたbreakの例

「break」は「if」文と組み合わせて使うことが一般的です。たとえば、ユーザーからの入力を調べて特定の値が見つかったらループを終了させる、といった場合に使います。

let 数値 = [1, 3, 5, 7, 9, 12];
for (let i = 0; i < 数値.length; i++) {
    if (数値[i] === 7) {
        console.log("見つけました: " + 数値[i]);
        break; // 見つけたらループを終了する
    }
}

この例では、配列の中から「7」を見つけた時点でループを終了します。

複数のネストでのbreakの使用例

ネストされたループでbreakを使うと、どのループを終了するのか注意が必要です。

for (let i = 0; i < 3; i++) {
    for (let j = 0; j < 3; j++) {
        if (j === 1) {
            break; // 内側のループを終了する
        }
        console.log(`i: ${i}, j: ${j}`);
    }
}

この例では、内側のループが「j === 1」の時点で終了します。ネストの深さによってどのループが終了するのかを意識することが重要です。

breakを使う際の注意点

「break」を使うと、ループを途中で終わらせることができますが、その使用には注意が必要です。

無限ループを防ぐためのbreakの重要性

「while」ループなどは条件が常に満たされると無限に続いてしまうことがあります。このようなとき、「break」を使って明確に終了条件を設定することで無限ループを避けることができます。

let i = 0;
while (true) {
    if (i >= 5) {
        break; // iが5になったらループを終了する
    }
    console.log(i);
    i++;
}

この例では、「while」の条件が「true」なので無限ループになりますが、「break」を使うことで適切なタイミングで終了させています。

ネストされたループにおけるbreakの使い方

「break」はネスト（入れ子）されたループでも使えます。ただし、内側のループだけが終了するため、どのループを終了させているのかをしっかり理解することが重要です。ネストが深いと見落としがちなので、コメントを活用してコードをわかりやすくする工夫が必要です。

continueの使い方とその役割

次に、「continue」について説明します。「continue」は、現在のループの処理をスキップし、次の繰り返しに進むために使います。ループを完全に止めるのではなく、特定の処理を飛ばしたい場合に使われます。

continue文とは？どのように使うのか

「continue」は「break」と似ているように見えますが、ループ全体を終了するのではなく、現在の繰り返しを飛ばして次に進むという違いがあります。

ループをスキップするためのcontinueの使い方

以下の例で、「continue」を使って奇数だけをスキップして偶数のみを表示します。

for (let i = 1; i <= 10; i++) {
    if (i % 2 !== 0) {
        continue; // 奇数の場合はスキップする
    }
    console.log(i); // 偶数だけを表示する
}

このコードでは、「i」が奇数の場合に「continue」が実行されるため、「2」「4」「6」「8」「10」だけが表示されます。

forループとwhileループでのcontinueの実例

「continue」は「for」ループや「while」ループのどちらでも使用できます。次の例では、「while」ループを使った場合を見てみましょう。

let j = 0;
while (j < 10) {
    j++;
    if (j % 2 === 0) {
        continue; // 偶数の場合はスキップする
    }
    console.log(j); // 奇数のみを表示する
}

この例では、「continue」を使って偶数の場合に処理をスキップし、奇数だけを表示します。

continueを使った複雑な条件での使用例

次に、複雑な条件でcontinueを使う例を見てみましょう。

for (let i = 1; i <= 20; i++) {
    if (i % 3 === 0 || i % 5 === 0) {
        continue; // 3または5で割り切れる数はスキップする
    }
    console.log(i); // 3と5で割り切れない数を表示する
}

この例では、3または5で割り切れる数をスキップし、それ以外の数のみを表示します。複数の条件でcontinueを使うと、処理を細かくコントロールすることができます。

continueを使う際の注意点

「continue」を使うことで、特定の条件を満たした場合にスキップすることができますが、コードが複雑になる恐れもあります。

使い過ぎによるコードの可読性低下に注意

「continue」を使いすぎると、どの条件でスキップされるのかがわかりづらくなることがあります。特に、多くの条件が絡む場合には「continue」をうまく使うのは難しくなるため、必要最低限にとどめるようにしましょう。

より読みやすいコードを書くためのヒント

「continue」を使う代わりに、条件を整理して適切な「if」文を使うことで、よりわかりやすくシンプルなコードを書くことができます。特に他の開発者と協力する場合、コードの読みやすさは非常に重要です。

実際のコードでreturn, break, continueを使ってみよう

最後に、「return」「break」「continue」を実際のコード例で練習し、どのように使うべきかを確認しましょう。

簡単なサンプルコードで学ぶ使い方

returnを使った例

function 最大値(a, b) {
    if (a > b) {
        return a; // aがbより大きい場合はaを返す
    } else {
        return b; // bがaより大きい場合はbを返す
    }
}
console.log(最大値(5, 10)); // 10が表示される

breakを使った例

let 配列 = [1, 2, 3, 4, 5, 6, 7, 8, 9];
for (let i = 0; i < 配列.length; i++) {
    if (配列[i] === 5) {
        console.log("見つけた: " + 配列[i]);
        break; // 5を見つけたらループを終了する
    }
}

continueを使った例

for (let i = 1; i <= 10; i++) {
    if (i % 3 === 0) {
        continue; // 3で割り切れる数はスキップする
    }
    console.log(i); // 3, 6, 9を除いた数を表示
}

よくある間違いとその解決方法

• returnの誤用: 関数の中で「return」を使いすぎると、どこで処理が終わるのかがわかりづらくなります。1つの関数につき「return」を1か所にまとめるとわかりやすくなります。
• breakとcontinueの混同: 「break」と「continue」は似ていますが、目的が違います。ループ全体を終わらせる場合は「break」、特定の繰り返しをスキップする場合は「continue」を使うことを忘れないようにしましょう。

return, break, continueを効果的に使うためのヒント

直感的に理解するための図解

制御文の動きを理解するためには、フローチャートや図を使うと直感的に理解しやすくなります。各制御文がどのように処理の流れを変えるのかを視覚的に把握しましょう。

フローチャートで見る制御の流れ

• return: 処理の途中で終了し、関数の出口に進む。
• break: ループの中で特定の条件に該当した場合に出口へ進む。
• continue: 現在の処理を飛ばして次のループに進む。

使い方を工夫してコードをきれいにする方法

制御文を効果的に使うことで、コードをより短く、効率的に書くことができます。しかし、使いすぎると逆にわかりにくくなるので注意が必要です。常にコードのシンプルさを保つことを心がけましょう。

コードの読みやすさを保つためのベストプラクティス

• 複雑な条件の場合、処理を関数に分けてシンプルにする。
• ネストが深くならないように、必要に応じて「break」や「return」を活用してコードを短くする。

return, break, continueのまとめ

最後に、この記事で学んだ内容をまとめて確認しましょう。

return, break, continueの違いを再確認

• returnは関数を終了し、値を返すために使います。
• breakはループを終了させるために使います。
• continueはループ内の特定の処理をスキップするために使います。

次に学ぶべきJavaScriptの制御文とは？

「return」「break」「continue」を理解したら、次は他の制御文にも挑戦してみましょう。「switch文」や「throw文」なども学ぶことで、より複雑な処理ができるようになります。制御文をマスターすることで、JavaScriptの力を最大限に引き出せるようになります。

さいごに

この記事を通じて、「return」「break」「continue」の違いと、それぞれの使い方を理解できたでしょうか。これらを使いこなすことで、プログラムの流れを自在にコントロールできるようになります。ぜひ、実際にコードを書いて試してみてください。