我要學會 JS(二)：基本運算與結構

來到 JavaScript 系列的第二篇，介紹 JS 在資料型態、運算子和函式跟別人不一樣的地方。

資料型態

在 JS 裡面，基本的資料型態有：string、number、boolean 等等。可以透過 typeof 運算子來檢查變數的型態：

const name = 'Noob';
console.log(typeof name); // 輸出 string

還有一個資料型態叫 Symbol，暫時用不到就是了。

另外有兩個比較特殊的資料型態叫 null 跟 undefined。一般來說未指定的變數都是 undefined，例如：

const data = {
    zipName: '前鎮區',
    status: 4
};

console.log(data.name); // 因為 data 中沒有 name，所以會輸出 undefined

而 null 則是在明確指定為空值（例如 let b = null）時才會是 null。

暫時不用去擔心 null 和 undefined 比較的問題，在 JavaScript 裡面這些有趣的東西可以額外寫一篇，包括什麼 []+[]、NaN、0.1+0.2 的。
如果你真的很有興趣，可以看看這部小短片：wat。

運算子

+、-、*、/、%、++、+= 這些基本運算子就不特別講了，不太熟悉的可以看看 我要學會 C 語言(三)：加加減減乘除的變數運算。但這裡要特別講 = 這東西。

首先是跟 C 語言一樣，但可能沒有人特別講過的東西：

let a, b;
a = b = 3;

console.log(a); // 輸出 3
console.log(b); // 輸出 3

可以把 a = b = 3 看作 a = (b = 3)。雖然不太鼓勵寫這種程式碼，但偶爾看一些別人的開源程式還是會看到這種東西。

再來是比較。在 JS 中有 == 的比較和 === 的比較：

const a = '3';
const b = 3;

console.log(a == b); // 輸出 true
console.log(a === b); // 輸出 false，因為不同型態

== 只會比值，而 === 則會比值和型態。

到這邊你應該就知道怎麼寫 if-else 和 switch 了，和 C 語言都大同小異。

函式（function）

基本函式宣告可以是這樣：

function add(a, b){ // 宣告一個全域的 add 方法
    return a + b;
}

console.log(add(3, 5)); // 輸出 8

你也可以這樣寫：

const add = function(a, b){ // 宣告 add 為一個匿名方法
    return a + b;
};

console.log(add(3, 5)); // 輸出 8

這邊要特別注意的是 JS function 有個特性叫 hoisting（提升），你可以把 function 放在任何地方，例如下面這段程式碼和上面是相同的：

console.log(add(3, 5));

function add(a, b){
    return a + b;
}

然而這段程式碼就會出錯：

console.log(add(3, 5)); // 輸出 ReferenceError: add is not defined

const add = function(a, b){
    return a + b;
};

這是因為 JS 會在執行前先幫 function 分配好一個記憶體空間，等實際要執行時再載入。

這時你就會開始思考：說好的直譯式語言由上往下一行一行執行呢 🤔

實際上我們也不鼓勵用 hoisting 的方法，宣告 function 的時候還是照順序寫比較好理解，只是要讓你知道有這種概念。

箭頭函式（fat arrow function）

如果你宣告的是匿名函式，就可以用 => 來簡寫函式：

const add = (a, b) => {
    return a + b;
};

console.log(add(3, 5)); // 輸出 8

要是你的 function 裡面只有一個 return 而沒有其他敘述的話，更可以把 return 和大括號省略掉：

const add = (a, b) => a + b;

console.log(add(3, 5)); // 輸出 8

如果你的 function 只有一個傳入值，可以省略小括號：

const addOne = x => x + 1;

console.log(addOne(3)); // 輸出 4

然而，如果你在 function 裡面沒有用到 this 的話，我倒是鼓勵你多用 arrow function。熟悉這方法，後面寫一些東西會方便許多。

我要學會 JS 目錄

• 我要學會 JS(一)：JavaScript 簡介
• 我要學會 JS(二)：基本運算與結構
• 我要學會 JS(三)：callback、Promise 和 async/await 那些事兒
• 待續...