JavaScriptでループを抜ける方法5選！初心者も分かる徹底解説

はじめに
●JavaScriptループとは
- ○forループ
- ○whileループ
●ループを抜ける方法5選
●注意点と対処法
まとめ

はじめに

この記事を読めば、JavaScriptループを抜ける方法を5つマスターすることができます。

ループ処理はJavaScriptでよく使用される技術ですが、初心者にとっては難しいと感じることがあります。

そこで、この記事では初心者目線でループを抜ける方法を徹底解説します。

サンプルコードも豊富に用意しているため、実際に手を動かしながら学ぶことができます。

●JavaScriptループとは

ループとは、プログラムの一部を繰り返し実行する処理です。

JavaScriptでは主に2種類のループが使われます。

○forループ

forループは、繰り返し回数があらかじめ決まっている場合に使用されます。

構文は下記のようになります。

for (初期化式; 条件式; 更新式) {
  // 繰り返し実行される処理
}

○whileループ

whileループは、繰り返し回数があらかじめ決まっていない場合に使用されます。

構文は下記のようになります。

while (条件式) {
  // 繰り返し実行される処理
}

●ループを抜ける方法5選

ループを抜ける方法として、下記5つの方法を紹介します。

それぞれの方法について、サンプルコードと詳細な説明を用意しています。

○サンプルコード1：ブレイク文を使う

ブレイク文は、ループ処理の途中でループを終了させることができます。

下記のサンプルコードでは、配列の要素を順番に出力し、値が5になった時点でループを終了しています。

const numbers = [1, 2, 3, 4, 5, 6, 7, 8, 9];

for (let i = 0; i < numbers.length; i++) {
  if (numbers[i] === 5) {
    break; // 値が5の時にループを抜ける
  }
  console.log(numbers[i]);
}

○サンプルコード2：コンティニュー文を使う

コンティニュー文は、ループ処理の途中で次の繰り返しにスキップすることができます。

下記のサンプルコードでは、配列の要素を順番に出力し、値が偶数の場合は出力をスキップしています。

const numbers = [1, 2, 3, 4, 5, 6, 7, 8, 9];

for (let i = 0; i < numbers.length; i++) {
  if (numbers[i] % 2 === 0) {
    continue; // 値が偶数の時に次の繰り返しにスキップ
  }
  console.log(numbers[i]);
}

○サンプルコード3：return文を使う

関数内のループであれば、return文を使ってループを抜けることができます。

下記のサンプルコードでは、配列の要素を順番に出力し、値が5になった時点で関数から抜けています。

const numbers = [1, 2, 3, 4, 5, 6, 7, 8, 9];

function printNumbers() {
  for (let i = 0; i < numbers.length; i++) {
    if (numbers[i] === 5) {
      return; // 値が5の時に関数から抜ける
    }
    console.log(numbers[i]);
  }
}

printNumbers();

○サンプルコード4：フラグ変数を使う

フラグ変数を使って、ループを抜けるタイミングを制御することができます。

下記のサンプルコードでは、値が5になった時点でループを終了しています。

const numbers = [1, 2, 3, 4, 5, 6, 7, 8, 9];
let shouldBreak = false;

for (let i = 0; i < numbers.length && !shouldBreak; i++) {
  if (numbers[i] === 5) {
    shouldBreak = true; // 値が5の時にフラグを立ててループを抜ける
  } else {
    console.log(numbers[i]);
  }
}

○サンプルコード5：例外処理を使う

例外処理を使って、ループを抜けることができます。

下記のサンプルコードでは、値が5になった時点でループを終了しています。

const numbers = [1, 2, 3, 4, 5, 6, 7, 8, 9];

try {
  numbers.forEach((number) => {
    if (number === 5) {
      throw new Error("値が5になったのでループを抜けます。");
    }
    console.log(number);
  });
} catch (error) {
  console.log(error.message);
}