JavaScript Expressions vs Statements

了解 JavaScript 陳述式與表達式

@ JavaScript

Expressions 表達式

表達式產生一個值
  • 1 產生值 1
  • 你好 產生值 你好
  • 5 * 10 產生值 50
  • age >= 18 產生值 true 或 false
  • isHappy ? "🙂" : "🙁" 產生值 🙂 或 🙁
  • (function () { return 'Hi'; }()) 產生值 Hi
  • ({a: 1}) 產生值 {a: 1}

Statements 陳述式

執行動作完成任務

運算是就像是指令，使用它會執行一些預定的動作。有陳述式的地方都可以輸入表達式

// 指派 `5` 到 `age` 變數
const age = 5;
// 如果 `age` 大於等於 18，就執行 ...
if (age >= 18) {
  // ...
}

表達式與陳述式

表達式會產生一個值，它可以獨立存在，也可以作為其他語句的組成部分。此外在特殊的情況下你會需要使用 ()🔗 來包覆表達式，否則 JavaScript 會錯誤的將其當作陳述式。

// IIFE Immediately Invoked Function Expression
(function () {
  // ...
})();
// Return Object
const f = () => ({ a: 1 });

總結

還有一個簡單的方法辨別表達式與陳述式，就是把它們丟進 console.log，如果無語法錯誤且能執行就是「表達式」，反之就是「陳述式」(或單純是不合規的語法)。我回過頭來才發現表達式與陳述式的重要性，特別是像在寫 React / JSX 這類框架上的一些奇怪的限制，像是：「只能回傳一個元素」、「為什麼要用表達式來撰寫？」，實際上是 JavaScript 本身運作上的限制。

參考文章