JavaScript核心概念 - 陳述式與表達式

發表於 分類於

陳述式（Statement）

用於命令或指定一系列的操作，要注意的是此語法不會回傳一個結果 。例如：

  • 宣告 var, let, const,
  • 函式 function,
  • 迭代 for 迴圈,
  • 流程控制 if…else…

……等等，可參考 陳述式 MDN。

表達式（Expression）

又可稱為表示式與運算式，經常透過一些符號結合上下文並運算及回傳一個結果 。可以分成兩種類型：

  • 運算式 a = 1 。 這個使用 = 運算子的運算式會將數值 1 賦與給 a。 運算式本身也會被解析為 a。
  • 運算式 1 + 2 。 這個運算式使用 + 運算子把 1 和 2 加起來，沒有將值賦予任何變數。

可參考 運算式與運算子 MDN 內的運算式 part。

陳述式不能作為值進行賦予

以下範例為陳述式，語法並沒有錯誤也可以正常執行，但若我們將 if 陳述式賦予到 a 變數時，則會發生錯誤，這是因為我們上面提到的，陳述式並不會回傳一個結果，所以會發生錯誤。

1
2
3
4
5
6
7
8
9
10
// 陳述式
var a
if(1 === 1){

}
// 將陳述式賦予到變數上
a = if(1 === 1){

}
// 會跳錯

函式陳述式與函式表達式

函式陳述式

又稱為具名函式。我們這邊直接宣告一個函式並給予一個名稱，所以是函式的陳述式。

1
2
3
function sayHello() {
  console.log('Hello');
}

函式表達式

又稱為匿名函式。我們這邊先宣告一個變數，然後再把後面的函式賦值到變數上，所以是函式的表達式。

1
2
3
var sayHello = function() {
  console.log('Hello');
};

以上兩種函式在 hoisting 的結果會有差別，可以參考 JavaScript核心概念 - 提升(Hoisting) 這篇。

Block 區塊與物件實字

Block 區塊屬於陳述式，可以用來定義 ES6 語法的作用域，例如 let 及 const，我們在 Block 中用 const 宣告一個常數，但在 Block 外調用 a 常數變數時，是無法取得的。
最後，因為陳述式並不會 return 值，當然也無法賦予到變數上。

1
2
3
4
5
6
7
8
9
// block 陳述式
{
  const a = 1
}
console.log(a) // 無法取得 a 變數
// 賦值到變數上會跳錯， Uncaught SyntaxError: Unexpected identifier
var b = {
  const a = 1
}


下面的語法我們稱為物件實字，是 JavaScript 定義物件的一種方法，為函式表達式，因為他是表達式，會 return 一個值，而在這邊是 return 一個物件，所以我們可以賦予到變數上。

1
2
3
4
5
6
7
8
// 物件實字 （JavaScript 定義物件的一種方法，為函式表達式）
{
  a: 1;
}
// 賦值到變數上是OK的，表達式會 return 一個物件
var c = {
  a: 1
};
0%