JavaScript 語句類型可被分為陳述式與表達式，而兩者差別敘述如下：

陳述式 Statement

陳述式是用於命令執行指定的一系列操作，最大的特徵是不會回傳結果

陳述式的類別

陳述式常見的類別有：

• 流程控制 (Block 區塊、if else、switch)
• 宣告 (var、let、const)
• 函數與類別 (function、return)
• 迭代 (for 迴圈、while)
• 其他 (debugger、export、import)

詳細類別可看 MDN - 陳述式與宣告

陳述式的範例

利用 Chrome 的開發者工具在 console 上輸入 宣告 與 if 語句，因為陳述式不會回傳值，只會跳出undefined

• var 宣告

  

• if 語句

  

陳述式的注意事項

因陳述式不能回傳結果，因此不能賦值在其他變數上

var nickName = if(1===1) {};
// Uncaught SyntaxError: Unexpected token 'if'

表達式 Expression

表達式又可稱為表示式、運算式，常會透過一些符號(運算子)結合上下語句來運算並會回傳結果

表達式的類型

• 算術 (ex: 123)
• 字串 (ex: "string")
• 邏輯 (ex: True)
• 主流運算式 (ex: this)
• 左側運算式 (ex: new)

詳細類別可看 MDN - 運算式與運算子

表達式的範例

利用 Chrome 的開發者工具在 console 上輸入表達式，會回傳結果

範例1

輸入 100+100 會回傳 200

範例2

賦值運算子 為表達式，所以會回傳值

var nickName; // 陳述式

nickName = 'Carol'; // 表達式

若再次在 console 輸入 nickName，會回傳 Carol

所以陳述式、表達式不一定是一個完整的語句，只有其中的片段也是可以稱為表達式或陳述式

函式陳述式與函式表達式

函式也有分為 函式陳述式與 函式表達式，兩者最大的差異在於使否有提升

在 Day7 提升 中，也有提到關於函式陳述式與函式表達式的差異

函式陳述式

函式陳述式又稱為具名函式，直接宣告一個函式並給予一個名子，在創造階段時，會先在記憶體中將函式陳述式的所有內容做保留(提升)

function fn() {
    // ...
}

函式表達式

函式表達式又稱為匿名函式，會先宣告一個變數，再使用等號運算子將右邊的函式賦值到左邊變數上，因不會被提升，所以若要利用函式表達式，就必須等到執行階段，函式已經賦予到變數上，才能運行此函式

var fn = function() {
    // ...
}

Block 常誤解的區塊

Block 語句

Block 語句為陳述式，且可以包含陳述式，並以大括號 { } 來界定區塊

{
    陳述式1
    ...
    陳述式n
}

範例

{
    var nickName = 'Carol';
}

Block 不能用變數接收

前面提到 Block 語句為陳述式，而陳述式不能回傳結果，因此不能賦值在其他變數上

// 因是陳述式不能用變數接收，故會報錯

var people = {
   var nickName = 'Carol';
}
// Uncaught SyntaxError: Unexpected identifier

物件實字

若在 Block 內放入表達式，則為物件實字，是 JavaScript 定義物件的其中一種方法

{
    nickName = 'Carol';
}

也因物件實字是表達式所以可以用變數接收

var people = {
    nickName = 'Carol';
}

因 Block 的關係，let、const 作用域只在 Block 內，在 Block 外層是無法取到此變數

// 在 Block 外無法提取變數 nickName

console.log(nickName); // Uncaught ReferenceError: nickName is not defined
{
    const nickName = 'Carol';
}

另外因 var 為 函式作用域 所以在 Block 外層是取的到此以 var 宣告的變數

console.log(nickName);
{
    var nickName = 'Carol';
}

參考文獻

六角學院 - JavaScript 核心篇

MDN - 陳述式與宣告

MDN - 運算式與運算子