JavaScript 筆記

JavaScript notes

此篇會不斷更新。如果有寫不清楚的地方歡迎留言，我會儘量修正!

Content:

+ Some info. of JS

+ Statements and declarations

+ Object oriented

+Callback

+ Asynchronous

+ High order functions & Arrays

+ Object.defineProperty()

+ The encapsulated function syntax

+ AJAX

+ FetchAPI

+ Template literals (Template strings)

+ Event loop

+ Generator

+ Symbol (ES2015)

+ Web worker

+ Import with {} and without {}

+ Package with “@” (2020.05.05)

+ Spread operator “…”

+ 記憶體管理

+ React

+ Bundle

+ Other references

Some info. of JS

• JS is a single threaded programming language, single threaded Runtime

one thread == one call stack == one thing at a time

JS is single threaded, but browsers can do more with WebAPIs

Statements and declarations

const

• block-scoped
• The value of a constant can’t be changed through reassignment, and it can’t be redeclared
• The const declaration creates a read-only reference to a value
• A constant cannot share its name with a function or a variable in the same scope

var vs. let vs. const

• var is re-declarable, while let and const are not.

if(true) {
  var varVariable = 'this is var'
}
var varVariable = 'this is redeclared var' // re-declare
console.log(varVariable); // this is redeclared var

Object oriented

Go to: https://github.com/chengr4/all-about-JS/tree/main/OO

Class

• Class 中的 constructor 是一個特別的 method，用來建立和初始化一個 Class 的 Object。一個 Class 只能有一個建構子。當類別中含有一個以上的建構子時，SyntaxError 將會被拋出。

Prototype

• __proto__

Callback

Basically, a function that is passed to another function as a parameter is a callback function.

function print(callback) {  
    callback();
}

• Callbacks make sure that a function is not going to run before a task is completed but will run right after the task has completed.

A simple example

const message = function() {  
    console.log("This message is shown after 3 seconds");
}
 
setTimeout(message, 3000);

References

1. JavaScript Callback Functions — What are Callbacks in JS and How to Use Them (2020)

Asynchronous

Promise

The Promise object represents the eventual completion (or failure) of an asynchronous operation and its resulting value.

Async-Await

• 再開一個 async function 來使用 async-await
• 優點：可以簡單使用 then() 裡的參數、code gets cleaner

High order functions & Arrays

Go to: https://github.com/chengr4/all-about-JS/tree/main/OO

Object.defineProperty()

let someOBJ = {
   name: "apple" // name is the property
}

Each property (here: name) in an object has a thing called descriptors . A descriptor lets you configure what can happen to that property.

References

1. Decrypting Object.defineProperty() for your Angular, React, and Vue projects

The encapsulated function syntax

下面的優點是不用在另外宣告參數

AJAX 技術 (Asynchronous JavaScript and XML)

XML 格式已經是要被淘汰的格式了，所以不用太在乎

• 簡單說就是網頁不用重新整理，就能即時地透過瀏覽器去跟伺服器溝通，撈出資料。 — from Greta Ma
• Asynchronous JavaScript 指的是 JavaScript 的「執行順序」

=> 同步：會先等這行程式執行完畢並得到「結果」才繼續往下執行，確保執行順序。

=>非同步：執行後就不管他了，不等「結果」回來就繼續往下執行。(So start first, finish later)

E.g. 在 YouTube 搜尋引擎搜索時，會出現提示搜索字串

• 以 XMLHttpRequest (XHR) 物件為主要核心的實作

XmlHttpRequest (XHR)

• Provided by the browser’s JS environment => 現代瀏覽器都能使用
• Can be used with other protocol than HTTP
• 現在更常與 JSON 結合使用

Ways to make AJAX call

• FetchAPI
• Library jQuery (漸漸不需要了)

Reference

[1] Miahsu. [第九週]透過瀏覽器交換資料 — 表單、AJAX、XMLHttpRequest (2020)

FetchAPI

Before FetchAPI, you had better know Ajax and XHR

• Fetch並不是一個單純的 XHR 擴充加強版或改進版本，它是一個用不同角度思考的設計，雖然可以作類似的事情。
• Promise 語法

Template literals (Template strings)

Template literals (Template strings)

Event loop

Philip Roberts. What the heck is the event loop anyway? (2014)

作用：To look at the stack (in JS runtime)and task queue (in browser), if the stack is empty it takes the first thing on the task queue and pushes it on to the stack.

References

[1] Philip Roberts. What the heck is the event loop anyway? (2014)

Generator

GO TO: https://github.com/chengr4/all-about-JS/tree/main/Generators

Symbol (ES2015)

Attributes

• A symbol is a primitive which cannot be recreated => make it similar to an object but still a primitive

const s1 = Symbol();
const s2 = Symbol();console.log(s1 === s2); // false

Important use: Symbols as Object Properties

const obj = {};
const sym = Symbol();
obj[sym] = 'foo';
obj.bar = 'bar';
console.log(obj); // { bar: 'bar' }
console.log(sym in obj); // true
console.log(obj[sym]); // foo
console.log(Object.keys(obj)); // ['bar']

Note: Old code isn’t aware of symbols and so this result shouldn’t be returned from the ancient Object.keys() method.

Benefit: Preventing Property Name Collisions

References

1. Thomas Hunter II. JavaScript Symbols: But Why? (2019.3)

Web worker

check npm.im/comlink

References

[1] Supercharged Microtip: Workers (German with English subtitles) (2021)

Import with {} and without {}

結論: without {} should be with default export

Package with “@” sign

簡單來說就是核心團隊開發的 package

• This is a new feature of npm called scoped packages
• Every user and organization on npm has their own scope, and they are the only people can add packages to it. (此 package 的核心成員)

This is useful for several reasons:

1. It allows organizations to make it clear which packages are ‘official’ and which ones are not.

=> For example, if a package has the scope @angular, you know it was published by the Angular core team.

1. The package name only has to be unique to the scope it is published in, not the entire registry (???這個解釋不懂但是例子可以明白).

=> For example, the package name http is already taken in the main repository, but Angular is able to have @angular/http as well.

Spread operator “…”

State is usually immutable = we can not simply change it

=> To change state, we should do following:

E.g.

const useState = {
  name: 'John'
}
const useNewState = {
...useState, //
age:30
}

記憶體管理

當 JS 建立事物件時會分配 memory 給 value 且自動釋放不再使用的 value。後者的流程稱作為「garbage collection」。然而這個自動化的回收流程會使 JavaScript 的開發者產生可以不須理會「記憶體管理」的錯誤認知。

• Utilize a form of automatic memory management known as garbage collection (GC)

記憶體管理

React

請至這篇：https://chengr4.medium.com/react-%E7%AD%86%E8%A8%98-8b8a39e86655

Bundle

1.1 Bundle 和 Loader

Not read yet

[JS] 使用 JavaScript 解析網址與處理網址中的參數（URL Parameters）

Other references

When should I use curly braces for ES6 import?

AJAX與Fetch API

原生的 JavaScript 用法 -- Vanilla.js