JS 成長日誌｜新手必知的五個 JS 知識點

今天我要來和新手朋友分享學習半年 JS  的成果分享，但我不打算談較個人的學習經驗（挫折、心路歷程等等），所以這就表示～ 此篇知識含量偏豐🤩 大家可以期待一下看完後精彩的 takeaway 嘍 👀

👣 開始閱讀前警示：本文中不會聊到太多過於冷僻或深入的內容，主要著重在有趣或是重要的應用。我也會盡可能找出新手的盲點（讓我自己學習起來較艱辛的部分），如果沒有剛好對上你的需求你可以考慮看看我的其他篇 JS 文章～😉

🎬 Action! 🎬

🙆‍♀️：JS 除了拿來做網頁互動之外，還有哪些新手知道後會嗨的點呢？讓我們一起看下去👇

新手不可不知的五個 JS 知識點

Null 是「物件」

你如果腳步夠快＆有跟上 JS 圈子，你應該會看過「 NaN is a number」（如下圖）這樣的梗圖。 JS 對於新手而言實在有太多無法理解的細節和莫名規矩，就讓我們簡單看幾個作為此篇的開場吧！

1. Null 是「物件」：在 JS 中什麼都能是物件， null 也不例外。螢幕前的你們也可以自己動手檢驗看看。

複習：null ＝ 「沒有值」(total absence of meaningful value)

console.log(typeof null);  // object

但弔詭的是，null 並非物件的實體 (instance)。但轉念想想好像也蠻合理，畢竟 null 本身就不含有值，更甭提有實體了～

console.log(null instanceof Object);  // false

註 1：null 與 undefined 不同，null 為沒有值；則 undefined 表示已宣告但未被賦予值

註 2：undefined 又與 not defined 不同，undefined 表示變數已宣告但未被賦予值；not defined 是不曾被定義過、電腦無法辨別

註 3：有此一說：null 是 JS 中的 bug，也就是設計中的疏忽，所以只需記得結論 typeof null = “object” 即可！（感謝熱心大大提供資訊～）

2. ‘11’ + 1 = 111 但  ‘11’ – 1 = 10 

也許你已經思考過這個問題，但其箇中奧秘不知道你知不知道。加法運算符，又稱串連運算子 (concatenation operator) 在運行時會有合併效果，也就是說當今天加法運算符前有字串時，加號會自動將 1 視為字串，並 print 出 ‘111’ （字串）；但是，當情況變成減法運算符時，減號無法對字串作用，因此減號會轉而將 ‘11’ 視為數值做運算，最後答案得 10 （數值）

🎯 總結：加號可以執行運算也能作為串連字串之用，而減號只有運算功能。

IIFE

什麼是 IIFE (Immediately Invoked Function Expression) ？ 簡單來說，IIFE 就是一個立即執行的函式。一般而言函式需要先宣告後呼叫，但 IIFE 與眾不同，它可以允許一個匿名函式在宣告後直接執行（無需另外宣告），這樣的好處有：避免函式內變數污染到全域、減少全域變數名稱衝突帶來的混亂等等… 也就是 IIFE 有助於簡單化程式碼、區域化全域變數😆 

如果要看更詳細請參考我之前的日記

🖋 寫法：函式表達式前後加上小括號

「非同步」等於同時多很多事？

非同步是開發中最常見的難題之一，我也是在非同步這邊摔了好多次跤🙈 不過大概的心得可以和大家分享，也許你們就不需要這麼辛苦了

首先，非同步 (asynchronous) 最白話的解釋是：以輕重緩急處理事情。我對於許多網站中非同步＝同時處理多件事情這種說法不大認同，因為 JS 是單執行緒 (single-threaded runtime) 的語言，它一次僅能做一件事情，如果遇到需要耗時較久才能完成的任務，它就會先把耗時的任務排到等待區 (event queue) 交給 Web API 來幫助處理，完成能快速解決的任務後再回來將處理好的耗時任務做最後的處理，並宣告完成。以上所述的就是 JS 中的事件循環 (event loop)，而耗時的任務可能為 setTimeout, setInterval, event 或 ajax（無法預期執行時間的操作）

