🐕

[三項演算子]

2022/10/27に公開約1,500字

三項演算子とは

  • 条件演算子はJavaScriptで唯一3つの被演算子を取る演算子。
  • 条件に基づいて2つの値のうち1つを選択。
  • 標準的な演算子を使用できる場所ならどこでも条件演算子を使用できる。
condition ? expr1 : expr2
  • 三項演算子は真式の値を返し、演算子が使える場所全てで使える

三項演算子が適切なパターン

値の代入

if (str === 'piyo') {
  result = 'piyo!!'
} else {
  result = 'not piyo…'
}
result = str === 'piyo' ? 'piyo!!' : 'not piyo…'

引数の中で分岐

if (str === 'piyo') {
  console.log('piyo!!')
} else {
  console.log('not piyo…')
}
  • 演算子を使用できる場所ならどこでも使用できる、という特徴を利用しconsole.logの引数の中で分岐させている
console.log(str === 'piyo' ? 'piyo!!': 'not piyo…')

定数への代入

let displaySize = 100
const DISPLAY_PATTERN = (v => {
  if (v < 500) {
    return 0
  } else {
    return 1
  }
})(displaySize)
let displaySize = 100
const DISPLAY_PATTERN = displaySize < 500 ? 0 : 1

if文が適切なパターン

分岐が複雑

if (str === 'piyo') {
  console.log('piyo!!')
} else if (str === 'koke') {
  console.log('koke!!')
} else if (str === 'hoho') {
  console.log('hoho!!')
} else {
  console.log('not bird…')
}
console.log(
  str === 'piyo' ? 'piyo!!' :
  str === 'koke' ? 'koke!!' :
  str === 'hoho' ? 'hoho!!' :
  'not bird…';
)

ネストが深い

if (str === 'piyo') {
  if (str === 'mofu') {
    console.log('mofu!!')
  } else {
    console.log('piyo!!')
  }
} else {
  console.log('not piyo…')
}
console.log(
  str === 'piyo' ?
    str === 'mofu' ? 'mofu!!' :
    'piyo!!' :
  'not piyo…'
)

リーダブルコード曰く

三項演算子は

  • 行数を短くするよりも、他の人が理解するのにかかる時間を短くする。
  • 基本的にはif/elseを使おう。三項演算子はそれによって簡潔になるときにだけ使おう。

参考

https://qiita.com/smicle/items/7d3b9881834dc0142fb7

Discussion

ログインするとコメントできます