JavaScriptの論理OR、論理ANDの特性、便利な応用方法

初めに

JavaScriptでは論理OR(||)、論理AND(&&)を用いた時に、その式が返す値は真偽値ではなく、その評価された値自身が返される特性があります。
どういうことか実際に見てみましょう。

"left" || "center" || "right"
// left

"left" && "center" && "right"
// right

0 || "" || "last"
// last

0 && "" && "last"
// 0

論理ORはtrueと評価される値が無い場合は最後の値を返し、trueと評価される値がある場合は最初にtrueと評価された値を返します。
それに対して、論理ANDはfalseと評価される値が無い場合は最後の値を返し、falseと評価される値がある場合は最初にfalseと評価された値を返します。
全て左の値から評価されていき、値が返された時点で、それよりも右の式は評価されません。
また、真偽値ではなく値が返されます。

この特性を利用する

この特性を利用すると以下のようなことが簡単に書くことができます。

• 変数への初期値の設定
• ある条件のときに関数、メソッドの実行

変数への初期値の設定

変数に初期値を設定する時に論理ORを使うと便利です。
優先順位の高いものから左に配置していき、最後に全ての変数に値がなかった場合に設定する初期値を書くことで、確実にその変数に値を入れることができます。

var a, b, c = 1;

var x = a || b || 0; // 0
var y = c || 0; // 1

上記のコードの場合、xはa、b、と左から評価していますがどちらもundefinedなためfalseと判断され、最後の0が代入されます。
0はfalseと判断されますが、最後の値のため、そのまま値が返されます。
yはcが1でtrueと評価される値のため、そのまま1が代入されます。
※評価する式の値が0だった場合、0はfalseとして評価されるため右の式を評価していくことになるので注意

ある条件のときに関数、メソッドの実行

左側の条件を満たす時に、関数やメソッドの実行を行うことができます。
左の式が評価された場合のみ、その右側の式が評価されます。

var a = "aaa";

a === "aaa" && alert("aはaaaですよ！");

上記のコードの場合、aは"aaa"なのでtrueと評価され、右側の式が評価され、alertが実行されます。

これを応用すると以下のようなコードも簡単に書けます。

// どちらも同じ動き
if (a === b) {
    alert("aとbは同じ");
}

a === b && alert("aとbは同じ");

最後に

知らないと、コードの意味を全く汲み取れないですが、応用させることによってコードが簡潔に見やすいものにすることができます。
積極的に使っていきましょう。