むにえる牧場

毎日むにえるをつくっています

【JavaScript】意外と便利なショートカット演算(短絡演算)

はじめに

お仕事にてVue.jsのコードを見ていたら、

:class="[obj.is-active && 'is-active'"

というコードを見かけました。
最初はなんだこれ……となったのですが、調べてみたら意外と便利だったので紹介。
(ノルマがやばいともいう)

ショートカット演算(短絡演算)

JavaScriptにて、論理積/論理和(&&/||)演算子を利用するときに、「左辺だけ評価されて、右辺が評価されない」ことがあります。
&&を利用した場合、左辺がfalseと評価されると、その時点でfalseが返ってくるので、右辺が評価されません。
この演算のことをショートカット演算。もしくは、短絡演算と呼ぶみたいです。

コード例

const x = 0;

x === 0 && console.log('Hello');
// hello

x === 0trueとなるので、右辺のconsole.log('hello')が評価されて、helloと出力されます。
うーむ、わかりづらい……

&&演算子の場合

&&演算子を利用した場合は、

  • 左辺がfalseだったら、右辺は実行されない。
  • 左辺がtrueだったら、右辺が実行される。

||演算子の場合

||演算子を利用した場合は、

  • 左辺がtrueだったら、右辺は実行されない。
  • 左辺がfalseだったら、右辺が実行される。

ES6仕様書での記述

ES6の仕様書ではここに書かれています。

http://www.ecma-international.org/ecma-262/6.0/#sec-binary-logical-operators

The value produced by a && or || operator is not necessarily of type Boolean. The value produced will always be the value of one of the two operand expressions.

&&演算子、または||演算子によって生成された値は、必ずBoolean型になるわけではない。 生成される値は、常に2つのオペランド式のうちの1つになります。

Vue.jsで便利だった件

Vue.jsでオブジェクト構文を利用して、CSSのクラスをつけることがよくあります。
Vueのコンポーネントに渡したオブジェクトのフラグを利用して、CSSクラスのon/offを切り替えることがよくある(と思います)。

そんなときにこの構文が便利でした。
コード例はこれ(はじめにで書いたのと同じです。)

:class="[obj.is-active && 'is-active'"

一点、欠点として obj.is-active がfalseの際には、classにfalseという文字列が入ってしまうため、注意が必要です。
場合によっては、この後ろにも何かCSSクラスとなる文字列をいれていた場合は、falsehogehogeのように繋がってしまいます。
少々バッドノウハウな感じ……

おわりに

JavaScriptいろいろと他言語と違う仕様があるので、めちゃくちゃ難しいです。
もともとC#とか、Javaとか、コンパイル型の言語を書いていたので改めて体系的に勉強しようと下の本を買いました。
ES6の記法も覚えて良いコードを書けるようになりたい。
おわり。