【JavaScript】制御構文まとめ

目次

1. if
2. else
3. for
4. while
5. switch
6. continueとbreak

1. if

記述の仕方

if (条件式) {
  // 処理
}

条件式がtrueだった場合中にある処理を実行する。

let number = 5;

if (number < 5) {
  console.log("５未満です");
}

実行結果:5未満です

2. else

先ほどのif構文の条件式を満たさなかった場合の処理をelseで書くことができます。

if (条件式)　{
  // 処理
}
else {
  // ifがfalseだった場合の処理
}

上記のif構文がfalseだった場合

let number = 5;

if (number > 5) {
  console.log("５未満です");
}
else {
  console.log("5以上です");
}

実行結果:5以上です

3. for

繰り返し(ループ)の構文になります。
ループする回数が決まっている場合はこちらのforを使います。

for (条件式) {
  // 処理
}

条件式にはループが続く条件を記述します。
一般的にforでは変数iをループカウンタとして宣言して条件式を書きます。

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

実行結果
0
1
2
3
4

条件式の()の中は
( ループカウンタの宣言; ループが続く条件; 変数の更新 )で記述します。
今回の場合みたいなコードだと変数の更新をしないと、無限ループになってしまうので忘れずに。

while

こちらも繰り返し(ループ)の構文になります。
forとは違って主に、ループする回数が明確ではない場合に使用します。

while (条件式) {
  // 処理
}

条件式の内容がtrueの間中処理を繰り返します。

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

実行結果
0
1
2
3
4

forの時は条件式の中で変数の更新ができましたが、
whileでは処理の中でしなければなりません。

switch

複数の条件分岐を書く場合にswitchが便利。

switch ( 式 ) {
  case 値:
    // 処理
    break;

  case 値:
    // 処理
    break;

  case 値: 
    //必要なだけcaseを追加
}

式の値ごとに処理を書いていきます。
breakについては後述します。

continueとbreak

continueとbreakはそれぞれループを抜けるためのものになります。

• continueは処理を中止して、次の処理を行います。

let number = 5;

while (number < 5) {
  number++;

  if (number % 2 === 0) continue;
  console.log(number);
}

実行結果
1
3

上の結果はnumberの値が偶数の時だけそれ以降の処理を行わないというものになります。
なので、出力結果は奇数だけになります。

• breakは処理を中止してループから抜けます。 continueと違って次の処理に行くわけではなく、ループから完全に抜けます。

let number = 5;

while (number < 5) {
  number++;

  if (number % 2 === 0) break;
  console.log(number);

実行結果:1

numberの値が偶数だったら処理を中断してループから抜けます。
なので、numberが2になった途端にループから抜けるので出力結果が1だけになります。