• 1 JavaScript 本質
• 2 Variables
  • 2.1 var
  • 2.2 let
  • 2.3 const
  • 2.4 Hoisting
• 3 Boolean 相關
  • 3.1 驗證 value 係 truthy 定 falsy
  • 3.2 比較兩個 values
• 4 Array 語法
  • 4.1 Array 可以有特殊既 empty element
  • 4.2 Array spread operator
  • 4.3 Array destructuring assignment
  • 4.4 生成數字 array
  • 4.5 去除重複 elements
• 5 Object 語法
  • 5.1 創建 object
  • 5.2 Object spread operator
  • 5.3 Object destructuring assignment
    • 5.3.1 Nested object and array destructuring assignment
• 6 String 語法
  • 6.1 Template literal
• 7 Operators
  • 7.1 Logical operators
    • 7.1.1 Logical AND operator
    • 7.1.2 Logical OR operator
    • 7.1.3 Nullish coalescing operator
  • 7.2 Ternary/conditional operator
  • 7.3 Assignment operators
    • 7.3.1 Logical AND assignment operator
    • 7.3.2 Logical OR assignment operator
    • 7.3.3 Logical nullish assignment operator
  • 7.4 Optional chaining
• 8 Deep clone
  • 8.1 JSON
  • 8.2 Lodash library

Object.prototype.keys = function() {
    return Object.keys(this);
};

({ k: "v" }).keys(); // ["k"]

• Globally scoped 或者 function-scoped
• 如果唔係喺 function 裡面 declare 時用，個 variable 就會去左 window
• 可以重新 declare
• 數值可以改變

1var bar;
2var bar = 5;
3var bar = 10;
4var bar;
5bar // 5
6window.bar // 5
7
8let bar; // SyntaxError: Identifier 'bar' has already been declared
9const bar; // SyntaxError: Identifier 'bar' has already been declared
10
11function foo() {
12    var test = 123;
13}
14
15test // ReferenceError: test is not defined

• Block-scoped
• 不能重新 declare
• 數值可以改變

1let bar;
2let bar = 5;
3bar = 10;
4
5let bar; // SyntaxError: Identifier 'bar' has already been declared
6const bar; // SyntaxError: Identifier 'bar' has already been declared
7
8function foo() {
9    let test;
10    let test; // bad: SyntaxError: Identifier 'test' has already been declared
11}

• Block-scoped
• Declare 時必須提供數值
• 不能重新 declare
• 數值不能改變

1const bar; // SyntaxError: Missing initializer in const declaration
2const bar = 5;
3bar = 10; // TypeError: Assignment to constant variable.
4
5var bar; // SyntaxError: Identifier 'bar' has already been declared
6let bar; // SyntaxError: Identifier 'bar' has already been declared

console.log(bar); // undefined
var bar = 5;

var bar;
console.log(bar); // undefined
bar = 5;

foo();

function foo() {}

foo(); // TypeError: foo is not a function

var foo = function() {};

• Understanding Hoisting in JavaScript

1!!0 // false
2let bar = -0;
3bar // -0 你冇睇錯，JavaScript 有分正 0、負 0
4!!-0 // false 不過正 0、負 0 一樣都係 falsy
5
6!!-5 // true 負數都係 truthy，因為有野
7!!5 // true

!!"" // false
!!" " // true 你冇睇錯，blank string 都係 truthy
!!"0" // true

!![] // true 注意，咁係 check 唔到一個 array 係咪冇 element
!![].length // false
!![1].length // true

!!{} // true 注意，咁係 check 唔到一個 object 係咪冇 property
!!Object.keys({}).length // false
!!Object.keys({ k: "v" }).length // true

There are only six falsy values in JavaScript you should be aware of:

• false — boolean false
• 0 — number zero
• "" — empty string
• null
• undefined
• NaN — Not A Number

5 == "5" // true 因為 JavaScript 將 "5" 轉換成 5
0 == false // true 因為 JavaScript 將 0 轉換成 false

1[] == [] // false
2{} == {} // false
3(() => {}) == (() => {}) // false 左右兩邊係 arrow function
4
5[] === [] // false
6{} === {} // false
7(() => {}) === (() => {}) // false 左右兩邊係 arrow function

Double equals

When using double equals in JavaScript we are testing for loose equality. Double equals also performs type coercion.

Triple Equals

When using triple equals === in JavaScript, we are testing for strict equality. This means both the type and the value we are comparing have to be the same.

[ , ] // [empty]
[ , , ] // [empty × 2]

1// ... 係 rest parameter，等於 Java 既 varargs
2function foo(bar, ...rest) {}
3
4foo();
5foo(1); // bar = 1
6foo(1, 2); // bar = 1, rest = [2]
7foo(1, 2, 3); // bar = 1, rest = [2, 3]
8
9const arr = [1, 2, 3, 4];
10foo(arr); // bar = [1, 2, 3, 4], rest = []
11foo(...arr); // bar = 1, rest = [2, 3, 4] 呢個就係 spread

let arr = [1, 2, 3];
arr = [...arr, 4, ...arr];
arr // [1, 2, 3, 4, 1, 2, 3]

[...(true ? [1] : [])] // [1]
[...(false ? [1] : [])] // []

