概要
val = a ?: b;
このように 左の値が true と解釈されるものだったら左の値を、false と解釈されるものだったら右の値を返すエルビス演算子 (elvis operator) ですが、JavaScript で使う際の備忘録として記しておきます。
エルビス演算子
いきなり結論ですが JavaScript ではこう書けますね。
val = a || b;
単純に if 文使ったり、三項演算子使うよりコードがシンプルになりますね。
// 上のコードを if文で書く
if (a) {
val = a;
} else {
val = b;
}
// 上のコードを三項演算子で書く
val = a ? a || b;
三項演算子が更に省略されていると覚えておけば問題なく || を使えそうです。
|| と && の挙動
ここからはちょっと気になったので調べたことですが、
const a = 1; // truthy
const b = 0; // falsy
const val = a || b;
console.log(val); // 1
左の値が true 、右の値が false と解釈される場合、当然左の値が返ります。
左の値が true 、右の値も true と解釈される場合は？
const a = 1; // truthy
const b = 2; // truthy
const val = a || b;
console.log(val); // 1
これも、左の値が返ります。どちらかの値が true だったらいいので先頭の条件を評価した時点で値が返されてますね。
では、左右の値はこのままで、論理演算子を || から && に変更してみると？
const a = 1; // truthy
const b = 2; // truthy
const val = a && b;
console.log(val); // 2
右の値が返りました。 && なので、先頭の条件から精査して、最後に true と解釈される条件が返されるからですね。
ちなみに...
最後に、ほんとにちなみにですが、エルビス演算子の由来は、?: がエルビス・プレスリーさんの顔文字に似ているところから来ているらしいです。(言われてみると ? がリーゼントヘアーで :が目っぽく見える...）