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

前言

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

事由

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

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

在往後看之前，可以先試想一下 a 跟 b 答案是多少。

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 宣告的話，實質上就只是一個單純的物件新增，因此是可以被刪除的，所以我們可以嘗試這樣做

var a, b

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

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

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

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

3 + 3 * 2; // 9

透過圓括號運算子後，就會變成：

(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, 2, 3, 4, 5; // 5

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

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

3 * 3, 9 * 9; // 81

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

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

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

參考文獻

• Comma operator (,)