###### tags: `六角JS 直播班 - 2021 秋季班`
什麼是表達式與陳述式？
===

JavaScript的語句類型分為兩類：
- 表達式(Expression)
- 陳述式(Statement)，也有人說是表示式或運算式

## 表達式(Expression)

特點在於會回傳一個值，常見的如下：
- 純值
- 運算值
- 執行函式
- 函式表達式
- 正規表達式

### 以下來看看上述各個範例吧！
<br>

- **純值**
顧名思義就是單一個值，在DevTools輸入一個數值按下enter後，它將回傳該數值給你，因此數值為表達式之一。


<br>

- **運算值**
透過一些運算子，計算後並回傳值。

123===123 //回傳true
5+2 // 回傳7
a=1 //回傳1，賦值運算子也是表達式

- **函式陳述式**
定義一個函式並呼叫它。

function abc (){
    return 123
}

abc(); //呼叫
//回傳結果：123

- **函式表達式(匿名函式)**
將函式賦予給一個變數，中間的=為運算子

let myLet = function () {}

<br>

## 陳述式(Statement)
執行命令的動作，下了指定執行完畢後，不會回傳值，以下將常見的列出：
可見[MDN](https://developer.mozilla.org/zh-TW/docs/Web/JavaScript/Reference/Statements)會有更完整的分類！

- 流程控制
- if...else
- switch
- block{}
- 宣告
- var
- let
- const
- class
- return

- 迴圈
- for
- while

- 其他
- debugger
- export
- import

<br>

## 舉一個特別的例子:if...else
if本身為陳述式，當中的{}放的是陳述式，()需要放的是一個條件，用來判斷如何執行後面的程式碼，所以()能放的僅能是表達式，如果放了不會回傳值的陳述式，Js不知道如何判斷則會報錯。

if(//表達式){
//陳述式
}else{
//陳述式
}

if(let a = 1){
console.log("我是陳述式")
}else{
console.log("我也是陳述式")
}

//Uncaught SyntaxError: Unexpected identifier

<br>

> **特別注意！容易搞混的觀念**
>表達式跟陳述式並非一定要是完整的語句，片段也可以，其中表達式可以單獨出現，也可以跟陳述式混用，如上方舉例！
<br>

## 結論
簡單來說，觀察是否會回傳值就是辨別這兩者最直接的方法，表達式會回傳值，陳述式則不會。
陳述式可以跟運算式混用，放入運算式的地方不可放成陳述式，不然可是會報錯的喔！

<br>

>**參考資料:**
>[何謂運算式(Expression)與陳述式(Statement)？](https://hackmd.io/EW_7JhRaTHmuH6XpksRguw)同學超讚的筆記🙌
>[JavaScript 表達式觀念及運用 - JS Expression](https://wcc723.github.io/development/2020/09/17/js-expression/)
>[陳述式與宣告 MDN](https://developer.mozilla.org/zh-TW/docs/Web/JavaScript/Reference/Statements)