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

JavaScript

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

PR

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

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

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です」が出力されます。

検証結果

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

指定した値結果
nullfalse
undefinedfalse
testEmpty(空変数)false
[]true
“abc”true
“”false
0false
99true
-9999true

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

JavaScriptプログラミング
独学に限界を感じたら、オンラインのプログラミングスクールへ...
  • Code ViIlage
      挫折させない本気のプログラミングスクール。学習継続率93.3%・卒業生800名以上。
  • DMM WEBCAMP
      働きながら自分のペース学んでエンジニア転職。無料カウンセリング満足度99%!
  • TECH CAMP
      無料カウンセリング満足度95%!本業に活かせる。キャリアアップにつながる。
  • TechAcademy
      現役エンジニアから学べるオンラインに特化したプログラミングスクール。
  • テックパートナーズカレッジ
      WEBシステム開発会社のノウハウが学べるオンラインスクール。14日無料体験有り!
  • \ PHP・Laravelに特化したオンラインスクール /
    yasuakiをフォローする
    codelikeなブログ

    コメント

    タイトルとURLをコピーしました