JavaScript 語言特性之先 ++ 跟後 ++ 到底哪裡不同？

今天我在看 Angular 的原始碼的時候我發現了一段程式碼如下：

1
2
3
4
5
6

let _nextReactiveId: number = 0;

export abstract class ReactiveNode {
  private readonly id = _nextReactiveId ++;
  // 以下省略
}

然後我就覺得，咦？！第一次看到別人這樣用（被發現我很少看別人的程式碼了），然後就很好奇所以這樣 id 會是從多少開始、然後也很好奇如果改為使用 ++ _nextReactiveId 或是 _nextReactiveId += 1 的話會怎樣，所以我就做了一下實驗，並且分享給大家！

實驗 1 - i += 1

首先我們一樣先宣告一個變數 i 等於 0 ：

1

let i = 0;

然後宣告一個變數 a 等於 i += 1 之後的結果：

1

const a = i += 1;

接著把它印出來看看：

1
2

console.log(a) // 1
console.log(i) // 1

從結果回推，看起來 i += 1 這部份會先運算 （為避免有人不知道，提示一下：i += 1 ⇒ i = i + 1），然後變數 a 會再把變數 i 的值給記錄下來，所以最終兩個變數的值都會是運算完之後的結果。

實驗 2 - i ++

再來是第二種方式 - i ++ ，我們一樣宣告一個變數 b 來記錄 i ++ 之後的結果：

1

const b = i ++;

猜猜看，b 跟 i 的值分別會是什麼呢？（小提示，剛剛 i 的值已經變為 1 了唷！）

1
2

console.log(b) // 1
console.log(i) // 2

看到結果的時候，大家是不是跟我最初剛知道這件事情的時候一樣驚訝呢？

從結果回推之後我們了解到，原來這樣子使用時， b 會先把 i 的值給記錄下來，然後 i 再執行如同 i += 1 的運算，所以 b 的值會是 i 運算前的值，而 i 則會記錄運算後的值。寫成程式碼的話有點像是這樣：

1
2

const b = i;
i += 1;

所以實驗到這邊我就明白為什麼 Angular 的原始碼會那樣寫了！

實驗 3 - ++ i

最後，我們來看看 ++ i 吧！宣告一個變數 c 用以記錄 ++ i 之後的結果：

1

const c = ++ i;

大家再來猜猜看 c 跟 i 的值分別會是什麼吧！（小提示：i 的值剛剛已經變為 2 囉！）

1
2

console.log(c) // 3
console.log(i) // 3

大家都有猜到嗎？ ++ i 的結果跟 i += 1 是一樣的，都是先運算，再記錄值。

結論

從實驗結果來看，我們可以下一個結論：「在這個使用情境中，使用 i += 1 等於使用 ++ i 不等於使用 i ++ 。

而在此之前，雖然我知道這三種方式有所差異，但其實並沒有真的很清楚的知道差異的所在，而最近自己也在改變自己讀書與學習的方式（其實也就只是好好做筆記，建立自己的知識庫罷了），希望這一點一滴的累積，都可以幫助到自己，也幫助到大家。