astris.design

［JS］条件分岐一覧 if, switch, ?:, &&, ||, ??

JavaScriptには、if文、switch文、条件演算子（?:）、短絡評価（||, &&）、Null合算演算子（??）の、6つの条件分岐構文があります。それぞれの構文の違いと使い分けについて、解説します（サンプルあり）。

【目次・JavaScriptの条件文】

if文：汎用

if文は、条件式の真偽によって、処理を分岐します。
if文の条件式が真である場合、if文の処理が実行されます。
else if文によって、分岐の条件を増やすことができ、最初に条件が合致したif文またはelse if文の処理だけが実行されます。
else節の処理は、どの条件式も偽である場合に、実行されます。
else if文とelse節は、省略することができます。

条件式の真偽は、boolean（true/false）だけでなく、文字列や数値などでも判定されます。
false, 空文字列（''）, 0, NaN, null, undefinedは、偽と判定され、falsyな値と呼ばれます。
falsyな値以外は、全て真と判定されます。

構文
if ( 条件式1 ) {
  条件式1が真の場合に実行する処理
} else if ( 条件式2 ) {
  条件式1が偽であり、条件式2が真の場合に実行する処理
...
} else {
  どの条件式も偽の場合に実行する処理
}

サンプル

if.js
let score = 82;
if (score > 79) {
  console.log('Great!');
  //「Great!」
} else if (score > 49) {
  console.log('Normal');
} else {
  console.log('Bad');
}

switch文：場合分け

switch文は、条件式の値が複数の選択肢のどれに一致するかによって、処理を分岐します。
条件式の値とcaseラベルの値が一致する場合、case節の処理が実行されます。
switch文は、条件に合致するcaseラベルにジャンプするだけで、if文のように分岐した処理から自動的に抜けません。
そのため、break文を記述しないと、ジャンプ先以降の全ての処理が実行されてしまいます。
このフォールスルーの挙動を意図的に利用することもできますが、不具合の元になりやすいため、case節はbreak文とセットと考えた方がいいでしょう。
また、値の比較は、厳密な等価演算子（===）と同等であり、データ型も一致している必要があります。

default節の処理は、条件がどのcaseラベルにも一致しなかった場合に、実行されます。
default節は省略することができますが、条件不一致の場合の挙動を明確にするために、処理を空として記述する方が丁寧なコーディングとなります。

構文
switch ( 条件式 ) {
  case 値1:
    条件式===値1が真の場合に実行する処理
    break;
  case 値2:
    条件式===値2が真の場合に実行する処理
    break;
  ...
  default:
    どのcase句も不一致の場合に実行する処理
}

サンプル

switch.js
let lang = 'ja';
switch (lang) {
  case 'en':
    console.log(`language: English`);
    break;
  case 'ja':
    console.log(`language: Japanese`);
    //「language: Japanese」
    break;
  case 'fr':
    console.log(`language: French`);
    break;
  default:
    console.log(`language: others`);
}

条件演算子 ?:：値の切り替え

条件演算子（?:）は、条件式の真偽によって、異なる値を返します。
条件式が真の場合は二番目の式の値が返され、偽の場合は三番目の式の値が返されます。
3つの式を受け取るため、三項演算子とも呼ばれます。
変数に代入する値を条件によって切り替える処理を、一行ですっきり記述することができます。

構文
条件式 ? 条件式が真の場合に実行する式 : 条件式が偽の場合に実行する式

サンプル

condition.js
const onReal = true;
const pi = onReal ? Math.PI : 3;
console.log(pi);
//「3.141592653589793」

論理積演算子 &&：変数の定義チェック

論理積演算子（&&）は、左辺が真の場合は右辺を評価して右辺の値を返し、左辺が偽の場合は右辺は評価せず左辺の値を返します。
この短絡評価（ショートカット演算）を、条件分岐に利用することができます。
&&演算子を利用して、変数が定義されている場合のみプロパティを参照する処理を実装し、TypeErrorを防止することができます。

構文
条件式 && 条件式が真の場合に評価する式

サンプル

shortcut_amp.js
let object = { id: 1, name: 'Eich', job: 'Engineer' };
object && console.log(`job: ${object.job}`);
// 「job: Engineer」

論理和演算子 ||：デフォルト値設定

論理和演算子（｜｜）は、左辺が偽の場合は右辺を評価して右辺の値を返し、左辺が真の場合は右辺は評価せず左辺の値を返します。
この短絡評価（ショートカット演算）を、条件分岐に利用することができます。
｜｜演算子を利用して、変数にデフォルト値をセットする処理を実装することができます。
条件式の値がfalsy（0や空文字列も含む）の場合に、デフォルト値がセットされます。
0や空文字列を変数にセットする場合は、次に紹介するNull合体演算子を使用します。

構文
条件式 || 条件式が偽の場合に評価する式

サンプル

shortcut_pipe.js
let maxValue = 0;
const max = maxValue || 100;
console.log(max);
//「100」

Null合算演算子 ??：デフォルト値設定

Null合体演算子（??）は、左辺がnullかundefinedの場合は右辺を評価して右辺の値を返し、左辺がそれら以外の場合は右辺は評価せず左辺の値を返します。
??演算子は、論理和演算子の短絡評価のように、デフォルト値を設定するのに使用されます。
??演算子は、ES2020で既定されました。

構文
条件式 ?? 条件式がnullかundefinedの場合に評価する式

サンプル

null_coalescing.js
let user;
const id = user ?? 'guest';
console.log(id);
//「guest」

まとめ

JavaScriptの条件分岐について、解説しました。
JavaScriptには、if文、switch文、条件演算子（?:）、短絡評価（&&,｜｜）、Null合算演算子（??）の、6つの条件分岐構文があります。
それぞれの用途は、以下のようになります。

  • if文：汎用
  • switch文：場合分け
  • ?:演算子：値の切り替え
  • &&演算子：変数の定義チェック
  • ||演算子：デフォルト値設定
  • ??演算子：デフォルト値設定

どのような条件分岐も、汎用のif文で記述することができますが、他の構文を活用することで、処理内容が分かりやすくなったり、コードを簡潔に記述したりすることができます。