JavaScript break活用！7つの例で理解しよう

はじめに

この記事を読めば、JavaScriptのbreak文を使って繰り返し処理を効率的に制御する方法が身につきます。

初心者の方でも理解できるよう、サンプルコードを交えてわかりやすく解説していきます。

応用例も紹介するので、ぜひ活用してみてください。

●JavaScriptのbreak文とは

○break文の基本

JavaScriptのbreak文は、繰り返し処理の中で使われる制御文です。

break文が実行されると、現在の繰り返し処理が終了し、その後の処理に移ります。

主にforループやwhileループ、switch文で使用されます。

●break文の使い方

○サンプルコード1：forループでのbreak文

このコードではforループを使って0から9までの数字を表示するコードを紹介しています。

この例では、数字が5になった時点でループを終了しています。

for (let i = 0; i < 10; i++) {
  if (i === 5) {
    break;
  }
  console.log(i);
}

○サンプルコード2：whileループでのbreak文

このコードではwhileループを使って0から9までの数字を表示するコードを紹介しています。

この例では、数字が5になった時点でループを終了しています。

let i = 0;
while (i < 10) {
  if (i === 5) {
    break;
  }
  console.log(i);
  i++;
}

○サンプルコード3：switch文でのbreak文

このコードではswitch文で曜日に応じたメッセージを表示するコードを紹介しています。

この例では、break文を使って各caseの処理を終了しています。

let day = "月";
switch (day) {
  case "月":
    console.log("月曜日は始まりの日");
    break;
  case "火":
    console.log("火曜日は勉強の日");
    break;
  case "水":
    console.log("水曜日は練習の日");
    break;
  default:
    console.log("木曜日以降");
    break;
}

●応用例とサンプルコード

○サンプルコード4：条件に一致した要素の検索

このコードでは配列の中から条件に一致する要素を検索し、最初に見つかった要素を表示するコードを紹介しています。

この例では、配列の要素が偶数の場合にループを終了しています。

const numbers = [1, 3, 5, 8, 9];
let firstEven = null;

for (const num of numbers) {
  if (num % 2 === 0) {
    firstEven = num;
    break;
  }
}

console.log("最初の偶数は", firstEven);

○サンプルコード5：ネストしたループからの脱出

このコードでは、二重のforループを使って、行列の中から条件に一致する要素を探しています。

条件に一致したらループから脱出するために、break文を使用しています。

const matrix = [
  [1, 2, 3],
  [4, 5, 6],
  [7, 8, 9],
];
let foundValue = null;

outerLoop: for (let i = 0; i < matrix.length; i++) {
  for (let j = 0; j < matrix[i].length; j++) {
    if (matrix[i][j] === 5) {
      foundValue = matrix[i][j];
      break outerLoop;
    }
  }
}

console.log("見つかった値:", foundValue);

○サンプルコード6：特定の条件で処理をスキップ

このコードでは、forループで配列の要素を表示する際、特定の条件に当てはまる要素をスキップする方法を紹介しています。

この例では、3の倍数の要素は表示しないようにしています。

for (let i = 1; i <= 10; i++) {
  if (i % 3 === 0) {
    continue;
  }
  console.log(i);
}

○サンプルコード7：ループの途中からの再開

このコードでは、whileループで条件に一致するまで処理を繰り返し、条件に一致したら次のループへ移る方法を紹介しています。

この例では、3の倍数を見つけるためにループを使用しています。

let i = 1;

while (i <= 10) {
  if (i % 3 === 0) {
    console.log("3の倍数:", i);
    i++;
    continue;
  }
  console.log(i);
  i++;
}

●注意点と対処法

break文を使う際は、無限ループに陥らないように注意が必要です。

特にwhileループでは条件を満たさないままループから抜けられなくなることがあります。

適切な条件とタイミングでbreak文を使用することで、無限ループを防ぐことができます。

また、break文は繰り返し処理の途中でループを終了させるために使われますが、過剰に使用するとコードの可読性が低下することがあります。

適切な箇所でbreak文を使用し、コードの可読性を保つことが重要です。

●カスタマイズ方法

break文を活用して、繰り返し処理をカスタマイズすることができます。

例えば、特定の条件でループを終了させたい場合や、ネストされたループから一度に抜け出す場合にbreak文を使うことで、効率的に処理を行うことができます。

また、ループ内で条件に応じて処理をスキップしたい場合は、continue文を使うことができます。

これにより、ループの途中で条件を満たさない要素をスキップし、次の繰り返し処理に進むことができます。

まとめ

この記事では、JavaScriptのbreak文の基本的な使い方や応用例について解説しました。

break文を適切に使うことで、繰り返し処理を効率的に制御し、コードの可読性や実行速度を向上させることができます。

ぜひ実践してみて、自分のプロジェクトに活かしてください。