論理演算子の挙動と使い方

みなさまどうも。

続きまして、他の言語と色々と違いすぎるJavaScriptでの『&&』とか『||』とかの挙動を確認していきましょう。

※論理演算子についての初心者向けの解説はこちらへ。

早速でございますが以下のサンプルを見てみて下さい。

0 || 1;

JavaScriptでは数値『1』が『true』扱いされるので上記の式全体の評価は『true』扱いされます。通常、他の言語でこの処理を実行すると真偽値『true』が返ってくるわけでございますが、これを実行するとあら不思議。

1

数値『1』が返って来ます。ファンタスティックでございますね。

JavaScript以外の言語では『&&』とか『||』を使用すると真偽値(『true』か『false』)が返ってくるのが一般的なんですが、JavaScriptではこんな感じで該当する式の評価(演算)が行われてしまったりします。

他言語に精通している方だと特にびっくりですよね。これを知らないと思わぬミスにつながってしまうこと請け合いです。しかもこの動作は結構昔から認知されている挙動になりますので、この動作を利用した合理的かつちょっとトリッキーな記述方法もよく使用されてます。

というわけで『&&』とか『||』とかの動きをしっかり覚えないと調子が悪かったりしますので、この場でバシッと覚えてしまいましょう。

※ JavaScriptでの『true』扱いされる値と『false』扱いされる値についてはこちらの記事をどぞ。

まずは『&&』(論理積演算子)からです。JavaScriptでの『&&』は最初に左側の式が評価(処理)されます。これが『false』扱いされる値であれば左側の式を評価し、その結果を返します。

0 && 1; // 左側の式の評価は『false』扱いになるので、左側の式を評価してその結果である数値『0』が返って来ます。

そんでもって右側の式は評価すらされません。毅然とした態度でシカトされちゃいます。なので以下のようにへんてこりんな記述をしてもエラーになりません。

0 && 初音ミク; // 何を記述しても全くエラーが出ないわけではないのですがこの記述はOKです。

そして左側の式の評価が『true』扱いされるのであれば対象が右側の式へ移動し、右側の式の評価が『true』扱いされるならば右側の式の評価結果が、右側の式の評価が『false』扱いされるならば右側の式の評価結果が返って来ます。

つまり、『&&』の場合は左側の式の評価が『false』扱いされるのであれば左側の式の評価結果が、左側の式の評価が『true』扱いされるのであれば全体の評価が『true』扱いになろうとも『false』扱いになろうとも常に右側の式の評価結果が返って来ます。

これを利用したトリッキーな記述方法として以下のようなパターンが良く使用されます。以下のサンプルはオブジェクトが定義されていなかった場合のエスケープ処理です。左側の式が『true』扱いになる場合は常に右側の評価を返すという挙動を利用した記述ですね。

var fn = function(){
    var x;
    // ...『x』をオブジェクトとして定義したりしなかったりする処理。
    // ...
    // ...
    // ...

    return x && x.y; // 『x』がオブジェクトならば『true』扱いとなり『x.y』がreturn、定義されていなかったら『x』(『undefined』)がreturnされます。
}

これは以下のように記述したことと同じ結果になります。

var fn = function(){
    var x;
    // ...『x』をオブジェクトとして定義したりしなかったりする処理。
    // ...
    // ...
    // ...

    if(x) return x.y;
    else return x;
}

JavaScriptに慣れた人だと『&&』を使った方がささっと書けて楽なので使用してるプログラマーさんは多いです。

さらにトリッキーな感じになりますが、なんと以下のように『if文』の代わりに使用できちゃったりします。びっくりでございますね。

var x = true,
    y = true;

if(x === y) console.log(true);

(x === y) && console.log(true); // 上の『if文』とほぼ同じ動作をします。

(´-`).｡oO(ちなみに上記の『if文』の代わりとするパターンは使用するメリットがあんまり無く...)

(´-`).｡oO(トリッキー過ぎるので使用しないほうが無難でございます...)

というわけで『&&』についてはこんな感じですね。

