# 什麼是表達式與陳述式？ ###### tags: `六角學院` `Javascript` --- ### 表達式與陳述式的基本定義 這個主題在 Javascript 中算是有一點抽象的概念，就像是我們日常語言中的動詞、名詞、連接詞等等，但實際上沒有這麼容易分辨。 在 Javascript 中程式碼的語句類型僅分為兩種，分別為 ==陳述式== 及 ==表達式== ，其中表達式更為重要，如果能夠熟練表達式更能解決許多開發上的問題，也更能活用各種語法。 基本定義如下 : - 表達式 (Expression) 一段程式碼如果執行後 ==會回傳結果== 那他就屬於表達式。 - 陳述式 (Statment) 一段程式碼如果執行後 ==不會回傳結果== 那他就屬於表達式。 > 也許回傳結果這件事有一些抽象，我們可以舉幾個例子來看 --- ### 表達式與陳述式的範例說明 核心概念可以用最白話的方式來說明 : :::info 一般情況下，當你在chrome開發者工具中的 console 寫了這段程式碼，按下 enter 執行後會發生什麼事？ ::: ```javascript= a = 55 ; // 按下 enter 執行後 => 55 5 * 6 ; // 按下 enter 執行後 => 30 'a' + 'b' ; // 按下 enter 執行後 => 'ab' false + 100 ; // 按下 enter 執行後 => 100 ``` 以上這些都是屬於程式碼執行之後，==沒有存到一個變數中==，而是直接在記憶體中產生一個值， 並且回傳回來，所以他們都是屬於表達式，可以想像成會直接把結果==表達==出來。 ```javascript= var a ; // 按下 enter 執行後 => undefine if(a === 3){} // 按下 enter 執行後 => undefine ``` 可以看到這個常見的 ==undefine== ，他並不是指你執行的程式沒有成功，而是你寫了一段 ==陳述== 來執行某一些句子，通常會把結果存在一個變數中，或是進行條件判斷讓程式去執行某一段程式碼，差別在於他並沒有直接回傳任何東西。 > 可以想成執行後電腦就會告訴你「好！我知道了！」，這個「好！我知道了！」就是 undefine。 --- ### 表達式可以放在陳述式裡面？ 這兩者另外一種想法可以解釋成: - 陳述式通常會是一個 ==完整的句子==，譬如 var 宣告、函式宣告、 switch 判斷、 {} 函式區塊、 break 等等。 - 表達式 ==不一定是一個完整的句子==，他可以放在陳述式裡面，最經典的範例就是作為 if 表達式中的判斷條件。 ```javascript= // 函式陳述式宣告一個函式，按下 enter 執行後 => undefine function fn() { return 1; }; // 表達式 : 執行函數會有一個回傳值，按下 enter 執行後 => 1 fn(); ``` 以下的例子，這整個句子是一個陳述式，但他裡面包含了表達式 : ```javascript= // a是一個表達式，他可以放在if中作為判斷條件 if(a){ console.log('123'); } // 按下 enter 執行後 => undefine ``` > 當然還會有更複雜更多表達式放在陳述式中的例子，不過綜合來說可以想成，表達式是會傳一個值出來給陳述式使用，讓陳述式去進行想做的事情。妳不會把一個陳述式放在 if() 裡面進行判斷，因為他是一個描述並不會告訴你任何值，當然就沒辦法進行判斷啦！ --- ### 結論 - 表達式和陳述式的差別是會不會回傳結果以及是否可以不用獨立出現。 - 表達式用途很廣，通常會放在陳述式中使用。 - 陳述式通常是宣告某件事情，是一個完整的敘述，裡面很可能會參雜很多表達是作為判斷。 :::success 如果你還是不太懂也不太會分辨，那就打開 chrome 的開發者工具 console，勇敢地按下 enter 就會知道啦 :100: ::: --- ### 參考資料 [JavaScript 表達式觀念及運用 - JS Expression](https://wcc723.github.io/development/2020/09/17/js-expression/) [Weird-JavaScript 20：函式陳述式與函式表達式](https://luffy.website/2019/08/15/weird-JavaScript-20/#%E5%87%BD%E5%BC%8F%E8%A1%A8%E9%81%94%E5%BC%8F%EF%BC%88Function-Expression%EF%BC%89)