[JavaScript] Javascript 的表達式 (Expressions)和陳述式 (Statements)：一個用說的，一個用做的

Published in

itsems_frontend

5 min readJul 20, 2020

Outline:
- 表達式 Expressions
- 陳述式 Statements
- 函式表達式 Function Expressions
- 函式陳述式 Function Statements

表達式 Expressions

Express 這個單字本身就帶有表達的意思，定義上先來看看MDN 怎麼說：

An expression is any valid unit of code that resolves to a value.
> 任何會回傳值的程式碼片段都算是表達式

Expressions 為最終會回傳值的程式碼，通常會經過運算，簡單來說就是只要你輸入這段程式碼，可以形成一個值，就算是表達式。他不一定是個完整的語句或是函式，這個值也不一定要儲存在某個變數，只是片段的程式碼也可以是表達式。

x = 1; // 1

這就是表達式的第一種類型：「算數」，而 Javascript 有以下幾種表達式的類型：

算數 (Arithmetic)：算出數字，通常會用到「算術運算子 (ex: +, %, ++ )

5;   // 5
1+1; // 2

字串 (String)：解析出字串，通常會用到「字串運算子 + 」

'emma'        // emma
'hi' + 'emma' // hiemma

邏輯 (Logical)：解析出 True/False，通常會用到「邏輯運算子 && || ! 」

3 > 2; // true
1 < 2; // true
true;  // true
a == 1 && c === 2

主流運算式 (Primary expressions)：Javascript 基本的關鍵字和運算式

this;    // 當前物件
'emma';  // 字串
123;     // 數字
false    // 布林
sum;     // 變數 sum 的值

左側運算式 (Left-hand-side expressions)：左側是指定值的對象

a = 10;  // 指定左側變數的值var obj = {};
obj.name = 'emma';  // 指定物件var arr = [];
arr[0] = 18;  // 指定陣列

陳述式 Statements

陳述式一定會執行一些動作，但是不會回傳值或結果，常見的陳述式像是：

流程控制 (Control flow)：if…else, switch, break
變數宣告 (Declarations)： var, let, const
函式宣告與類別 (Functtions and classes)：function, async function, return, class
迭代 (Iteration)：for, do…while, for…in, for…of, while
其他：debugger, export, import, label

以上這些都會執行指定的動作，但是不會回傳值

函式表達式 Function Expressions

將具名 / 不具名函式以指派給變數的方式宣告，這種類型的函式就稱為函式表達式：

// 具名函式表達式
var myName = function getName(x){
  console.log(x); }
myName('emma')  // emma// 不具名函式表達式 (anonymous function expression)
var getNum = function(x){
  console.log(x); }
getNum(123)    // 123

note: 這邊宣告的變數會被提升 (hoisting)，函式不會，不太清楚提升可以看這裡：[JavaScript] Javascript 中的 Hoisting(提升)：幫你留位子

函式陳述式 Function Statements

我們一般常見的函式定義方式，就是函式陳述式 (Function Statements) :

function hi(){
  console.log('hi');
}

這種函式不會回傳任何值，只是執行了一些行為，而且會被提升 (hoisting)。

在 JavaScript 中，Function 就是物件的一種 ，所以這個名為 hi 的函式，就像是函式的 name 這個屬性的值是 hi ，而 code 這個屬性的值為 console.log(‘hi’); ，匿名函式則是屬性 name 沒有值的函式。

表達式和陳述式之間

表達式和陳述式之間，我想就像是「一個用說的，一個用做的」的兩個人，表達式就是用說的那個人，不管怎麼樣就是想要告訴你一些什麼 (回傳值)，而陳述式就是一個行動派的人，什麼也不說，只知道硬著頭皮做。

內容若有任何錯誤，歡迎留言交流指教！ 🐧

ref:
MDN-Expressions
MDN-運算式與運算子
 MDN-Statememts
MDN-陳述式與宣告
 JS 原力覺醒 Day07 — 陳述式表達式
 JavaScript Expressions and Statements
MDN-Function expression
MDN-函數表達式