相關概念：Callback （筆記說明）、Concurrency、Stack、Queue （影片解說）

Chrome extension

🤜 一句話說明 Chrome Extension 的用途：擴展和修改瀏覽器的功能、優化使用者體驗

談到 JS 的應用，不可不知的莫過於 Chrome Extension。怎麼說呢？當時剛開始接觸 JS 時我僅知道它最粗淺的應用（卻也已經對 JS 的互

動能力感到驚艷😝）後來因緣際會在與小白學長聊天時得知了JS 在 Chrome 之上驚人的妙用 —— 寫出各種擴充功能，那時候我就默默告訴自己未來某天一定要自己寫一個擴充來玩玩，以下是我和小白學長請益的對話

需求為發明之母～ 如果各位有興趣或是有需要解決的問題，不妨研究動手寫寫看 這篇小白推薦這篇 Medium 文寫得蠻詳細👍 respect! 

🧠 補充：Chrome Extension 和 Chrome Apps 的差別

Chrome Extension：可在多個網站中自由使用，常用功能像是新增按鈕、插入選項到

Chrome Apps：運作上像是瀏覽器上的 Apps，每個 App 自成一格（ UI 也因此幾乎無用武之地） 

 JS 前後端開發全包？

我們對於 JS 的理解多半是落在用戶端 (client-side) 語言，但你有想過 JS 也能在伺服器 (server-side) 端運作嗎？ 就算沒有（或是不熟悉運作原理），學習 JS 的你們一定也聽過 Node.js 吧？  

Node.js 之中最值得關注的莫過於「創造 JS 在伺服器端的執行環境」這項大功勞，所以才會有 Node.js 等於執行時環境 (Runtime Environment) 加上 JS 函式庫 (JavaScript Library) 之說。有別於其他後端語言 (PHP、Java、C#)，Node.js 更輕量、運行速度更快（在 Chrome V8 引擎基礎上搭建而成）、更不易阻塞（因為 JS 擁有單執行緒與非同步事件驅動等優良特性）

👣 Node.js 特性＆優點：

• 開源、跨平台
• 伺服器端
• 單執行事件迴圈、事件驅動 I/O API
• 擁有活耀的第三方生態系統和開發者社群
• 易學習（學習曲線緩😍）
• 減少前後端間語言切換的成本

如果有興趣跨足前後端、擴展技能樹但又不想多學一種語言的朋友（成為全端 JS 開發者），學習 Node.js 會是很不錯的選擇歐～ 

蝦皮資深工程師來襲🤩，立即點擊圖片獲得更多資訊👆

精彩內容預告：機器學習實作（新手友善）、 Chrome Extension 擴充套件

以上五點就是我但願早一點接觸的知識 domain，分享給大家！希望你們覺得這些知識點有用、有趣＆實用，如果想繼續追蹤像這樣的分享文，歡迎 follow 程式小白學習群😎 加入我＆其他新手朋友的程式討論圈！

我要加入小白群💪

參考資料 References：

1. https://www.smashingmagazine.com/2011/05/10-oddities-and-secrets-about-javascript/
2. https://areknawo.com/top-5-javascript-secrets/
3. https://medium.com/@angela52799/chrome-extension-%E9%96%8B%E7%99%BC%E7%AD%86%E8%A8%98-873a1cc63166#d41d
4. https://www.simform.com/nodejs-advantages-disadvantages/
5. https://medium.com/schaoss-blog/%E5%89%8D%E7%AB%AF%E4%B8%89%E5%8D%81-25-be-node-js-%E8%88%87-javascript-%E7%9A%84%E9%97%9C%E4%BF%82%E6%98%AF%E4%BB%80%E9%BA%BC-7ab18c802609
6. https://pjchender.blogspot.com/2017/08/javascript-learn-event-loop-stack-queue.html
7. http://www.ruanyifeng.com/blog/2014/10/event-loop.html