const [, r = 0, g = 0, b = 0] = [0.5, 248, 187, 223]; // ARGB
r // 248
g // 187
b // 223

let foo = 5;
let bar = 10;
[foo, bar] = [bar, foo];
foo // 10
bar // 5

const obj = { bar: 5 };
Object.entries(obj).forEach(([k, v]) => console.log(`${k}: ${v}`)); // bar: 5

const [first, second, ...rest] = [1, 2, 3, 4];
first // 1
second // 2
rest // [3, 4]

const [, ,] = [1, 2, 3, 4];

[...Array(10).keys()] // [0, 1, 2, 3, 4, 5, 6, 7, 8, 9]

let arr = [1, 2, 3, 1, 2, 4];
arr = Array.from(new Set(arr));
arr // [1, 2, 3, 4]

const bar = 5;
const obj = { bar }; // 等於 { bar: bar }
obj // {bar: 5}

1const prefix = "bar";
2const i = 3;
3const obj = {
4    [`${prefix}${i}`]: 5,
5};
6obj // {bar3: 5}

let obj = { k: "v" };
obj = { k: "vv", ...obj };
obj // {k: "v"}
obj = { ...obj, k: "vv" };
obj // {k: "vv"}

{...(true && {k: 'v'})} // {k: "v"}
{...(false && {k: 'v'})} // {}

const { k, kk = "vv" } = { k: "v" };
k // "v"
kk // "vv"

const { k: kk } = { k: "v" };
kk // "v"

const { k1, k2, ...rest } = { k1: 1, k2: 2, k3: 3, k4: 4 };
k1 // 1
k2 // 2
rest // {k3: 3, k4: 4}

const {} = { k: "v" };

1const {
2    name,
3    // orders, // 如果需要 access orders array
4    orders: [
5        { id: id1, status: status1 },
6        { id: id2, status: status2 },
7    ],
8} = {
9    name: "Mick",
10    orders: [
11        {
12            id: 101,
13            status: "SHIPPED",
14        },
15        {
16            id: 115,
17            status: "PAID",
18        },
19        {
20            id: 128,
21            status: "CANCELLED",
22        },
23    ],
24};
25
26name // "Mick"
27id1 // 101
28id2 // 115
29status1 // "SHIPPED"
30status2 // "PAID"
31orders // ReferenceError: orders is not defined

1const bar = 5;
2const foo = () => 10;
3const str1 = `${bar}`;
4const str2 = `${foo()}`;
5const str3 = `${true ? bar : foo()}`;
6const str4 = `${false ? bar : foo()}`;
7
8str1 // "5"
9str2 // "10"
10str3 // "5"
11str4 // "10"

• MDN - Operator precedence

1true && 10      // 10
25 && 10         // 5
3null && 10      // null
4undefined && 10 // undefined
50 && 10         // 0
6"" && 10        // ""

1true || 10      // true
25 || 10         // 5
3null || 10      // 10
4undefined || 10 // 10
50 || 10         // 10
6"" || 10        // 10

1true ?? 10      // true
25 ?? 10         // 5
3null ?? 10      // 10
4undefined ?? 10 // 10
50 ?? 10         // 0
6"" ?? 10        // ""

a ? foo() : bar()

• a 係 truthy 既情況下會執行 foo()，唔會執行 bar()
• a 係 falsy 既情況下會執行 bar()，唔會執行 foo()

1let bar = 5;
2
3// ternary operator
4bar = bar > 3 ? 10 : "false";
5
6// 相等於
7if (bar > 3) {
8    bar = 10;
9} else {
10    bar = "false";
11}

1let bar = 10;
2bar++;    // 相等於 bar = bar + 1;
3bar--;    // 相等於 bar = bar - 1;
4bar += 5; // 相等於 bar = bar + 5;
5bar -= 5; // 相等於 bar = bar - 5;
6bar *= 5; // 相等於 bar = bar * 5;
7bar /= 5; // 相等於 bar = bar / 5;
8bar %= 5; // 相等於 bar = bar % 5;
9
10bar = 2;
11bar **= 3; // 相等於 bar = Math.pow(bar, 3);

let bar = 10;
bar &&= 5; // 相等於 bar && (bar = 5);
bar // 5

let bar = 0;
bar ||= 10; // 相等於 bar || (bar = 10);
bar // 10

let bar = 0;
bar ??= 10; // 相等於 bar ?? (bar = 10);
bar // 0

1const obj = {
2	foo: () => 123,
3	bar: null,
4};
5const obj2 = null;
6
7obj?.foo?.() // 123
8obj?.bar?.() // undefined
9obj?.bar?.(blah) // undefined
10obj?.["bar"] // undefined
11
12obj2?.foo // undefined
13obj2?.blah() // undefined
14obj2?.a?.b?.c?.d?.e // undefined
15
16obj3 // ReferenceError

• StackOverflow - What is the most efficient way to deep clone an object in JavaScript?

let obj = { k: "v", kk: [1, 2] };
obj = JSON.parse(JSON.stringify(obj));
obj // {k: "v", kk: [1, 2]}

let obj = { k: "v", kk: [1, 2] };
obj = _.cloneDeep(obj);
obj // {k: "v", kk: [1, 2]}