&と&&、|と||の違いについてまとめておく。ほとんど自分用メモ。
挙動の違い
まずは、見える範囲での挙動の違い。
var a = true
var b = false
console.log(a & b) // 0
console.log(a && b) // false
console.log(a | b) // 1
console.log(a || b) // true他にもこんな使い方ができたことを思い出す
// userNameにnameを入れる。ただし、nameがnullの時は'unknown'を入れる
var userName = name || 'unknown'&&、||は論理演算子。&、|はビット演算子。
論理演算子
論理演算子では、基本的にブール値 (Boolean value)（論理）値を用います。つまりブール値を取ると、ブール値を返します。しかし
https://developer.mozilla.org/ja/docs/Web/JavaScript/Guide/Expressions_and_Operators&&および||演算子については、実際には指定された被演算子の一方の値を返します。そのため、非ブール値とともに論理演算子が使われた場合、非ブール値を返す可能性があります。次表で論理演算子について説明します。
&&の詳しい挙動
var a = true && true; // true
var b = true && false; // false
var c = false && true; // false
var d = false && (3 == 4); // false
var e = 'Dog' && 'Cat'; // 'Cat'
var f = false && 'Dog'; // false
var g = 'Dog' && false; // false||の詳しい挙動
var h = true || true; // true
var i = false || true; // true
var j = true || false; // true
var k = false || (3 == 4); // false
var l = 'Dog' || 'Cat'; // Dog
var m = false || 'Dog'; // Dog
var n = 'Dog' || false; // Dogビット演算子
ビット演算子はその被演算子を 10進数や 16進数や 8進数ではなく、32 個のビットの集合（0 と 1）として扱います。例えば、10進数の 9 の 2進表現は 1001 です。ビット演算子はこのように 2進表現にした上で演算を行いますが、JavaScript において標準的な 10進数表現の数値を返します。
https://developer.mozilla.org/ja/docs/Web/JavaScript/Guide/Expressions_and_Operators
詳しい挙動
15 & 9 // 1111 & 1001 = 1001 => 9
15 | 9 // 1111 | 1001 = 1111 => 15おまけ：特殊な使い方メモ
&&の特殊な使い方の例
// [1] 普通の使い方
console.log(true && false) // false
// [2] 10はtrue扱い、0はfalse扱いなので0が返る
console.log(10 && 0) // 0
// [3] 0はfalse扱い、10はtrue扱いなので0が返る
console.log(0 && 10) // 0
// [4] ５はtrue扱い、10もtrue扱いであるが、後ろにある10が返る
console.log(5 && 10) // 10
// [5] 0はfalse扱い、-0もfalse扱いであるが、前にある0が返る
console.log(0 && -0) // 0
// [6] 前がfalseならそのまま返る
console.log(false && 'unknown') // false
// [7] 前がtrueなら後ろが返る
console.log(true && 'unknown') // unknown
// [8] 原則は、trueなら後ろが返す。それを繰り返してfalseになったら返る
console.log(true && true && false && 'unknown') // false
// [9] 最後までずっとtrueなので、最後のunknownが返る
console.log(true && true && true && 'unknown') // unknown原則は、AND。全てがtrueならtrue。それ以外はfalse。
||の特殊な使い方
// [1] 普通の使い方
console.log(true || false) // true
// [2] 10はtrue扱い、0はfalse扱いなので10が返る
console.log(10 || 0) // 10
// [3] 0はfalse扱い、10はtrue扱いなので10が返る
console.log(0 || 10) // 10
// [4] ５はtrue扱い、10もtrue扱いであるが、前にある5が返る
console.log(5 || 10) // 5
// [5] 0はfalse扱い、-0もfalse扱いであるが、後ろにある-0が返る
console.log(0 || -0) // -0
// [6] 前がfalseなら後ろが返る
console.log(false || 'unknown') // unknown
// [7] 前がtrueならそのまま返る
console.log(true || 'unknown') // true
// [8] 原則は、falseなら後ろが返す。それを繰り返してtrueになったら返る
console.log(false || false || true || 'unknown') // true
// [9] 最後までずっとfalseなので、最後のunknownが返る
console.log(false || false || false || 'unknown') // unknown原則は、OR。どれか一つでもtrueがあれば、true。
細かい話
例えば[2]の時、10の時点で結果がtrueに確定するため、後ろは見ていない。
おまけ２：falseと判定される値
- 0
- -0
- null
- false
- NaN
- undefined
- 空文字（””）
それ以外は全てtrueと判定される。
まとめ
「できる」と「やる」は違う。
// userNameにnameを入れる。ただし、nameが未登録ならメールアドレスを入れる。
// emailも分からない時は、uidを入れる。
// uidもnullなら、諦めて'unknown'を入れる。
var userName = name || email || uid || 'unknown'こんな条件に実際のプログラム中で出会わないことを願う。
(そもそもuserNameにemailを入れようとするな）
参考
式と演算子 - JavaScript | MDN
この章では JavaScript の式 (expression) や演算子 (operator) について、代入、比較、算術、ビット、論理、文字列、三項演算子などを説明しています。
developer.mozilla.org
JavaScriptの「&&」「||」について盛大に勘違いをしていた件 - Qiita
論理演算子「&&」「||」についてJavaScriptの基本である論理演算子の && || について、根本的に勘違いをしていたことに最近気付いたので自戒の意味を込めてここに記します。論理演算子…
qiita.com
