ASI 自動分號插入

你有想過其他的語言不加分號時他會直接噴你錯，
但是在 JS 你好像有加或是沒加都沒事兒...

Why!?

因為 JS 有名為 ASI ( Automatic Semicolon Insertion ，自動分號插入) 的功能，
也就是你忘記加他就會幫你補上，
但是他並不是幫你所有需要的都加上，
最主要是在"換行"出現時他才會幫你，
他並不會幫你加在一段文字的中間。

主要要注意的兩點

• 述句區塊(block)後本來就不需要，所以 ASI 也不會幫你加上去。
• 會涉入的主要情境為使用 break、continue、return 以及 yield。

還記得我一開始工作時 Code review 時常被留言一堆的分號沒加上，
心裡想說這真的那麼重要嗎?
但是這樣講又好像不對，
Google 了一堆資訊兩方各有擁護者，直到後來...
我使用了 ESLint + Prettier ，
直接自動幫我加上一勞永逸！
我再也不會被留一堆留言是因為 Coding Style xDD

如果你還沒使用這兩個美妙的工具還不趕快手刀安裝 xD
但是要注意的一點是... 用過就回不去了。

TDZ 暫時死亡區域

JS 在 ES6 定義了一個新的概念，就叫做 TDZ，主要是在說程式碼的某個變數的參考動作還不能進行的地方，因為該變數還沒達成必要的初始化動作。
簡單來說就是你過早使用變數導致該變數直接噴錯誤如以下範例。

{
    a = 17; //Uncaught ReferenceError: Cannot access 'a' before initialization
    let a; 
}

看起來真蛋疼

try..finally

如果 try 子句內有一個 return 那 finally 還會執行嗎? 那如果執行是先執行還是後執行呢？
請作答!

...

...

...

答案是會執行，但是執行順序是 return 會馬上執行並設定 foo() 的完成值，接著馬上執行 finally 那時候 foo() 才是真的完成最猴才會回傳該完成值給那個 console.log
如下面的範例

function foo(){
    try {
        return 17;
    }
    finally{
        console.log('test')
    }
    
    console.log('never run')
}

console.log(foo()); 
// test
// 17

throw 與上述情況相同，但是當在 finally 子句中如果有 throw 他就會將原本 try 裡面的完成值取代掉變成 finally throw 的東西。

通常在函式中省略 return 就基本上是等於 return; 或是return undefined; ，但是在 finally 的區塊內部會因為你省略 return 而造成將完成值複寫的問題 (但是如果你故意在裡面 return 還是會被複寫就是了)

那...
如果 finally 裡面加上了 break 又會發生什麼事 ...?
先跟你說母湯安餒xD
你會發生的是 break 將會取消掉 return 的完成值，那維護你 code 人就會想要拿刀殺了你。

Switch

之前提過這個的用法，基本上就是用來取代 if..else..if.. else 的串鏈這種寫法加的簡潔，
那你知道嗎?

• switch 包裹的東西和 case 之間的比對動作是用 === 的也就是絕對的值，如果想要用 == 你可以嘗試用下面的寫法。

  const a = "17";
  
  switch(true){
      case a == 18:
          console.log("I\'m 18 or \'18\' ");
          break;
      case a == 17:
          console.log("I\'m 17 or \'17\' ");
          break;
      default:
          // 不會到這兒
  }
  // "I'm 17 or '17' "
  

• default 是 option 的，而且他不一定要放在最後，如下面範例。

  const a = 10;
  
  switch(a){
      case 1:
      case 2:
          // 不會到這
      default:
          console.log("default");
      case 3:
          console.log("3");
          break;
      case 99:
          console.log("99");
          break;
  }
  // "default"
  // 3
  

  結果會是這樣是因為 switch 找不到相符的值，直接走到 default 但是又沒有 break 所以直接到了 case 3 然後遇到了 break 才停止。

以上

比我預期中讀的進度還要落後很多...
不過沒關係！我們細水長流 (是這樣說嗎xD)
明天開始就換下一本書囉！
範疇與 Closures / this 與物件原型

期待期待~

參考來源：

你所不知道的 JS｜導讀，型別與文法 (You Don't Know JS: Up & Going)