六角學院 JS 核心筆記 (十七)【運算子、型別與文法】- Truthy 與 Falsy、邏輯運算子及函式預設值

發表於 更新於 分類於
AdSense

前言

In JavaScript, a truthy value is a value that is considered true when encountered in a Boolean context. All values are truthy unless they are defined as falsy.

在 JavaScript 中，在「需要判斷的情境」下，一個真值 Truthy的值，就會被認為是 true，除非他們被定義假值 Falsy。而被定義假值 Falsy 的有：false、0、-0、0n、""、null、undefined 和 NaN。其餘為真值 Truthy，例如："false"。

不要跟寬鬆相等、嚴格相等弄混淆。

需要判斷的情境

if 判斷式 if()

"false" 為真值 Truthy，因此會進入 if 陳述式。

1
2
3
4
5
6
7
8
9
if("false"){
    console.log('"false" 為真值 Truthy');
}
else{
    console.log('"false" 為假值 Falsy');
}

// 輸出結果：
// "false" 為真值 Truthy

邏輯 AND &&

當 && 左邊的運算元為真值 Truthy，則回傳右邊的運算元。

1
2
3
4
5
6
7
8
9
1 && "Jenifer";

"false" && "Jenifer";

[] && "Jenifer";

Infinity && "Jenifer";

// 以上皆回傳 "Jenifer"

當 && 左邊的運算元為假值 Falsy，則回傳左邊的運算元。

1
2
3
4
5
NaN && "Jenifer";
// 回傳 NaN

0n && "Jenifer";
// 回傳 0n

補充資料：
JavaScript Equality Table - if() 頁籤
Oh My Dear JavaScript - 下方 What goes through If statement

邏輯 OR || 和 空值結合運算子 ??

邏輯 OR (Logical OR) 和空值結合運算子 (Nullish coalescing operator) 有點像。

||：當左邊的運算元為真值 Truthy，則回傳左邊的運算元。當左邊的運算元為假值 Falsy，則回傳右邊的運算元。

1
2
3
4
5
6
7
8
9
o1 = true  || true       // t || t returns true
o2 = false || true       // f || t returns true
o3 = true  || false      // t || f returns true
o4 = false || (3 == 4)   // f || f returns false
o5 = "Cat" || "Dog"      // t || t returns "Cat"
o6 = false || "Cat"      // f || t returns "Cat"
o7 = "Cat" || false      // t || f returns "Cat"
o8 = ""    || false      // f || f returns false
o9 = false || ""         // f || f returns ""

??：只有當左邊的運算元為 null、undefined，才回傳右邊的運算元。否則回傳左邊的運算元。

1
2
3
4
5
n1 = "Cat" ?? false      // returns "Cat"
n2 = ""    ?? false      // returns ""
n3 = false ?? ""         // returns false
n4 = null  ?? "Cat"      // returns "Cat"
n5 = undefined ?? "Cat"  // returns "Cat"

想賦予變數 0 或空字串，用 ??

1
2
3
4
5
6
7
8
let count = 0;
let text = "";

let num1 = count || 100;          // num1 is 100
let message1 = text || "Hello!";  // message1 is "Hello!"

let num2 = count ?? 100;          // num2 is 0
let message2 = text ?? "Hello!";  // message2 is ""

注意：如果要把 ?? 和 && or || 放在一起，記得加括號 ()，否則出現 SyntaxError，因為他們之間的運算優先級是未定義的。

參考資料：
六角學院：JavaScript 核心篇 - 邁向達人之路