Just JavaScript - The JavaScript Universe 隨意筆記

發表於 分類於

前言

Dan Abramov 的 Just JavaScript 是他最近在進行的 side project，內容主要探討 JavaScript 的運作原理，目前只有類似大綱的內容，會不定期的寄給有報名的人 email。

關於這系列文的走向，主要會是我對內容的解讀和心得，文風可能生硬，也可能垃圾話很多，寫起來也會蠻隨便的，想到的話就會回頭把內容修的更易讀，不確定，總之先寫再說。

Values

在 Dan 的 JavaScript 世界中，他把整個 Program 想像成小王子的畫面。

Little Prince

小王子所站的小行星，就是整個 JavaScript 的 program，在行星表面上，可以看到 if 判斷式、分號、或各式各樣的邏輯；裡面也會有各種指示，比如「呼叫函示」、「重複做某事好幾次」、「拋出錯誤」等等。

而 Values 在哪呢？它們存在於 JavaScript 宇宙裡，但並不在小王子所站的小行星當中，而是飄散於 JavaScript 宇宙的各處，當中有 booleans、numbers, strings、 symbols、 functions and objects、 null and undefined 等等。

長得就像這樣：

image alt

從圖片當中可以看到 Values 有兩種不同的種類，Primitive Values 跟 Reference Values(Objects and Functions)。

Primitive Values

Dan 形容 Primitive Values 就像星星，寒冷且遙遠，但你需要它們的時候，它們永遠在那（我不懂這什麼形容，太抽象了吧乾）你觸碰不到他們，但可以仰望它們、refer 它們。

console.log(2); // 2
console.log("hello"); // "hello"
console.log(undefined); // undefined

這是第一個種類，Primitive Values。

Objects and Functions

物件跟函式也是 value，但這種就距離很近，像是在我們所站立的小行星旁邊不斷漂浮、環繞。

console.log({}); // {}
console.log([]); // []
console.log(x => x * 2); // x => x * 2

這是第二種種類。

Expressions

JavaScript 有很多做不到、無法回答的事情，比如要不要跟好朋友坦白你的感受，或是要閉嘴都不講話直到老死為止這種問題。

但還是有一些問題它可以回答啦，這種問題就叫 expressions。比如你問 2 + 2 等於多少，JavaScript 會回答 4。

程式碼像是這樣：

console.log(2 + 2); // 4

image

如果 expressions 是問題，那 value 就是答案。

之前有講過 JavaScript 有各種 value 的種類，那我們是要怎知道這個 value 是什麼型別勒？

the typeof Expression

之前說過，Values 像是這種小星星飛散在 JavaScript 宇宙的各處，相同種類的 values 就會有相似的行為模式，但我們要怎麼觀星呢？

答案是透過 typeof 這個望遠鏡！它可以幫我們判斷 values 的型別。

image

當我們使用 typeof 的時候，JavaScript 可以回答我們各種關於 values 的型別問題。

比如：

console.log(typeof(2)); // "number"
console.log(typeof("hello")); // "string"
console.log(typeof(undefined)); // "undefined"

console.log(typeof({})); // "object"
console.log(typeof([])); // "object"
console.log(typeof(x => x * 2)); // "function"

image

Types of Values

身為一個熱血的天文學家，你可能會想知道 JavaScript 宇宙中有幾種可以觀測到的 values 種類，經過專業科學家們長達 25 年的研究，目前歸類出九種型別。

Primitive Values

  • **Undefined (undefined)**： 未被賦予 value 的變數會回傳的結果。
  • **Null (null)**： 空值，和 undefined 的差別在於它是有值的，只是這個值是空的。
  • **Booleans (true and false)**： 用於邏輯判斷的布林值。
  • **Numbers (-100, 3.14, and others)**： 數字，用於計算。
  • **Strings (“hello”, “abracadabra”, and others)**： 字串，用於文字。
  • Symbols (uncommon)： ES6 的新型別，目前還不太清楚使用場景。
  • BigInts (uncommon and new)： 大數，也是 ES6 的新型別，用於表示比 2 的 53 次方還大的數字（2 的 53 次方是原生 JavaScript 中 number 所能表現出來的最大值）

Reference Values

  • **Objects ({} and others)**： 算是資料的集合體，相似的資料就可以用 object 整理成一整包來表示。
  • **Functions (x => x * 2 and others)**： 函式。

小複習

  1. values 飄散於 JavaScript 宇宙的各處，它們不存在於我們的 code 裡面，但可以任意使用它們。
  2. values 分為兩大類： Primitive Values 跟 Reference Values。更細分的話，會分成 9 個型別，每個型別都有各自的使用場景和目的，但有些比較少用到。
  3. 有些型別比較孤單，比如 null 這個型別就只會有 null 這個值，而 undefined 也是。
  4. 我們可以用 expression 來向 JavaScript 問問題，比如 console.log(2 + 2)這個問題，JavaScript 會回答 4。
  5. 我們可以透過 typeof 這個 expression 來查看 values 的型別。

小練習

  1. 當你想確認某個 value 是不是 date，於是寫了下面這段 code：typeof(value) === 'date'，這會成功運作嗎？原因是什麼呢？
  2. typeof() 有可能會 return 錯誤的答案，是 JavaScript 中知名的 bug，試著找到這個會出 bug 的型別吧！