Module 01 — JavaScript & TypeScript Nền tảng

Closure là khi 1 function "nhớ" được các biến ở lexical scope cha, ngay cả khi function cha đã return. Về mặt kỹ thuật: closure = function + reference tới lexical environment.

Ví dụ thực tế: React hooks chính là closures. Mỗi lần component render, function component chạy lại, tạo ra 1 closure mới "close over" state values tại render đó. Đây là lý do tại sao state trong useEffect callback có thể "stale" — nó nhớ giá trị lúc closure được tạo.

Ví dụ khác: useDebounce hook — closure giữ reference tới timeout ID giữa các lần gọi.

console.log("A");
setTimeout(() => console.log("B"), 0);
Promise.resolve().then(() => console.log("C"));
Promise.resolve().then(() => setTimeout(() => console.log("D"), 0));
console.log("E");

Output: A → E → C → B → D

Giải thích:

• A, E: synchronous — chạy ngay trên call stack
• C: microtask (Promise) — chạy sau sync, trước macrotask
• B: macrotask (setTimeout) — chạy sau tất cả microtasks
• D: macrotask được schedule bởi microtask — chạy cuối cùng

Arrow function: không có this riêng — kế thừa this từ lexical scope (enclosing function/context). Không thể bind/call/apply để thay đổi.

Regular function: this phụ thuộc vào cách gọi (dynamic binding). Gọi qua object → this = object. Gọi standalone → this = undefined (strict) hoặc window.

Trong React Native: Hầu hết dùng arrow functions vì không cần dynamic this. Class components dùng arrow methods để auto-bind.

Shallow copy: copy 1 level — nested objects vẫn share reference (Object.assign, spread {...obj}).

Deep copy: copy tất cả nested levels — hoàn toàn independent.

Cách implement:

• structuredClone(obj) — native, modern (recommended)
• JSON.parse(JSON.stringify(obj)) — hack, mất functions/undefined/Date/RegExp
• Recursive function — handle edge cases

TDZ (Temporal Dead Zone): biến đã được hoisted nhưng chưa initialized → access sẽ throw ReferenceError.

Best practice: Luôn dùng const by default, let khi cần re-assign. Tránh var.

interface: extends, declaration merging, IDE experience tốt hơn cho objects. Dùng cho: component props, API response shapes, class contracts.

type: union types, intersection types, mapped types, conditional types. Dùng cho: union types, utility types, complex type transformations.

Trong thực tế RN: Dùng interface cho Props types và API models. Dùng type cho unions (navigation params, action types).

function groupBy<T, K extends string>(
  items: T[],
  keyGetter: (item: T) => K
): Record<K, T[]> {
  const result = {} as Record<K, T[]>;
  for (const item of items) {
    const key = keyGetter(item);
    if (!result[key]) result[key] = [];
    result[key].push(item);
  }
  return result;
}

const grouped = groupBy(users, (u) => u.role);

TypeScript tự infer types từ usage — grouped sẽ có type Record<string, User[]>.

WeakMap: keys phải là objects, keys được held weakly (GC có thể collect nếu không có reference khác). Dùng cho: cache metadata cho DOM nodes/objects mà không prevent garbage collection. Private data pattern.

WeakSet: values phải là objects, held weakly. Dùng cho: tracking đã process object nào chưa.

Khác Map/Set: Không iterable, không có .size — vì contents phụ thuộc vào GC timing.

Strict mode bật các quy tắc nghiêm ngặt hơn: không cho phép undeclared variables, không cho delete variables, this = undefined trong standalone functions (thay vì window), cấm duplicate params, etc.

Trong RN: ES modules (import/export) luôn ở strict mode. Class bodies cũng strict mode. Nên không cần khai báo thủ công 'use strict'.