概要

三項演算子のネストについての記事をあまり見つけることができなかったので、少し多くネストさせてみました。

実際にネストさせてみる

この三項演算子の結果はどのようになると思いますか？
予想してみましょう！

const prefecture = ["Tokyo", "Osaka", "Kyoto", "Aichi"];

prefecture.length < 4
  ? prefecture.push("Aichi")
  : prefecture.length === 1
  ? prefecture.push("Osaka")
  : prefecture.length === 2
  ? prefecture.push("Kyoto")
  : !prefecture.length
  ? prefecture.push("Tokyo")
  : console.log(prefecture);

console.log(prefecture);

結果

["Tokyo", "Osaka", "Aichi", "Aichi"]
["Tokyo", "Osaka", "Aichi", "Aichi"]

prefecture変数のlengthが4なのでどの条件にも当てはまらず、console.logが2回実行されました。

if文だとこうなる


const prefecture = ["Tokyo", "Osaka", "Kyoto", "Aichi"];

if (prefecture.length < 4) {
  prefecture.push("Aichi");
} else if (prefecture.length === 1) {
  prefecture.push("Osaka");
} else if (prefecture.length === 2) {
  prefecture.push("Kyoto");
} else if (!prefecture.length) {
  prefecture.push("Tokyo");
} else {
  console.log(prefecture);
}

console.log(prefecture);

こうすれば見慣れた感じになるので少しだけ整理ができると思います。

どれだけ三項演算子をネストさせても、AでなければBということを覚えておくだけで、実装中にごちゃごちゃになることは防ぐことができると思います。
もし、ごちゃごちゃになりそうだったら、コメントを残していくのもいいですね。

const prefecture = ["Tokyo", "Osaka", "Kyoto", "Aichi"];

// lengthが4より少なければprefecture.push("Aichi")
  prefecture.length < 4
  ? prefecture.push("Aichi")

// lengthが1であればprefecture.push("Osaka")
  : prefecture.length === 1
  ? prefecture.push("Osaka")

// lengthが2であればprefecture.push("Kyoto")
  : prefecture.length === 2
  ? prefecture.push("Kyoto")

// lengthが0であればprefecture.push("Tokyo")
  : !prefecture.length
  ? prefecture.push("Tokyo")

// 上記の条件がどれも当てはまらなければconsole.log(prefecture)
  : console.log(prefecture);

console.log(prefecture);

さいごに

開発中のコードは上記のようにシンプルなものではないと思います。
特にJSXで三項演算子を実装すると、もっと複雑になりそうですよね。
ですが、どれだけ複雑になろうと処理方法は変わらないので自分のソースコードを整理しながら実装していくのが自分にも読み手にも優しいのかなと思いました。