# <font class="h2">何謂表達式(Expression)與陳述式(Statement)？</font>

###### tags: `javascript`
<style>
.h2 {
background: linear-gradient(135deg,#fff,#537479) ;
color: #537479;
display:block;
padding: 6px 5px;
border-radius: 4px;
}
.h3 {
background: linear-gradient(180deg,#fff 50%,#c9d5d4) ;
color: #537479;
display:block;
padding: 6px 5px;
border-bottom: 3px solid #537479;
}
.h4 {
color: #537479;
font-weight:bold;
font-size:1.1em;
}
</style>

JavaScript 有兩種語法分類：陳述式與表達式。
表達式、陳述式、區塊它們都是語法容器
陳述式會執行動作、表達式會回傳某值
### <font class="h4">➤陳述式 Statement</font>
陳述式可能是幾個單詞或是一個片段（但不會是單一個字母）
陳述式一定會做一些事情，最大的特徵則是==不會回傳結果==

常見如下：
- 宣告（var、let、const、function）
- 流程控制（block`{}`、if…else、switch）
- 迴圈（for、for…in、while）
- 其它（import, export）
<br>

區塊陳述 （ Block Statement ）
`{}`block裡面的是表達式(Expression)，像是 if 的區塊一樣，在裡面會執行一些動作，但執行完成後也不會回傳任何數值，是屬於陳述式。
如果我們僅有使用 `{}` 這個意思是「物件」，這不會是一個陳述式，必須在其中加入一些片段程式碼才會是陳述式
:::info
==陳述式(Statement)不能賦值給一個變數==
陳述式不會產生數值，所以不能被放在 JS 內預期會產生數值的地方，例如「函式的參數」、「函式的回傳值」、或是「宣告變數」時等號的右邊（不能分配給另一變數）。
例:

ming = if(1 === 1){}//會報錯

<br>

此為函式陳述式，不可以賦值給變數

{ 
 var ming = '小明'; 
}
//如果將它賦值給變數就會報錯

var a = { 
 var ming = '小明'; 
}
//會報錯

<br>

此為物件實字，可以賦值給變數

{ 
 ming: ‘小明’ 
}
//可以賦值給變數

var a ={
   ming: ‘小明’ 
}
//不會報錯

:::
<br>

### <font class="h4">➤表達式Expression</font>

又可稱為表示式、運算式，經常透過一些符號(運算子)結合上下語句並運算及==回傳結果==
表達式是一段可以很長，也可以很簡短，只要是執行後會回傳結果的，就是表達式。
==「等號」是一個表達式。(所有的運算子都是表達式)==
常見如下：
- 純值
- 變數
- 運算子
- 執行函式
- 正規表達式
- 函式表達式
:::info
表達式範例:

//呼叫函式
functionInvocation()

//變數指派
a = 3

//運算式
1 + 2
a === 3
ture || false d
true && true
Array.isArray([]) ? doSomeThing() : doOtherThing()  

:::
<br>

表達式可以獨立出現，也可與陳述式混合使用。


<br>

### <font class="h3">函式</font>
JS的函式宣告，根據不同的方式可以是「宣告式」也可以是「表達式函式」

### <font class="h4">➤函式陳述式(具名函式)</font>

函式陳述式是藉由直接給定名字來直接宣告一個函式。

function callName(){

}

### <font class="h4">➤函式表達式(匿名函式)</font>

是把一個匿名函式指派給一個變數，之所以能夠這麼做是因為函式本身在javascript裡面也是一種物件，所以除了一般的宣告方式外，函式也能夠作為一個被指派的值。

var callName = function(){

}

這種宣告方式的函式內容不會在一開始就被提升，會被提升的只有該變數而已。在執行階段，才會把函式內容指派給變數
:::info
函式陳述式(具名函式)、函式表達式(匿名函式)兩者hoisting會不同
:arrow_right:[hoisting拉升](https://hackmd.io/@grayshine/rk9hv-TBt)
:::

<br>

---

https://wcc723.github.io/development/2020/09/17/js-expression/
https://ithelp.ithome.com.tw/articles/10218937
https://developer.mozilla.org/zh-TW/docs/Web/JavaScript/Reference/Statements