前情提要

艾草：「你的炫酷魔法的定義是什麼呀？」

「就是那種一施放後大家看到都會愛上我，覺得我好棒的魔法。」

艾草：「 不需要那種魔法，你就很棒囉！ 」

「... (/ε＼*)」

(咦，總感覺話題被巧妙的帶過了 ... )

運算子的優先性與相依性

優先性

我在初學 JavaScript 時因為沒有優先性的概念，所以常常會在一行算式有加有乘時，在乘法的地方包覆括號，希望乘法可以先計算，殊不知這原本就有優先性了，而且括號也只是因為優先性比較高！

首先，讓我們從很熟悉的加減乘除開始介紹優先性：

let a = 1 + 2 * 3;

因為先乘除後加減的觀念，我們應該會希望 a 是 2 先乘 3 在加上 1 得出數字 7，而不會希望 1 先加上 2 再去乘 3 得出數字 9 ，那麼 a 會是什麼呢？

let a = 1 + 2 * 3;
console.log(a)//7

答案是 7 ，而會有這樣的結果其實是因為優先性，JavaScript 的運算子都會有優先級，而乘除的優先級會高於加減。

那今天如果我們希望的結果是 1 先加上 2 再去乘 3 得出數字 9 怎麼辦呢？

其實可以透過包覆括號的方式：

let a = (1 + 2)* 3;
console.log(a)//9

為什麼括號可以達成這個效果呢？

因為括號的優先級高於乘除，當 JavaScript 看到括號時，會優先去執行括號內的內容。

JavaScript 內會去設定每個運算子的優先程度，再依照優先程度去計算。

相依性

接下來讓我們聊聊相依性，相依性是什麼東西呢？

相依性就是當大家的優先性都一樣時，會依造相依性去看是要由左至右去計算呢？還是由右至左計算呢？

讓我們用 = 號來舉例：

let a = 1;
let b = 2;
let c = 3;
a = b = c;
console.log(a)//3
console.log(b)//3
console.log(c)//3

= 號的相依性是從右至左，所以它會先去執行 b = c，而 = 號運算子會回傳一個值，我們可以把 b = c 丟進開發人員工具查看。

可以觀看到 b = c 會回傳數字 3 ，而 b 會去等於回傳的那個數字，所以實際上執行起來是：

let a = 1;
let b = 2;
let c = 3;
a = 3;//b = c 回傳 3 

所以結果就是 a = 3 ！

總結

知識點：優先性、相依性

• 優先性是執行的先後順序
• 相依性是優先性相同時，會由右至左執行、或由左至右

了解優先性、相依性，可以避免踩很多雷！

小練習

請問以下 console.log 分別會印出什麼呢？

//優先性
let a = 10 + 9*3;
console.log(a) //?

let b = (10 + 9)*3;
console.log(b) //?

//相依性
let c = 2;
let d = 4;
let e = 12;
c = d = e;
console.log( c , d , e ) //? 

參考文獻

JavaScript 全攻略：克服 JS 的奇怪部分(Udemy)
https://developer.mozilla.org/zh-TW/docs/Web/JavaScript/Guide/Expressions_and_Operators