# [JavaScript] 表達式（Expression）與陳述式（Statement）
###### tags: `前端筆記`
## 總結
1. 表達式（Expression）會回傳值的代碼
2. 陳述式（Statement）不會回傳值的代碼

### 表達式（Expression）
>An expression produces a value and can be written wherever a value is expected. ([ref.](https://2ality.com/2012/09/expressions-vs-statements.html))
>表達式（Expression）會回傳值且可以被寫在任何地方。

參照 [MDN](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Expressions_and_Operators#expressions) 表達式（Expression）有以下類別（==要注意瀏覽器都有回傳值==）：
1. arithmetic（算數）
2. string（字串）
3. logical（邏輯）
4. Primary expressions（主要表達式，JavaScript 的 keyword）
5. Left-hand-side expressions（左側運算式，等號左側的值和右側的值直接連接 => 也就是更新變數連接的記憶體 / 直接宣告全域變數）

### 陳述式（statement）
>陳述式一定會執行一些動作，但是不會回傳值。

所以沒傳值的就是陳述式（statement）：
1. 變數宣告（var, let, const）
2. 判斷（if...else...）
3. 函式宣告（function, asyc function...）
4. 迭代（for loop, while...）

### 陳述式（statement）跟表達式（expression）可以放在一起嗎？
可以喔，比方來說宣告變數跟 `if` 就是很好的例子：

const b = 3;
  陳述式 | 表達式
  
if ( x === 0) {
  console.log('Hello World');
}

if (表達式) {
  陳述式
}

如果在不對的地方放錯的東西就會錯誤：


### 範例
1. 很像陳述式（statement）的表達式（expression）[ref.](https://2ality.com/2012/09/expressions-vs-statements.html)

 {
   foo: 12
 }

這個還是表達式喔，因為實際在瀏覽器跑的話確實會回傳 `foo`！

## 參考資料
1. [[JavaScript] Javascript 的表達式 (Expressions)和陳述式 (Statements)：一個用說的，一個用做的](https://medium.com/itsems-frontend/javascript-expressions-and-statements-7bd374effc95)
2. [Expressions versus statements in JavaScript](https://2ality.com/2012/09/expressions-vs-statements.html)
3. [重讀 Axel 的 Javascript 中的 Expression vs Statement 一文
](https://andyyou.github.io/2016/03/06/expressions-vs-statements-in-js/)
4. [Expressions and operators](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Expressions_and_Operators#expressions)