More than 5 years have passed since last update.

【JavaScript】制御構文まとめ

Last updated at 2019-10-15Posted at 2019-10-14

1. if

記述の仕方

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

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

let number = 5;

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

実行結果:5未満です

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

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

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

let number = 5;

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

実行結果:5以上です

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

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

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

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

実行結果 0 1 2 3 4

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

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

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

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

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

実行結果 0 1 2 3 4

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

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

switch ( 式 ) {
  case 値:
    // 処理
    break;
 
  case 値:
    // 処理
    break;
    
  case 値: 
    //必要なだけcaseを追加
}

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

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

let number = 5;

while (number < 5) {
  number++;

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

実行結果 1 3

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

let number = 5;

while (number < 5) {
  number++;

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

実行結果:1

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