前端筆記-JavaScript-陳述式與表達式

前言

Jul 2, 2021

今天來學習JavaScript中什麼是陳述式(Statement)，而什麼是表達式(Expression)呢?

陳述式顧名思義就是用來陳述一件事情，用來命令執行指定的一系列操作，所以他的特徵就是『不會回傳結果』。

if…else… — 例如 if else 語句，用來判斷並且執行一些事情，語句本身並不會回傳一個結果。

var, let, const — 變數的宣告也是，只是讓記憶體替該變數保留空間，本身不會回傳結果。

function — 函式的陳述式只是用來執行一些操作，函式的陳述式本身不會回傳任何值。

for 迴圈 — 迴圈本身用來重複執行迴圈內的操作，迴圈自身不會回傳任何值。

又稱為表示式，運算式，用來計算或回傳一個結果，通常會配合一些符號及運算子來結合上下語句。

x = 7 — 回傳7。

3+4 — 透過運算子相加，但不賦予到任何變數上，即使如此這句表達式本身依然會回傳7。

7 === 7 — 透過運算子做全等的比較，會回傳 true。

function callName() {
  ...
}

函式陳述式又稱為『具名函式』，我們直接給他一個命名（callName），並且在大括號內撰寫函式要執行的內容，而本身這個函式不會回傳任何值。

var callName = function() {
  ...
}

函式表達式首先會宣告一個變數，然後透過運算子在等號的後方寫入一個不具名的函式，賦予到該變數上，所以我們又稱為『匿名函式』。

因為兩者的宣告方式不一樣，在 Hoisting 提升上的順序會有不同，這點要特別注意！

{
  ...
}

像這樣的一組大括號，我們可以稱他為一個『block』，也是一種陳述句，通常會搭配如 if、for 等語句來使用，但搭配不同得的內容可以代表不同的意義以及功能。

{
 var ming = '小明';
}

像這樣我在大括號內放入一些執行內容，用來陳述一些語句，此時這個大括號就是一種函式的陳述式。

var ming = {
  var ming = '小明'
} //這樣是不行的

也因為是陳述式，不會回傳結果，因此無法賦予在變數上。那這樣的語句有什麼用處呢？

{
  let ming = '小明'
}
console.log('小明'); //無法取得

像這樣我使用 const 或 let 方式來宣告的變數，就會被大括號限制住作用域，外層無法取得。

{
 ming: '小明'
}

另一種我在大括號內放入屬性跟值的方式，稱為『物件實字』，是一種函式的表達式，可以回傳一個物件，因此我可以把它賦予到一個變數上。

let ming = {
  ming:'小明'
} //這樣可以

透過瞭解陳述式與表達式我們可以更清楚整個程式語法的脈絡，進而寫出更符合需求的程式碼，也更容易去除錯。