More than 1 year has passed since last update.

【JavaScript】条件分岐（if文・三項演算子）

Posted at 2022-07-07

if文

■もし条件式1ならば処理1を実行する

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

■もし条件式1ならば処理1を実行、違う場合は処理2をする

if (条件式1) {
  処理1
} else {
  処理2
}

■もし条件式1ならば処理1を実行、
条件式1には当てはまらないが、条件式2に当てはまれば処理2を実行、
違う場合は処理3をする

if (条件式1) {
  処理1
} else if (条件式2) {
  処理2
} else {
  処理3
}

■if文のショートカットとしてよく用いられます。

(条件式) ? "true(trueに変換できる値)" : "false(falseに変換できる値)"

※条件式を囲んでいる()は必須ではないです。

例えば、以下の様なif文があったとします。

const price = 1000;

if (price < 500) {
  console.log("安い");
} else if (price > 1500) {
  console.log("高い");
} else {
  console.log("普通");
}

三項演算子では以下の様になります。

const price = 1000;
const result = (price < 500) ? "安い" : (price > 1500) ? "高い" : "普通";
console.log(result);

三項演算子では簡潔に書くことができました。

また三項演算子は、簡潔な分岐処理である、
「if (条件式) { 処理 } else { 処理 }」で表せる場合に適用するのに留めるのがポイントです。

if文はネストが深くなってしまい、見ずらい・バグが多くなると言われています。