• Home
  • Web制作
  • JavaScriptループ制御の極意！breakとcontinueでコードを自由自在に操る

JavaScriptループ制御の極意！breakとcontinueでコードを自由自在に操る

schedule
Tags: JavaScript

はじめに：ループ処理を使いこなすための必須知識！breakとcontinueとは？

JavaScriptで繰り返し処理を行う際に欠かせないのが「ループ」です。 そして、このループ処理をより自由自在に操るための強力なツールとなるのが break と continue です。

break は、ループ処理を途中で強制終了したい場合に利用します。 一方、 continue は、ループ内の特定の処理をスキップし、次のループ処理へ移行したい場合に役立ちます。

これらのキーワードを理解し、使いこなせるようになれば、より効率的で可読性の高いJavaScriptコードを書くことができるようになります。 本記事では、 break と continue について、豊富な具体例を交えながら詳しく解説していきます。

break：ループ処理からの脱出！

break は、ループ処理の途中で処理を中断し、ループの外側に処理を移したい時に使用します。 例えば、特定の条件を満たした時点でループを終了したい場合などに有効です。

breakの基本的な使い方

break は、 for ループや while ループなどのループ処理の中で使用します。

for (let i = 0; i < 10; i++) {
  if (i === 5) {
    break; // iが5になったらループを抜ける
  }
  console.log(i); // 0, 1, 2, 3, 4と出力される
}

上記コードでは、 i が5になった時点で break が実行され、ループ処理が終了します。 そのため、コンソールには0から4までの数字が出力されます。

breakの実践的な活用例

break は、配列の中から特定の値を検索する際など、様々な場面で活用できます。

const numbers = [1, 3, 5, 7, 9, 11];

for (let i = 0; i < numbers.length; i++) {
  if (numbers[i] === 7) {
    console.log("7を発見！ループを終了します。");
    break;
  }
}

上記コードでは、配列 numbers の中から数値 7 を検索し、見つかった時点でループを終了します。

continue：次のループ処理へジャンプ！

continue は、ループ処理の中で、特定の条件を満たす場合に、その周回の処理をスキップし、次のループ処理へ移行したい時に使用します。

continueの基本的な使い方

continue も、 break と同様に for ループや while ループなどのループ処理の中で使用します。

for (let i = 0; i < 10; i++) {
  if (i % 2 === 0) {
    continue; // 偶数の場合は、以降の処理をスキップ
  }
  console.log(i); // 1, 3, 5, 7, 9と出力される
}

上記コードでは、 i が偶数の場合は continue により、 console.log(i) が実行されずに次のループ処理に移ります。 そのため、コンソールには奇数の数字のみが出力されます。

continueの実践的な活用例

continue は、特定の条件を満たすデータを処理対象から除外したい場合などに便利です。

const data = [
  { name: "りんご", price: 100 },
  { name: "みかん", price: 50 },
  { name: "バナナ", price: 80 },
  { name: "ぶどう", price: 200 },
];

for (let i = 0; i < data.length; i++) {
  if (data[i].price >= 150) {
    continue; // 価格が150円以上の場合は、以降の処理をスキップ
  }
  console.log(data[i].name + "は、お買い得です！");
}

上記コードでは、価格が150円以上の果物は処理対象から除外し、「お買い得です！」というメッセージは出力しないようにしています。

まとめ：breakとcontinueを使いこなして、より洗練されたコードを書こう！

本記事では、JavaScriptのループ処理において重要な役割を果たす break と continue について解説しました。

これらのキーワードを活用することで、ループ処理をより柔軟に制御し、効率的かつ可読性の高いコードを書くことができるようになります。

ぜひ、 break と continue を使いこなして、より洗練されたJavaScriptプログラミングを目指しましょう！

関連記事