はじめに

||ってなんだよ&&ってなんだよ! なんでif文でもないのになんで出てきやがるんだよ!!!」と思っていた時期が私にもありました。
今でも少し慣れないので、まとめてみます。

そもそも論理演算子とは

論理演算子 - JavaScript | MDNによると…

論理演算子 (Logical operators) は、基本的に真偽(論理)値とともに用いられ真偽値を返します。

とのこと。

しかし、&&および||演算子は真偽値ではない値も使うことができるため、その場合は、真偽値ではない値を返すことがあります。

重要なのはこっち。真偽値以外も返す

考え方

演算子 使用法 説明
AND expr1 && expr2 expr1falseと見ることができる場合は、expr1を返します。そうでない場合は、expr2を返します。
OR expr1 || expr2 expr1trueと見ることができる場合は、expr1を返します。そうでない場合は、expr2を返します。
NOT !expr 単一の演算対象がtrueと見ることができる場合は、falseを返します。そうでない場合は、trueを返します。

追記(2019/04/11)
true見ることができるについてのMDNの説明を見つけました。
Truthy - MDN Web Docs 用語集: ウェブ関連用語の定義 | MDN

つまり以下のような感じ?

// AND  
const andFunc = (expr1, expr2) => {  
    if (expr1) {  
        return expr2;  
    } else {  
        return expr1;  
    }  
}  

// OR  
const orFunc = (expr1, expr2) => {  
    if (expr1) {  
        return expr1;  
    } else {  
        return expr2;  
    }  
}  

// NOT  
const notFunc = (expr) => {  
    if (expr) {  
        return false;  
    } else {  
        return true;  
    }  
}  

頭がこんがらがってくる…。

ショートサーキット評価とかいうもの

論理演算子は左から右へ評価されるため、論理演算子で左辺を評価した時点で論理式の結果が確定した場合には右辺の評価を行わないことを、ショートサーキット評価といいます。
例えば、A && Bという論理式があった場合、Afalseなら、その時点で式全体の結果はfalseで確定するため、Bがどうであるかについてはチェックしません。

追記(2019/04/13)
いわゆる短絡評価のことです

MDNにも書いてありますが、私自身のためによく使うだろうものをまとめます。

OR

const foo = hoge || huga;  
// `hoge`がある場合はそれを代入する。`huga`は無視される  
// ない場合は`huga`を`foo`に代入する  

// 以下のような使い方も  
const doSomething1 = (arg) => {  
    arg = arg || 'デフォルトの値';  
    console.log(arg);  
}  

// 上のものはこのようにも書ける  
const doSomething2 = (arg = 'デフォルトの値') => {  
    console.log(arg);  
}  
// ただしこの方法では、`'use strict;'`だとエラーになってしまう  

追記(2019/04/14)
上のショートサーキット評価を使う場合は、argfalseであるとデフォルト値が代入されてしまいます。
ですので、if (arg === undefined) arg = 'デフォルトの値'のようにする必要がある場合もあるでしょう。
奥が深い…。恐ろしや…。

AND

// ちょっとしたものなら`if`がいらない  

/\W/.test(password) && alert('無効な文字が含まれています')  
// `\W`がパスワードに含まれていた場合のみ`alert`する  
// 含まれていない場合は無視される  

NOTで真偽値に変換する

!!hoge  
// 一度`!`で、真偽値にしたあと、また`!`で逆転してしまったのを戻している。  

// ↓と同じ  
hoge = hoge ? true : false;  

おわりに

// おまけ  
// 変数をその場で作っちゃうこともできるっぽい  
const isSpaceCreatedForElem = (elem) => {  
    if (  
        (rect = elem.getBoundingClientRect())  
        &&  
        (rect.height && rect.width)  
    ) {  
        return true;  
    } else {  
        return false;  
    }  
}  

奥が深い…。
可読性も考えて書くようにしましょう。


実際に使ってブックマークレットを作ってみました↓

短絡評価楽しい。

関連記事

この記事へのコメント

まだコメントはありません
+1
36
@okayuの大して技術的ではないブログ
このエントリーをはてなブックマークに追加