關於 var a, b = (1, 2) 這件事

前言

最近我的臉書被刷了一個滿有趣的題目,而這個題目也剛好在工作上的問答區被問到,所以就寫一篇來紀錄一下。

事由

是這樣的,最近臉書被 Web 實驗室刷了這一個題目

Web 實驗室

1
2
3
var a, b = (1, 2);
console.log('a:', a);
console.log('b:', b);

在往後看之前,可以先試想一下 ab 答案是多少。

  1. a: 1, b: 2
  2. a: undefined, b: 2
  3. a: 2, b: 1
  4. a: 1, b: undefined
點我看解答(請認真思考後再看解答)

答案是 a: undefined, b: 2

你猜對了嗎?

題目解析

首先我們一一來拆解這個題目。

首先是 var a, b 的部分,這一段我們可以知道它是一個多重宣告變數,什麼意思呢?在「JavaScript 核心觀念(23)-物件-額外補充:變數及物件屬性的差異」這邊有提到過若沒有使用 var 宣告的話,實質上就只是一個單純的物件新增,因此是可以被刪除的,所以我們可以嘗試這樣做

1
2
3
4
var a, b

delete a; // false
delete b; // false

代表著 ab 都是真實宣告的變數,那麼接下來看下一段 (1, 2),最外層是圓括號運算子,而它的用途是做什麼呢?在 MDN 中有說明:

The grouping operator ( ) controls the precedence of evaluation in expressions.

簡單來講就是用於控制表達式優先性,例如:

1
3 + 3 * 2; // 9

透過圓括號運算子後,就會變成:

1
(3 + 3) * 2; // 12

這邊 MDN 文件也有講到一個重點「precedence of evaluation in expressions」,代表著裡面的逗號是一個表達式,所以我們可以去查一下逗號運算子的文件,這邊 MDN 有提到關於逗號運算子的運作:

The comma operator (,) evaluates each of its operands (from left to right) and returns the value of the last operand.

中文意思大概就是,逗號運算子會從左至右開始計算,然後回傳最後一個結尾的值,因此我們可以這樣子實測:

1
1, 2, 3, 4, 5; // 5

(請不要寫 console.log(1,2,3,4,5); 這將會整個回傳。)

因此我們還可以這樣子玩:

1
3 * 3, 9 * 9; // 81

接下來讓我們回顧這個題目 var a, b = (1, 2);,透過前面的例子我們可以知道逗號運算子必定會回傳第二個,因此 var a, b 回傳 b 並且被賦予 (1, 2) 回傳的結果,那麼 a 呢?因為逗號運算子的關係,所以它被忽略了,因此變成了 undefined 哩。

所以相信底下這一題你也可以很清楚答案是什麼了:

1
2
3
var a, b = (1, 2 * 2, 8 / 2);
console.log('a:', a);
console.log('b:', b);

參考文獻

Liker 讚賞 (拍手)

如果這一篇筆記文章對你有幫助,希望可以求點支持或 牡蠣 鼓勵 (ノД`)・゜・。

Liker 是一個按讚(拍手)的讚賞機制,每一篇文章最多可以按五下拍手,過程你只需要登入,如果你願意按個讚,對於創作者來講是一個莫大的鼓勵與支持。

Google AD

撰寫一篇文章其實真的很花時間,如果你願意「關閉 Adblock (廣告阻擋器)」來支持我的話,我會非常感謝你 ヽ(・∀・)ノ