【さんこうえんざんし】
三項演算子 とは？
最終更新:
💡 条件に応じて、2つの式から片方の値を選ぶ
3つの項を取る演算子。JavaScriptでは「条件 ? 真の場合の式 : 偽の場合の式」という条件演算子を指す。条件の評価に応じて片方の式だけを評価し、その値を式全体の結果にする。
📌 このページのポイント
- JavaScriptでは「条件 ? 真の場合 : 偽の場合」と書く
- 条件はtruthy/falsyとして判定し、選んだ側だけを評価する
- 式なので、代入やreturn、JSXの式の位置に使える
- 入れ子も書けるが、複雑な分岐は読みやすさを考える
ひよこ if文を1行にするだけ？
ペンギン先生 JavaScriptの条件演算子は値を持つ式だよ。たとえばconst label = age >= 18 ? "成人" : "未成年";と代入できる。1行かどうかより、条件で値を選ぶところがポイントなんだ。
ひよこ 両方の式を実行してから選ぶ？
ペンギン先生 条件を先に判定し、選んだ片方だけを評価するよ。age >= 18が真なら"成人"、偽なら"未成年"になる。条件にはtrue/false以外も使え、0や空文字などはfalsyとして扱うんだ。
ひよこ Reactでも使える？
ひよこ 入れ子は絶対に禁止？
ペンギン先生 言語としては使えるよ。JavaScriptでは右から結びつくので、条件を連ねた式も書ける。ただし深くなると追いにくい。改行や括弧、変数への分離、ifなどを使い、読み手が判断できる形を選ぶんだ。
ひよこ 値がなければ既定値にする??と同じ？
ペンギン先生 違うよ。value ?? "既定"はnullとundefinedのときだけ既定値を選ぶ。value ? value : "既定"では0や空文字も既定値になる。同じ動作だと置き換えないようにするんだ。
📖 おまけ：英語の意味
「Ternary operator」 ＝ 3つの項を取る演算子
💬 Ternaryは3つのという意味だよ。JavaScriptの条件演算子では、条件と、真の場合・偽の場合の式という3つの項を使うんだ。