条件（三項）演算子

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since 2015年7月.

条件（三項）演算子は JavaScript では唯一の、 3 つのオペランドをとる演算子です。条件に続いて疑問符 (?)、そして条件が真値であった場合に実行する式、コロン (:) が続き、条件が偽値であった場合に実行する式が最後に来ます。この演算子は、 if...else 文の代替としてよく用いられます。

試してみましょう

function getFee(isMember) {
  return isMember ? "$2.00" : "$10.00";
}

console.log(getFee(true));
// 予想される結果: "$2.00"

console.log(getFee(false));
// 予想される結果: "$10.00"

console.log(getFee(null));
// 予想される結果: "$10.00"

構文

condition ? exprIfTrue : exprIfFalse

引数

condition

値が条件として使用される式です。

exprIfTrue

condition が真値 (true と等しいか、 true に変換できる値) と評価された場合に評価される式です。

exprIfFalse

condition が偽値 (false と等しいか、 false に変換できる値) と評価された場合に評価される式です。

js
const age = 26;
const beverage = age >= 21 ? "ビール" : "ジュース";
console.log(beverage); // "ビール"

null 値の扱い

よくある使い方の一つに、 null になる可能性がある値を扱うというものがあります。

js
const greeting = (person) => {
  const name = person ? person.name : "お客さん";
  return `やあ、${name}`;
};

console.log(greeting({ name: "アリス" })); // "やあ、アリス"
console.log(greeting(null)); // "やあ、お客さん"

条件の連鎖

三項演算子は右結合なので、以下のような方法で if … else if … else if … else の連鎖と同様に「連鎖」させることができます。

js
function example() {
    return condition1 ? value1
         : condition2 ? value2
         : condition3 ? value3
         : value4;
}

これは次の if...else の連鎖と同じです。

js
function example() {
  if (condition1) {
    return value1;
  } else if (condition2) {
    return value2;
  } else if (condition3) {
    return value3;
  } else {
    return value4;
  }
}