# 何謂運算式(Expression)與陳述式(Statement)？

+++
title = "何謂運算式( Expression )與陳述式( Statement )？"
description = "「已讀不回」還是「熱情回應」?"
author = "POPEYE"
date = "2021-12-20"
tags = ["JavaScript", "運算式", "陳述式","Expression","Statement"]
categories = ["JavaScript"]
[[images]]
src = "img/2021/ExpressionStatement.jpg"
alt = "何謂運算式(Expression)與陳述式(Statement)？"

+++

電腦程式是由一堆命令電腦執行的「指示」所構成。就像人類日常溝通的語言，不同的語言有不同的文法結構；在不同的程式語言，指示電腦執行命令的語法也不相同，程式語言的文法稱為 syntax ，一個程式語言要能運作一定要按照規定的 syntax 來寫。

JavaScript的語法可以分成兩種：

- 陳述式( Statement )
- 表達式( Expression )，也被稱為表示式或運算式。

## 陳述式

MDN 對於陳述式( Statement )的定義：

> **陳述式與宣告**
JavaScript 應用程式由**適當的陳述式**組成。一個單一的陳述式可以跨用好幾行。 多個陳述式也可以藉由分號分隔來寫在同一行。 這不是一個關鍵字，而是一群關鍵字。
>

這段字每個字都看得懂，但是組在一起卻像是文言文，讓人看好幾次，還是一頭霧水。

讓我吃掉哆啦A夢的翻譯年糕來解釋一下，陳述式就是由一些程式碼所組成的指示，最重要的是**陳述式執行後，不會回傳結果**。像是變數的宣告．．．

簡單來說，就是陳述式(Statement)所傳的訊息，都被瀏覽器「已讀不回」。

陳述式常見的類型：

- 宣告(var、let及const)
- 流程控制：如if...else....、switch ...等等
- 迴圈
- 函式(function)
- 區塊(block)
- 其他

我們繼續用《射鵰英雄歪傳》來模擬陳述式的運作：

有一天歐陽克想要約黃蓉吃飯，古代可能要飛鴿傳書，現代則只要傳 Line，但是結果都是一樣的，鴿子被射下來烤乳鴿，傳 Line 被蓉妹「已讀不回」。


讓我們把上面的對話寫成JavaScript的程式碼，在瀏覽器的console視窗測試一下，看看會有甚麼結果：


以上的那些程式碼都是陳述式(Statement)，都對瀏覽器做了某些指示，但是執行完畢，沒有回傳任何數值。所以上面那張圖裡面說了一大串，但是圖的最下面只跑出了undefined。

不過最後的if(…)那邊有貓膩喔？這點我在運算式的部分再深入解釋。

## **運算式**(Expression)

Expression ，中文有人翻譯成表達式、表示式或運算式，MDN 的定義如下：

> **運算式**
運算式是任何一段可以取得一個值的程式碼。
任何合乎語法的運算式都能取得一個值，概念上， 有兩種不同型態的運算式: 有副作用的 (例如: 將一個值指定給一個變數) 以及只為了取得值而解析的運算式。
>

上面那段話最重要的地方就是**「任何一段可以取得一個值的程式碼」，運算式(Expression)執行後一定會回傳一個值**。這也是**運算式**( Expression )與陳述式( Statement )最大的不同。

在這裡繼續用《射鵰英雄歪傳》來模擬運算式的運作(筆者一定要這樣亂入嗎???)：

運算式就像是郭靖傳Line約黃蓉吃飯一樣，戀情正火熱燒著，就算是吃滷肉飯，黃蓉也會秒回答應！！不會「已讀不回」！


在這裡也讓我們用console來模擬一下上面那一串對話：


比較需要注意的是if(…)的(…)，需要布林值 true 、 false 來判斷條件會不會成立，所以(...)裡面會放運算式( Expression )，但 if (…){…} 這段程式碼本身是陳述句，不會回傳任何值，也無法將它賦值給變數。

if (condition){
   //statement1
}
else{
   statement2
};

由此可知運算式可能會混在陳述式之中，例如變數宣告本身式陳述式，但是 ＝ 號右側的部分卻屬於運算式。

要注意的是，我們這一段 if (...) 述句，執行之後雖然在 console 視窗下出現結果，不過那不是回傳一個值(存在記憶體中)，而是執行了 console.log() 印出的指令，印在 console 視窗上，這一個小小的坑在我剛學 JavaScript 時困惑了一陣子。

而且該放陳述式的地方是不允許放運算式的，例如 if (…) 的 (…) 裡面如果是陳述式，if述句就不知道該怎麼執行了。所以在一個會產生值的地方，是不能放入陳述式( Statement )。


最後整理一下重點：

JavaScript 的語法可以分為兩種，分別是陳述式( Statement )與運算式( Expression )，兩者的區分如下：

- 陳述式( Statement )會執行一個指令，產生一個動作，但是不會回傳一個「值」。(已讀不回)。
- 運算式( Expression )會回傳一個值。
- 陳述式( Statement )中可以放入運算式來進行判斷，但是預期要放入運算式( Expression )的地方，也就是預期會產生一個值的地方，不能放入陳述式。

我是初踏入前端領域的老學徒，如果有寫錯的地方還請大家包涵與指正，謝謝大家！

參考資料

[重讀 Axel 的 Javascript 中的 Expression vs Statement 一文](https://andyyou.github.io/2016/03/06/expressions-vs-statements-in-js/)

[Day16　函式陳述句與函式表示式](https://ithelp.ithome.com.tw/articles/10192146?sc=pt)

[https://www.w3schools.com/js/js_statements.asp](https://www.w3schools.com/js/js_statements.asp)

[JavaScript 表達式觀念及運用 - JS Expression](https://wcc723.github.io/development/2020/09/17/js-expression/)

[JavaScript 核心篇 學習筆記: Chap.17 — 陳述式與表達式](https://medium.com/@yining1204/javascript-%E6%A0%B8%E5%BF%83%E7%AF%87-%E5%AD%B8%E7%BF%92%E7%AD%86%E8%A8%98-chap-17-%E9%99%B3%E8%BF%B0%E5%BC%8F%E8%88%87%E8%A1%A8%E9%81%94%E5%BC%8F-c51f4b395180)

[JS 原力覺醒 Day07 - 陳述式 表達式](https://ithelp.ithome.com.tw/articles/10218937)