前情提要

艾草：「我们今天来聊聊话语艺术。」

「咦，这跟魔法有什麽关联吗？」

艾草：「嗯，算是某种言灵魔法，话语间的艺术有时候会为你带来好的结果，有时候看起来没有回传些什麽，但默默的在作用着唷！」

「嗯，那你话语艺术是不是修得不好？明明都是说中文我怎麽听不懂！」

「．．．，才没有！那是你不懂，今天先来教你如何区别言灵魔法之陈述式、表达式带来的差异吧！」

陈述式与表达式

陈述式与表达式分别代表什麽，又有何种差异呢？

首先陈述式与表达式最大的差别就是：丢进开发人员工具时是否能回传一个结果！

接下来让我们来了解，有哪些是陈述式、哪些是表达式吧！

陈述式 Statement

陈述式 Statement 不会回传结果，例如：

• 流程判断(if...else、Block、switch)等
• 变数的宣告(var 、 let 、const)等
• 函式(function)

把陈述式丢进开发人员工具内，会看到回传结果，如下：

可以看到陈述式不会回传结果。

表达式 Expression

表达式不用是很长的程序码，也可以很简短。

例如：纯值，表达式的很常是运算子，基本上运算子都会回传值。

这些常见的程序码，都算是表达式：

1 + 1;

true == false ;

2 > 1 || 1 < 2;

 "123";

将表达式放进开发人员工具时，都会回传对应的值。

当你使用阵列方法要移除阵列中的值时，其实也是表达式：

let num = [1,2,3];
num.push(5);
num.pop();

而表达式到底会回传什麽值呢？

我们可以透过文件查看，以阵列方法 push 举例，可以看到 MDN 文件上会记载回传值：

回传值
呼叫此方法之物件的新 length 属性值。

透过观看表达式会回传什麽值，也可以更了解每个值代表的意义。

另外有些文件上会特别注明，需要将参数放入表达式，例如陈述式 switch :

以下范例程序码取自 MDN ：

switch (expression) {
  case value1:
        //当 expression 的值符合 value1
        //要执行的陈述句
    break;
  case value2:
        //当 expression 的值符合 value2
        //要执行的陈述句
    break;
  case valueN:
        //当 expression 的值符合 valueN
        //要执行的陈述句
    break;
  default:
        //当 expression 的值都不符合上述条件
        //要执行的陈述句
    break;
}

switch 就会很明确的说明小括号内需要放入表达式，而每个 case 内要放入执行的陈述式，此时如果我们在 switch ()小括号内放入陈述式就会导致错误的结果。

表达式与陈述式常常都是搭配使用，也许我们已经很习惯使用它们了，但对它们多一些了解可以避免踩到一些莫名的雷区。

最後，让我们复习一下函式陈述式、函式表达式吧！

函式陈述式

底下的范例为函式陈述式。

function statement() {
  console.log("我是陈述式");
}
statement();

函式表达式

函式表达式的该如何撰写呢？
首先，先宣告一个变数後，在将一个函式赋予给该变数。

let expression = function () {
  console.log("我是表达式");
};
expression();

函式陈述式、函式表达式有很大的差异在：函式陈述式会被提升、函式表达式不会。

它们的区别是在函式表达式被提升的仅有变数，所以该函式无法提前呼叫，但函式陈述式在创造阶段就已被存入记忆体内，所以可以提前呼叫该函式，至於提升到底是什麽呢？

下一篇让我们详细的了解提升吧！

总结

• 陈述式 Statement 不会回传结果，例如： if else
• 表达式 Expression 会回传值，例如：运算子

参考文献

https://developer.mozilla.org/zh-TW/docs/Web/JavaScript/Reference/Statements
https://wcc723.github.io/development/2020/09/17/js-expression/