> 如果有記憶吐司就好了...
# if 與 switch 的使用時機？

身為JS條件判斷的兩大語法,雖然兩者基本上可以做到相同的作用,但是卻有著值得我們去探討的差異,讓我們來比較看看這兩者的差別吧!
### 語法差異
* **if else:** 當條件成立的時候會執行其陳述式裡的程式，而不成立時則執行另外一個陳述式。
> if else是將整個要判斷的內容放在條件式，其條件式是使用布林值作為判斷基礎,若第一個條件式不成立就會往下一個執行,若條件式成立就執行該區塊的結果,若不成立就會一直執行最後面else的結果。*
* **switch case:** 括號內放入表達式，接著就會表達式裡的值是否符合case條件，然後再執行此條件相關的陳述式。

> switch case的判斷方式則不同，它是將表達式的值與case裡的值做比較，其條件判斷是分佈在「表達式」與「case」裡,通常表達式為單一的值或是運算式,只要有符合的case就會直接執行該區塊的結果,每一組case後面都要放break來告知程式中斷,若沒有加break則會於符合的case開始一直往下執行所有的結果,不管是否符合case,而switch case的default就像是else一樣,當其他的case皆不符合,將執行default的結果。

// if else語法
if (條件式一){
  // 若條件式一成立，則執行此區塊
}
else if (條件式二){
  // 若條件式二成立，則執行此區塊
}
else{
  // 若上述條件都不成立，則執行此區塊
}

// switch case語法
switch (表達式){
  case value1:
    //當 expression 的值符合 value1，則執行此陳述句
    break;
  case value2:
    //當 expression 的值符合 value2，則執行此陳述句
    break;
  ...
  case valueN:
    //當 expression 的值符合 valueN，則執行此陳述句
    break;
  default:
    //當 expression 的值都不符合上述條件式，則執行此陳述句
    break;
}

### 可讀性
* **if else：** 非常直覺，可套入人類的思考邏輯，如：「如果今天下雨，就要帶傘，沒有就不需要」，想到有什麼就寫什麼，之後若要再修改條件也是非常容易，因此很常被使用。
* **switch case：** 無法想到什麼就寫什麼，需要先仔細想想該如何應用。另外，在寫程式碼時還需注意加上break，程式才不會一直執行下去，假設判斷的東西變多，很有可能會有所遺漏。

這裡來看看若是沒加上break的話會有什麼結果：
> 如果忘記加break，那麼程式會從所對應的case開始執行，然後持續執行之後的case，不論正確不正確。

let num = 2;
switch(num){
  case 1:
    console.log(`1`);
  case 2:
    console.log(`2`);
  case 3:
    console.log(`3`);
  case 4:
    console.log(`4`);
  case 5:
    console.log(`5`);
}
// 輸出：2
// 輸出：3
// 輸出：4
// 輸出：5

### 嚴謹度
* **if else：** 不嚴謹，有時候會強制轉換裡面的參數。
* **switch case：** 嚴謹，在比較時使用「嚴格相等（===）」，需要在型別與值皆相同的情況下，才會成立。
> 一開始宣告變數為字串2，在if else裡會強制轉型為number去比較；而switch case就比較嚴格，要型別與值都相等的情況才成立。

let a = "2";
// if寫法
if (a == 1){
  console.log(`a等於數字1`);
}
else if(a == 2){
  console.log(`a等於數字2`);
}
else{
  console.log(`a不是數字1、2`);
}
// 輸出：a等於數字2

// switch
switch(a){
  case 1:
    console.log(`a等於數字1`);
  case 2:
    console.log(`a等於數字2`);
  default:
    console.log(`a不是數字1、2`);
}
// 輸出：a不是數字1、2

### 效能
這裡來比較一下兩者的效能如何，這裡使用迴圈來重複計算無用的數據，最後輸出計算時間。

// 宣告變數y為0
var y = 0;
// 計算當下時間
var x1 = performance.now();
// 使用if else
for (var i = 0; i < 10000000; i++) {
    for (var z = 0; z <= 4; z++) {
        if (z == 0) {
            y++;
        }
        else if (z == 1) {
            y--;
        }
        else if (z == 2) {
            y += 2;
        }
        else if (z == 3) {
            y -= 2;
        }
        else if (z == 4) {
            y += 3;
        }
    }
}
// 計算當下時間
var x2 = performance.now();
// 使用switch case
for (var i = 0; i < 10000000; i++) {
    for (var z = 0; z <= 4; z++) {
        switch (z)
        {
            case 0:
            y++;
            break;

            case 1:
            y--;
            break;

            case 2:
            y += 2;
            break;

            case 3:
            y -= 2;
            break;

            case 4:
            y += 3;
            break;
        }
    }
}
// 計算當下時間
var x3 = performance.now();

console.log(`執行if else所花費的時間：${x2-x1}`); // 輸出：102.70000000298023
console.log(`執行switch case所花費的時間：${x3-x2}`); // 輸出：90.09999999403954

### 使用時機
前面講了這麼多，到底要使用哪一個呢？

其實並沒有哪一個比較好，哪一個比較爛。每個語法被創造出來都有它擅長的地方，我們需要視情況來使用。如果需要「範圍取值」，那就是if else的強項；如果是「確定取值」，那就是用switch case來處理。

### 結語
最後稍微總結這兩者的差別。
| | if else | switch case |
| -------- | -------- | ----------- |
| 可讀性 | 較高 | 較低 |
| 嚴謹性 | 較不嚴謹 | 較嚴謹 |
| 效能 | 較低 | 較高 |
| 使用時機 | 範圍取值 | 確定取值 |

參考資料：
> https://jameshsu0407.github.io/blog/20211023_if-else_switch-case/
> https://hackmd.io/1Ssm6IY6RzSkipR4-ROnUg?view
> https://hackmd.io/@2aB7oKEoRxutmxFnScypxA/H1edwnKHY
> https://hsiangfeng.github.io/javascript/20200117/3217748743/
>