三項演算子の使い方を✅
JSONから値を取り出すことに苦戦してましたが、なんとか乗り越えることができホッとしています。
ユーザーの回答状況に応じて値を動的に変化させ、「問題1の回答が2だった場合、13という値を返す」ような式を作りたいと考えているのですが、これがまたよく分からない。
最初はif文を使えばいいじゃん？と思いました。条件分岐式について調べていくうちに三項演算子なるものを見つけたので、今回は三項演算子ついて学習していきたいと思います。
三項演算子って何？
条件演算子(conditional operator)とも言われる。他にもinline if (iif)、ternary ifという呼び方がある
公式 condition ? exprIfTrue : exprIfFalse
conditionが生の場合、exprIfTrueが返る。負の場合はexprIfFalseが返るようになっている。
こんな感じで使う。
yourlanguage = "ruby"
fired = "ruby is prefered to this company, so you are fired.";
welcomed = "Hey, I've heard you use ruby, you are welcomed."
let yourFuture = (yourlanguage === "ruby") ? welcome : fired
console.log(yourFuture)
# Hey, I've heard you use ruby, you are welcomed.
連結することもできる
三項演算子も、if文のようにネストさせることができる。
function example(…) {
return condition1 ? value1
: condition2 ? value2
: condition3 ? value3
: value4;
}
これは、if文を使うと下記のように書き換えることができる。
function example(…) {
if (condition1) { return value1; }
else if (condition2) { return value2; }
else if (condition3) { return value3; }
else { return value4; }
}
このif文と三項演算子を見比べてみると、ぶっちゃけif文の方が見やすい気もする。
三項演算子は使わないほうがいい？
リーダブルコードを引用してみる。
- 行数を短くするよりも、他の人が理解するのにかかる時間を短くする。
- 基本的にはif/elseを使おう。三項演算子はそれによって簡潔になるときにだけ使おう。
三項演算子を学び、ポートフォリオに取り入れてみた。
export default {
data(){
return{
questions: [#DBサーバーからgetしてきた値
{
" num": '1',
"title": '顔が赤くなる',
"answer": '3',
},
{
"num": '2',
"title": '顔以外が赤くなる',
" answer": '2',
},
]
}}
trueAnswers = this.questions
const answer0 = trueAnswers[0]['answer'];
let answerFirst = answer0 === 1 ? -10.04 : answer0 === 2 ? 8.95 : 5.22;
}
console.log(answerFirst)
//expected output 5.22
実にわかりにくい。かっこを付け加えてみる。
answerFirst = (answer0 === 1) ? -10.04 : (answer0 === 2) ? 8.95 : 5.22;
if文に直すとこうなる。
let answerFirst = function(){
if (answer0 === 1){
return -10.04
}else if(answer0 === 2){
return 8.95
}else {
return 5.22
}
};
まとめ
- 極力三項演算子は使わず、if文を使おう。可読性が低くなる。
