JavaScriptにおける短絡演算子(ショートカット演算子)の実践的な使い方

Javascriptには論理演算子(&&とか||みたいなやつ)が用意されており、この論理演算子によって幅広い条件処理(if)ができるようになるが、論理演算子を短絡演算子として使うこともできる。

短絡演算子(ショートカット演算子)とは?

短絡演算子とは、以下の様なコードのことだ。

let msg = msg || 'サンプルです';

上記のコードでは、変数msgがすでに定義されていればそのままmsgが変数に格納されるが、定義されていない場合は文字列’サンプルです’が変数msgに格納される。

これは、論理演算子||の特性を生かした変数の代入方法であり、||はまず左の式を評価してfalseであれば右の式を評価する。(つまり、左の式がfalseの場合は右の式が実行される)

もし、左の式がtrueであれば右の式は評価されないままとなる。

逆に||ではなく&&を使った場合は、左の式がtrueの場合のみ右の式も評価される。(つまり、||と逆の処理となる)

let msg = msg && 'sanmple';

どちらの論理演算子も使えるが、分かりやすさから||の方がよく使われている。

短絡演算子については、以下の記事が参考になる。(英語)

参考記事:Logical operators – JavaScript | MDN

参考記事:19+ JavaScript Shorthand Coding Techniques — SitePoint

参考記事:12 Good JavaScript Shorthand Techniques – Hacker Noon

実際のコードで短絡演算子はどのように使われているか?

では、実際のコードでは短絡演算子はどのように使われているか?

実際に、JavaScriptの有名なライブラリであるhighlight.jsのコードを見てみよう。

参考記事:highlightjs/highlight.js: Javascript syntax highlighter

中身を見ていくと、以下の様な2行を見ることができる。

var globalObject = typeof window === 'object' && window ||
                     typeof self === 'object' && self;

上のコードは少し複雑なので、まずは前半部分だけを見ていく。

var globalObject = typeof window === 'object' && window

上のコードではtypeof window === 'object'の時、つまり「windowプロパティがobjectである」場合に、右の式windowが評価されて変数globalObjectに格納されることになる。

もっと簡単に言えば、実行環境がGoogle Chrome等のプラウザの場合に変数にwindowが格納されることになる。

次に後半部分。

var globalObject = typeof window === 'object' && window ||
                     typeof self === 'object' && self; //ここの部分

後半の部分は、前半の部分がfalseと評価された時に実行される。

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

日本語が含まれない投稿は無視されますのでご注意ください。(スパム対策)

SNS Shere

Related Post

Javascriptの書き方パターン

JavaScriptの配列で参照渡しではなく値渡しをする方法と注意点

Windowsにnode.js+Electronを入れてwindowsアプリを作る方法

JavaScriptのソースコードを読む時に知っておきたいモジュールパターン

JavaScriptを使ってスクロールでメニューを固定・追従させる方法

JavaScriptのライブラリ等でよく見る変数宣言パターン