【JavaScript】三項演算子の使い方 | if文との使い分けも解説します

条件式 ? 式1 : 式2

const word = "傍楽ブログ"

return word.length == 0 ? "空っぽです" : "文字が存在します"

# 実行結果
=> "文字が存在します"

const number_1 = 10;
const number_2 = 11;
let max_number = 0;

// if文で記述した場合
if (number_1 < number_2) {
  max_number = number_2;
} else {
  max_number = number_1;
}

// 三項演算子で記述した場合
max_number = number_1 < number_2 ? number_2 : number_1;

console.log("最大値:" + max_number);
=> "最大値: 11"

const number = 10

# if文を使用する場合
if (number == 10) {
  console.log("数字は10です")
} else if (number >= 100) {
  console.log("数字は100以上です")
} else if (number >= 1000) {
  console.log("数字は1000以上です")
} else {
  console.log("ものすごく大きな数字です")
}

# 三項演算子に置き換えた場合
console.log(
  number == 10 ? "数字は10です" :
  number >= 100 ? "数字は100以上です" :
  number >= 1000 ? "数字は1000以上です" :
  "ものすごく大きな数字です";
)

let year = 2003;

if (year % 4 == 0) {
  if (year % 100 == 0) {
    year % 400 == 0 ? console.log("うるう年です") : console.log("うるう年ではありません");
  } else {
    console.log("うるう年です");
  }
} else {
  console.log("うるう年ではありません");
}

let year = 2003;

year % 4 == 0 ?
  year % 100 == 0 ?
      year % 400 == 0 ? console.log(year + "年はうるう年です")
      : console.log(year + "年はうるう年ではありません")
  : console.log(year + "年はうるう年です")
: console.log(year + "年はうるう年ではありません");

let product1 = {
    name: 'りんご',
    price: 120
};

let product2 = {
    name: 'みかん',
    price: 180
}

// 三項演算子は改行可能
// 結果：りんごがみかんよりも高い
product1.price > product2.price 
? console.log(product1.name + "が"+ product2.name +"よりも高い。") 
: console.log(product2.name + "が"+ product1.name +"よりも高い。");

let age = 15;
let smartphone_fee_base = 12000;

let smartphone_fee_real = (
  age >= 65
  ? smartphone_fee_base * 0.8 // 65歳以上は2割引
  : age < 13
  ? smartphone_fee_base * 0.5 // 小学生は半額
  : age < 16
  ? smartphone_fee_base * 0.6 // 中学生は4割引
  : age < 19
  ? smartphone_fee_base * 0.7 // 高校生は3割引
  : smartphone_fee_base       // 上記以外は割引なし
);

console.log("携帯料金：" + smartphone_fee_real + "円");
=> "携帯料金：7200円"

if (age >= 65) {
  smartphone_fee_real = smartphone_fee_base * 0.8; // 65歳以上は2割引
} else if(age < 13) {
  smartphone_fee_real = smartphone_fee_base * 0.5; // 小学生は半額 
} else if(age < 16) {
  smartphone_fee_real = smartphone_fee_base * 0.6; // 中学生は4割引  
} else if(age < 19) {
  smartphone_fee_real = smartphone_fee_base * 0.7; // 高校生は3割引  
} else {
  smartphone_fee_real = smartphone_fee_base; // 上記以外は割引なし
}

let age = 15;
let smartphone_fee_base = 12000;

// 分岐後の処理を複数続けるには
// (処理, 処理)のように記述する
age >= 65 ? (
  smartphone_fee_real = smartphone_fee_base * 0.8,
  console.log("シニア割引を適用しました")  // 65歳以上は2割引
) : age < 13 ? (
  smartphone_fee_real = smartphone_fee_base * 0.5,
  console.log("小学生割引を適用しました")  // 小学生は半額
) : age < 16 ? (
  smartphone_fee_real = smartphone_fee_base * 0.6,
  console.log("中学生割引を適用しました")  // 中学生は4割引
) : age < 19 ? (
  smartphone_fee_real = smartphone_fee_base * 0.7,
  console.log("高校生割引を適用しました") // 高校生は3割引
) : smartphone_fee_real = smartphone_fee_base; // 上記以外は割引なし

console.log("携帯料金：" + smartphone_fee_real + "円");
=> "携帯料金：7200円"