ExplainThis 全端開發雙週報 #25
10 道 JavaScript 考題，測測你多了解這個古怪的語言
嗨～歡迎閱讀 ExplainThis 全端開發雙週報，在開始前想分享，下週日 ExplainThis 籌劃的 E+ 將跟先前 在 Product Hunt 上拿過 Product of the Day 的部署平台 Zeabur 有一場合作的系統設計直播特別場，由 Zeabur 的團隊，以互動式的方式，帶著大家走過這個題目。
最近跟 Zeabur 團隊在討論要分享的內容時，我們自己都很期待這場直播，因為對比起網路上找的到的相關題目教學，相信這場會有料許多。除了會講架構設計外，還會談到如何設計全球多區域部署、如何從部署平台角度抵擋 DDoS 攻擊等滿滿的洞見～
不論是想提升系統設計能力，或者想要順便練習這個題目，都很推薦參加這場直播。目前 E+ 社群的工程師人數也即將到 350 位。如果你是初階、中階的前、後端工程師，想要往資深邁進，歡迎加入 E+ 一同持續成長 (連結)。
10 道 JavaScript 考題，測測你多了解這個古怪的語言
最近 Product Hunt 上有個獲得當日排名第二的小產品，是一個名叫 JavaScript Quiz 的網站。該網站會隨機出 10 題 JavaScript 的題目，來檢驗你對這門語言的理解程度。每次拿到的可能是不同題目，以下是我們在玩的時候遇到的題目。除了解答，這邊也附上解答說明 (網頁好讀版在這)。推薦大家也去玩玩～
第一題
console.log(018 - 015);第二題
console.log(typeof typeof 1) 第三題
console.log(0.1 + 0.2 == 0.3) 第四題
const numbers = [33, 2, 8];
numbers.sort();
console.log(numbers[1])第五題
console.log(false == '0');第六題
let array = [1, 2, 3];
array[6] = 9;
console.log(array[5]);第七題
console.log(typeof NaN);第八題
console.log(('b' + 'a' + + 'a' + 'a').toLowerCase());第九題
const isTrue = true == [];
const isFalse = true == ![];
console.log(isTrue + isFalse);第十題
console.log("This is a string." instanceof String);解答
第一題 5
第二題 string
第三題 false
第四題 33
第五題 true
第六題 undefined
第七題 number
第八題 'banana'
第九題 0
第十題 false
詳細解說
第一題
console.log(018 - 015); 之所以是 5，是因為在 JavaScript 當中，數字前面如果有 0，就會變成八進制，而不是十進制。換句話說，只有 0 到 7 是合理的數字，018 沒辦法被八進制表達，所以會被當成十進制的 18；而 015 在八進制是 13，所以會變成 18 - 13 因此是 5。
第二題
console.log(typeof typeof 1) 可以拆成兩段來看，先看 typeof 1 會得到 'number' 字串，而 typeof 'number' 因為是看一個字串的型別，所以會是 string。
第三題
console.log(0.1 + 0.2 == 0.3) 會是 false 的原因，詳細可以看 在 JavaScript 中 0.1 + 0.2 會是多少？為什麼？如何避免相關問題？
第四題
如果這題選 8，代表忽略 Array.sort 的 compareFn 如果沒有傳入，預設會在排序時，把值先轉成字串，所以用字串排出來會是 ["2", "33", "8"];。關於 compareFn 可以看 JavaScript 中的 sort 傳入 (a,b) => b - a 會是升序還是降序？為什麼呢？
第五題
console.log(false == '0') 會印出 true 不是因為 false 與 '0' 相等，而是在 JavaScript 當中的 == 在比較時會做型別轉換，所以在比較時變成 Number(false) 與 Number('0') 的比較，而這兩個都會被轉成數字 0，所以被判斷為相等。要避免這問題，可以用 === 或 Object.is，詳細可見 在 JavaScript 當中，==、=== 與 Object.is()的區別 一文。
第六題
之所以是 undefined 是因為雖然在 6 的位置加上，但因為在 3、4、5 的位置並沒有賦予值，所以 5 的位置會是 undefined。
[1, 2, 3, undefined, undefined, undefined, 9]第七題
在 JavaScript 中的 NaN 是 number 型別。要如何理解為何 NaN 是 number 型別呢? 想像一下假如今天我們要用 parseFloat 來處理 number 的型別的值，假如一般數字等顯然沒問題，但假如是非數字傳入該怎麼辦? 這時有一個非數字又是數字型別的 NaN ，就能用來概括代表。
第八題
console.log(('b' + 'a' + + 'a' + 'a').toLowerCase()); 會印出'b' + 'a' 是字串相加，直觀會印出 'ba'。然而 'ba' + + 'a' 因為中間的 + + 讓 JavaScript 無法處理，所以會變成 NaN，所以整個會變成 'baNaNa'，然後最後的 toLowerCase 會把大寫都變小寫，所以得到 'banana'。
第九題
這題可以先看 const isTrue = true == [];，雖然變數叫做 isTrue，但其實 true == [] 會是 false 因為這兩個不同型別，會被轉換，實際上這兩個比較是 Number(true) 與 Number([]) 比，而它們分別是 1 跟 0。
接著看 const isFalse = true == ![]; ，因為這邊 ![] 會是 false，所以跟上面的比較不一樣，是直接比同型別，所以是 true == false 會得到 false。
因此印出的會是 console.log(false + false) 會被轉換型別成為 console.log(Number(false) + Number(false)) 所以會是 console.log(0 + 0) 也就得到 0。
第十題
console.log("This is a string." instanceof String); 直觀可能會覺得是 true，但實際會得到 false，這題也是我們自己在做的時候答錯的一題。之所以是 false，是因為 "This is a string." 是 JavaScript 原始值，所以不是 String 物件的實例。
如果是 new String("This is a string.") instanceof String 才會回傳 true。
[本期推薦]
最近讀了 Paul Graham 前兩週寫的新文章《How to Start Google》，這是他寫給 14 - 15 歲青少年的文章，在談如何創立一間能做到 Google 規模的公司。非常推薦給身邊在讀國高中的學生看，這邊分享我們讀後的心得 (連結)
過去我們常收到讀者詢問職涯選擇問題，當今天有幸拿到多個工作機會，下個問題自然會是問該選擇哪一個? 選擇去哪一間公司是很個人的問題，沒有所謂的標準答案，只有取捨。冷靜的公司 (calm company)，是個很值得參考與思考的選擇方向，推薦大家多了解 (連結)
不論是馬斯克或黃仁勳，經常在對談或演講時提到第一性原理思考 (first principles thinking)。所謂第一性原理思考，是要從本質拆解，而不是直接類比或模仿。前幾天看到一個有趣同時值得一題的例子，很好地說明為什麼第一性原理思考很重要 (連結)
如果對於前端開發未來不確定的人，最近看到這篇《Navigating the future of frontend》也許能給一點方向；當然裡面講的也可能不是如此，推薦大家讀的時候要帶著獨立思考 (連結)
Core Web Vital 前陣子更新核心指標，把 FID 替換成 INP (Interaction to Next Paint)。還不知道 INP 是什麼的人，可以參考這篇 (連結)
JavaScript Signals 有 standard proposal 了，這個許多框架都有支援的功能，如果能直接成為 JavaScript 原生支持的，那會幫助很大 (連結)
React Query 文件新增了 Query Optimizations 區塊，推薦有在用的人可以讀一下，然後試著優化目前的寫法 (連結)
薪水查詢平台 levels.fyi 最近透過《How Levels.fyi Built Scalable Search with PostgreSQL》一文，分享了他們如何優化搜尋功能，讓 p99 的的查詢速度維持在 20 毫秒內 (連結)
Upstash 分享的 Redis 大抄，假如不熟 Redis 常見操作的人，可以透過這系列圖文快速複習 (連結)