[JavaScript入門]三項(条件)演算子の使い方！【9つの値で挙動検証】

今回はJavaScriptで三項(条件)演算子を使い方について書いています。
最初に三項演算子の使い方について書いています。
その後にいろいろな値を渡して、trueとfalseの判定がどうなるのか挙動検証してみたコードを載せています。

JavaScriptの三項(条件)演算子の使い方

JavaScriptの三項(条件)演算子は、条件が正しい(true)かを判断して２つのどちらかの値を返してくれる演算子です。
例えば、下記のように使用します。

let fruit = 'apple'
let result = fruit ==='apple' ? 'りんごです' : 'その他のフルーツです'
console.log(result) // 出力結果「りんごです」

上記では、fruit変数に’apple’という文字列を入れて、次の行で三項演算子を使用しています。
fruit ==='apple' が式として、trueになるので「りんごです」が返ってきます。

fruitに’apple’以外の文字列が入っていた場合は「その他のフルーツです」になります。
if文に似ていますが、上記のように1行で簡潔に書くことができます。

式を日本語化すると、下記のような形になります。

"条件" ? "条件の内容がtrueになる場合の値" : "条件の内容がfalseになる場合の値";

使いどころとしては、簡単な条件式(1行で書けるような)を書いて、結果を返してほしい場合に書くといいです。
複雑な条件を書く場合はif文を使うと良いかと思います。

三項演算子を使うときの注意点

三項演算子を使うときには、積み重ねて使用することを避けた方がいいです。
例として、下記のように重ねて使用することも可能です。

let color = 'red'
let food = true
let fruit = 'red'

let result = (color == 'red') ? ((food == true) ? ((fruit == 'red') ? '林檎' : 'それ以外の果物') : '果物でない') : '赤色でない';
console.log(result) // 「林檎」が出力される

このように使用することができますが、上記で見るようにわかりづらくなり、保守性も下がるため使用しない方がいいです。
三項演算子は積み重ねずに、単独で使用することが望ましいのではないでしょうか。

三項演算子を使用したサンプルコード

三項演算子にいろいろな値を渡して、どのように動くか検証してみました。

null

nullを条件に指定した場合です。

let result = null ? "trueです" : "falseです"
console.log(result)

「falseです」が出力されます。

undefined

undefinedを条件に指定した場合です。

let result = undefined ? "trueです" : "falseです"
console.log(result)

「falseです」が出力されます。

空変数

空変数を条件に指定した場合です。

let testEmpty
let result = testEmpty ? "trueです" : "falseです"
console.log(result)

何も設定されていない変数はundefinedになります。
そのため、こちらも「falseです」が出力されます。

空配列

空配列を条件に指定した場合です。

let result = [] ? "trueです" : "falseです"
console.log(result)

空配列はtrueに判定されて、「trueです」が出力されます。

文字列

文字列を指定した場合です。

let result = "abc" ? "trueです" : "falseです"
console.log(result)

「trueです」が出力されます。

空文字列

空の文字列を指定した場合です。

let result = "" ? "trueです" : "falseです"
console.log(result)

空の文字列の場合は、通常の文字列と違って「falseです」が出力されます。

0

0を指定した場合です。

let result = 0 ? "trueです" : "falseです"
console.log(result)

「falseです」が出力されます。

正数

正数を指定した場合です。

let result = 99 ? "trueです" : "falseです"
console.log(result)

「trueです」が出力されます。

負数

負数を指定した場合です。

let result = -9999 ? "trueです" : "falseです"
console.log(result)

「trueです」が出力されます。

検証結果

挙動を検証した結果を表にすると下記のようになりました。

空配列と負数がtrueになるのが意外な気がしました。
気をつけて使っていきたいところです。