JavaScript

【JavaScript】三項演算子を入れ子にする

作成日：2022年07月07日

更新日：2022年07月07日

三項演算子は『?』と『:』で条件式を書くことができます。

例えば、items の 1 番目がバナナの場合、結果が果物になり、バナナ以外の場合、結果が食べ物になる三項演算子をかくと、

js
const items = ["バナナ", "ナス", "ハマチ"];

const text = items[0] === "バナナ" ? "果物" : "食べ物";

となります。

例えば、items の 1 番目がバナナ場合、結果が果物になりますが、1 番目がバナナではなく、2 番目がナスの場合、結果が野菜になるようにします。

その場合の三項演算子は、果物の後に『:』を追加し、ナスの場合の三項演算子を追加します。

js
const items = ["バナナ", "ナス", "ハマチ"];

const text =
  items[0] === "リンゴ" ? "果物" : items[1] === "ナス" ? "野菜" : "食べ物";

items の 1 番目がリンゴの場合：果物

items の 1 番目がリンゴではなく、items の 2 番目がナスの場合：野菜

上記以外の場合：食べ物

また、以下の場合でも三項演算子として成立しますが、読み取るのに難しくなってしまいます。

js
const items = ["バナナ", "ナス", "ハマチ"];

const text =
  items[0] === "バナナ" ? (items[1] === "ナス" ? "野菜" : "果物") : "食べ物";

items の 1 番目がバナナかつ items の 2 番目がナスの場合：野菜

items の 1 番目がバナナかつ items の 2 番目がナス以外の場合：果物

items の 1 番目がバナナ以外の場合：食べ物

と、初めの三項演算子と結果が変わってくるので、気をつけましょう。

お知らせ

私事ですが、Udemyで初心者を対象にしたReactの動画コースを作成しました。

Reactについて興味がありましたら、ぜひ下のリンクからアクセスしてください。

詳しくはこちら（Udemyの外部サイトへ遷移します）