大仁的世界好複雜: JavaScript: Expressions vs. statements

一、前言

為什麼突然想講這個主題呢？因為在工作上，有大量的時間都在寫 JavaScript，然後從兩個人合作，到三個人合作，現在則是到了四個人合作，但彼此之前卻明有明訂的 coding style。雖然整體來說影響不大，因為大部分時間都是在 GTM(Google Tag Manager) 上編寫，影響範圍有所侷限，但長時間下來的 review 則會造成無形的成本增加。於是，我開始找尋適合的 coding style，卻意外地從 Strict mode 的設定，掉進 IIFE(Immediately Invoked Functions Expressions)，然後為了通透的理解 IIFE，所以深入了解 expression 跟 statement 的差別。

二、Expressions

1. 從 MDN 上看定義:

An expression is any valid unit of code that resolves to a value.

var a = 1; // statement
b = 2 ; // expression

2. Arithmetic Expressions:

1 + 1; // return 2

3. String Expressions:

'a' + 'b'; // return "ab"

4. Logical Expressions:

A. Logical AND(&&)

'Cat' && 'Dog'; // return "Dog"
'Cat' && false; // return false
'Dog' && true; // return true

B. Logical OR(||)

'Cat' || 'Dog'; // return "Cat"
'Cat' || false; // return "Cat"
false || 'Dog'; // return "Dog"

C. Logical NOT(!)

!'Cat'; // return false

5. Primary Expressions:

A. this

this.window; // return window

B. delete

const myObj = {a: 1, b: 2};
delete myObj.a; // return true
delete myObj.c; // return true
delete myObj; // return false
delete Math.PI; // return false
myObj2 = {c: 3};
delete myObj2; // return true

C. typeof

typeof 1; // return "number"
typeof 'String'; // return "string"
typeof String; // return "function"
typeof []; // return "object"
typeof {}; // return "object"
typeof true; // return "boolean"
typeof function() {}; // return "function"
typeof Function; // returns "function"
typeof undefined; // return "undefined"
typeof null; // return "object"
typeof NaN; // return "number"
typeof Infinity; // return "number"
typeof Date; // returns "function"
typeof Date(); // return "string"
typeof new Date(); // return "object"
typeof Math; // returns "object"

D. void

1 == '1'; // return true;
void 1 == '1'; // return false
void (1 == '1'); // return undefined

6. Left-hand-side Expressions:

我覺得這部分如果把下面的 assignment expressions 拿來這邊混淆，好像不太好。但我一時間好像也沒有辦法把這邊做比較完整的釐清，所以就暫時留白。

A. new

B. super

7. Assignment Expressions:

b = 2 ; // return 2

三、Statements

1. Control flow:

A. Block

B. break

C. continue

D. Empty

E. if...else

F. switch

G. throw

H. try...catch

2. Declarations:

A. var

B. let

C. const

3. Functions and classes:

A. function

B. function*

C. async function

D. return

E. class

4. Iterations:

A. do...while

B. for

C. for...in

D. for...of

E. for await...of

F. while

5. Others:

A. debugger

B. export

C. import

D. import.meta

E. label

F. with

四、Function Expressions 與 Function Statements

1. Function Statements

function myFun() {
  console.log('Hello my fun.');
}

myFun(); // output: "Hello my fun."

2. Function Expressions

var fac = function me(x) { return x <= 1 ? 1 : x * me(x-1) };
fac(10); // return 32628800
console.log(me); // ReferenceError: me is not defined

var foo = function() {};
foo(); // return undefined

五、其他錯綜複雜的案例

1. Comma operator

a = 1, 2; // return 1
a = (1, 2); // return 2

2. Object 與 block

{}; // return udefined
a = {};
typeof a; // return "object"

function sum(a, b) {
  return a + b;
}
{ foo: sum(1, 2) }; // return 3

b = { foo: sum(1, 2) };
typeof b; // return "object"

3. 神奇的 Unary plus(+)

1 + 'string'; // return "1string"
1 + undefined; // return NaN
1 + null; // return 1
1 + Infinity; // return Infinity
1 + [2, 3]; // return "12,3"
1 + {a: 1}; // return "1[object Object]"
[] + []; // return ""
[] + {}; // return "[object Object]"
{}+[]; // return 0

4. eval

eval("{foo: 123}"); // return 123
eval("({foo: 123})"); // return {foo: 123}

六、如何快速辨別到底是 expression，還是 statement 呢？

拿一個變數來 assign 看看就知道

var a = console.log('a');
a; // return undefined

所以 console.log('a'); 是 expression 還是 statement 呢？

七、後記

在這個查資料的過程，意外發現許多平常不會用到的內容，另外則是有點回憶起以前在大學裡上的「程式語言」與「編譯程式」，讓我有些回歸學生年代的錯覺。

2021年7月18日 星期日

JavaScript: Expressions vs. statements