続いて『||』(論理和演算子)です。『&&』と同じく『||』もまず左側の式が評価されます。左側の式の評価が『true』扱いされるのであれば常に左側の式が評価され、その結果が返されます。

1 || 0; // 左側の式の評価が『true』扱いになるので、左側の式を評価してその結果である数値『1』が返って来ます。

その場合、右側の式は評価すらされません。これも『&&』と同じですね。

1 || 初音ミク; // 何を記述しても全くエラーが出ないわけではないのですがこの記述はOKです。

そして左側の式の評価が『false』扱いされるのであれば、常に右側の式が評価されてその結果が返って来ます。

つまり、『||』の場合は左側の式の評価が『true』扱いされるのであれば左側の式の評価結果が、左側の式の評価が『false』扱いされるのであれば全体の評価が『true』扱いになろうとも『false』扱いになろうとも常に右側の式の評価結果が返って来ます。

さて『&&』と同じように、この『||』の動作を利用したちょっとトリッキーだけどとても便利な記述パターンがいくつかあるので紹介しておきます。

まずは初期値を決める際に使用されるパターンです。以下のサンプルを見てみましょう。

var x, y, z;

// ここに適当な処理。
// ...
// ...

if(y) x = y;
else if(z) x = z;
else x = 100;

これは変数『y』が定義されていれば変数『y』を、変数『z』が定義されていれば変数『z』を、それ以外の場合は数値『100』を変数『x』の初期値とする、というよくある処理になります。

上記のサンプルだとちょっと長ったらしいですが『||』を使えば以下のように書けちゃいます。

var x, y, z;

// ここに適当な処理。
// ...
// ...

x = y || z || 100;

『||』は左側の式の評価が『true』扱いになるのであれば常に左側の式の評価結果を返し、そうじゃないなら右側の式の評価結果を返す、ということを利用した記述ですね。これ超便利ですので良ければ使ってみてください。

ただし、『false』扱いとなる値(数値『0』とか)が代入される可能性がある場合は使えないのでご注意です。

var a = 0;

var x = a || 100; // 変数『a』は定義されていますが、中身が数値『0』なので『false』扱いされ、数値『100』が返されちゃいます。

そして、これをさらに応用させると関数(メソッド)の上書きを防止しつつ関数定義するという事ができます。

var fn = fn || function(){ // もし『fn』という関数名が使用されているならば関数『fn』が代入されます。つまり何も変化がありません。
    // ここに処理...
};

最近のJavaScriptの実装環境だと色々なライブラリが大量に読み込まれている事が多く、ページごとに使用済みの関数名を探すのも一苦労といった場合が多々ありますのでこの記述方法はかなり使用価値が高いです。とりあえずの形ですが既存の処理を上書きしちゃう事故は防げます。読み込まれているJSファイルが多くてちょっと困ったことになったら使用してみてください。

false || 1 && true; // 『&&』の方が優先度が高いため先に『1 && true』が演算され『true』となり、『false || true』の結果が返されます。

false || (1 && true); // 意味があろうとなかろうと『()』を使って優先順位を表現してあげます。

(true)? console.log(true): 無評価; // 右側の式は評価すらされないのでこんな記述でもエラーになりません。

というわけで『&&』とか『||』の解説は以上になります。他の言語とかなり動作が違うので色々ご注意でございます。

次の記事では『正規表現』について軽く解説していきたいと思います。ではこの辺で。またお会いしましょう。

この記事は桜舞が執筆致しました。

著者が愛する小型哺乳類

桜舞 春人 Sakurama Haruto ISDN時代から様々なコンテンツを制作しているちょっと髪の毛が心配な東京在住のプログラマー。生粋のロングスリーパーで、10時間以上睡眠を取らないと基本的に体調が悪い。好きなだけ寝れる生活を送るのが夢。ゲームとスポーツと音楽が大好き。誰か髪の毛を分けて下さい。

記事の間違いや著作権の侵害等ございましたらお手数ですがこちらまでご連絡頂ければ幸いです。

トップページへ

前の記事へ

次の記事へ

Tweet

シェア