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

前言

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

事由

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

1
2
3

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

題目解析

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

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

1
2
3
4

var a, b

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

代表著 a 跟 b 都是真實宣告的變數，那麼接下來看下一段 (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);

參考文獻

• Comma operator (,)