ECMAScript 之 Logic Operator

Logic Operator 的神奇應用

&& 與 || 為 Logic Operator，在一般語言，Logic Operator 的左右兩側 Expression 都是 Boolean，回傳結果亦是 Boolean，但 ECMAScript 的 Logic Operator 允許左右兩側 Expression 可以是非 Boolean，因而衍生出一些其他的應用。

Version

ECMAScript 5
ECMAScript 2015

&&

若第一個 operand 為 false 則直接回傳，否則回傳第二個 operand

1
2
true && false
// false

&& 兩側之 operand 皆為 Boolean，則與一般語言的 logic operator 相同。

1
2
true && 'abc'
// 'abc'

&& 兩側之 operand 並非都 Boolean，則回傳其中一個 operand。

因為第一個 operand 為 true，因此回傳第二個 operand abc。

1
2
'' && 'abc'
// ''

&& 兩側之 operand 並非都 Boolean，則回傳其中一個 operand。

因為第一個 operand '' 為 Falsy Value，視為 false，因此回傳第一個 operand ''。

1
2
'abc' && 'def'
// 'def'

&& 兩側之 operand 並非都 Boolean，則回傳其中一個 operand。

因為第一個 operand abc 為 Truthy Value，視為 true，因此回傳第二個 operand def。

||

若第一個 operand 為 true 則直接回傳，否則回傳第二個 operand

1
2
true || false
// true

&& 兩側之 operand 皆為 Boolean，則與一般語言的 logic operator 相同。

1
2
true || 'abc'
// true

&& 兩側之 operand 並非都 Boolean，則回傳其中一個 operand。

因為第一個 operand 為 true，因此回傳第一個 operand true。

1
2
false || 'abc'
// 'abc'

&& 兩側之 operand 並非都 Boolean，則回傳其中一個 operand。

因為第一個 operand 為 false，因此回傳第二個 operand：abc。

1
2
'' || 'abc'
// 'abc

&& 兩側之 operand 並非都 Boolean，則回傳其中一個 operand。

因為第一個 operand '' 為 Falsy Value，視為 false，因此回傳第二個 operand abc。

1
2
'abc' || 'def'
// 'abc'

因為第一個 operand abc 為 Truthy Value，視為 true，因此回傳第一個 operand abc。

Vulue-preserving

1
2
3
4
5
6
true|| false
// false
false || 'abc'
// 'abc'
'abc' && 'def'
// 'def'

無論 logic operator 左右兩側是否為 Boolean，我們發現一定回傳兩個 operand 的其中之一，也就是 operand 的 value 會原封不動的傳回，因此稱為 Value-preserving。

Short-circuiting

1
2
false && console.log(false);
// false

&& 的結果由第一個 operand false 就能決定，因此永遠不會執行 console.log(false)。

1
2
true || console.log(true);
// true

|| 的結果由第一個 operand true 就能決定，因此永遠不會執行 console.log(true)。

因為 logic operator 有 Value-preserving 與 Short-circuiting 的特性，因此 預設值 或 if 判斷，就可使用 logic operator 加以簡化

Default Value

Parameter

1
2
3
4
function saveText(text) {
  text = text || '';
  console.log(text);
}

由於 ECMAScript 允許 parameter 與 argument 數量不相等，也就是 function 所定義的 parameter，其實可以不用傳進 argument。

對於沒有傳進來的 parameter，其值為 undefined，也就是 Falsy Value，根據 || 的定義，會回傳 || 右側的 operand，因此可在 || 右側設定 parameter 的 default value。

1
2
3
function saveText(text = '') {
  console.log(text);
}

ECMAScript 2015 的 Default Parameter 允許我們直接將 parameter 的 default value 直接寫在 parameter list 內，這種寫法更直覺，也與一般語言類似。

使用 || 作為 default value 的小技巧，主要是由於 || 與 Falsy Value 的語言特性，這對 undefined 不是問題，但別忘了 empty string '' 與 0 也視為 Falsy Value，若你的需求就是允許 '' 與 0，就不適合使用 ||

若使用 ECMAScript 2015 的 Default Parameter，則只針對 undefined，不針對 '' 與 0，這和 || 與 Falsy Value 技巧是不同的

Property

1
setTitle(options.title || 'Untitled');

若 options.title 根本沒定義，則回傳為 undefined，亦為 Falsy Value，因此可將 default value 寫在 || 右側。

Function Result

1
2
3
function countOccurrences(regex, str) {
  return (str.match(regex) || []).length
}

str.match() 要不是回傳 array，就是回傳 null，這會造成 .length 失敗，由於 null 就是 Falsy Value，因此可將 default value 寫在 || 右側，如此無論什麼狀況，.length 都不會失敗。

If Else

&&

1
2
3
4
function foo(value) {
  if (value) 
    console.log(value);
}

若 有 傳入 argument 才會處理。

可簡寫為：

1
2
3
function foo(value) {
  value && console.log(value);
}

因為 有 傳入值，value 為 Truthy Value，才會執行 || 右側的 expression。

||

1
2
3
4
function foo(value) {
  if (!value)
    console.log(value);
}

若 沒有 傳入 argument 才會處理。

1
2
3
function foo(value) {
  value || console.log(value);
}

因為 沒有 傳入值，value 為 Falsy Value，才會執行 || 右側的 expression。

Conclusion

  • Logic operator 原本很單純，但由於 ECMAScript 允許非 Boolean 使用，且又有 Truthy Value 與 Falsy Value 概念後，&& 與 || 有了不一樣的應用，大部分是用來定義 default value，但亦可作為 if else 判斷的縮寫
  • 對於 function parameter 的 default value，其實 ECMAScript 的 Default Parameter 更為優秀，建議使用

Reference

MDN, Logical Operators
山田祥寬, 新一代 JavaScript 程式設計精解
Dr. Axel Rauschmayer, Speaking JavaScript

2018-11-18
▲