# JavaScript Curriculum — Outline chi tiết 12 chương (JS core + TypeScript) **Sub-pillar:** JavaScript (thuộc Programming Language pillar — trụ cột 9 của IT Basic) **Số chương:** 12 (8 JS core + 4 TypeScript) **Phiên bản target:** ECMAScript 2024 + TypeScript 5.4+ **Started:** 2026-05-20 **Status:** Outline phase — chờ user approve trước khi viết HTML content ## Mục đích của file này File này là **bản thiết kế chi tiết** (spec) cho 12 chương JavaScript. Khi sang Phase 2 (viết HTML), mỗi chương được viết bằng cách **mở rộng** outline tương ứng — không cần thiết kế lại scope, không cần quyết định lại nội dung gì có/không có. Mỗi chương trong outline này gồm: - **Mục tiêu chương** — học xong làm được gì - **Lý do học** — vì sao chương này quan trọng cho roadmap tổng - **Prerequisites** — cần đọc chương nào trước - **Sections** — các section con cụ thể trong chương - **Key concepts** — list khái niệm bắt buộc phải cover - **Code examples** — kịch bản ví dụ cụ thể sẽ dùng - **Visualizer / diagram** — hình ảnh/bảng/sơ đồ cần vẽ - **4-5 bài tập** — đề + định hướng giải - **6-8 quiz** — câu hỏi + đáp án + lý do - **Connects to** — chương khác sẽ sử dụng kiến thức này - **Ước lượng độ dài** — số dòng HTML dự kiến ## Triết lý chung của curriculum JavaScript 1. **Modern JavaScript first (ES2020+)** — ưu tiên `let`/`const`, arrow function, destructuring, spread, optional chaining, nullish coalescing. `var` chỉ nhắc khi giải thích hoisting/scope. Không dạy callback hell như default, chỉ giới thiệu lịch sử để hiểu vì sao có Promise/async. 2. **Tách 3 lớp: ngôn ngữ — runtime — ecosystem** — JavaScript ngôn ngữ (ECMAScript spec) ≠ JavaScript trong browser (Web API: DOM, fetch) ≠ JavaScript trong Node (fs, http). Curriculum tập trung lớp 1 (ngôn ngữ) + đủ lớp 2-3 để chạy code. 3. **TypeScript là superset, không phải thay thế** — học JS chắc trước (chương 1-8), rồi mới TS (chương 9-12). Mỗi feature TS đều được giải thích "vì sao JS không đủ". 4. **Mental model về event loop là critical** — chương 6 (async) dành slot lớn vẽ diagram call stack / web API / task queue / microtask queue. Không hiểu event loop = không viết được JS production. 5. **Type system như ngôn ngữ thiết kế** — TypeScript không chỉ "ngăn bug" mà còn là cách diễn đạt invariant, contract, intent. Chương 11 (advanced types) coi types là first-class citizen. 6. **So sánh với Dart khi có ích** — user vừa học Dart xong, nên reference nhanh: `Future` ≈ `Promise`, `Stream` ≈ `Observable/AsyncIterable`, Dart sound null safety ≈ TS strict mode + non-null assertion. --- ## Chương 1 — Hello JavaScript ### Mục tiêu chương Học xong chương 1, người đọc sẽ: - Hiểu lịch sử ngắn của JavaScript (Brendan Eich 1995, ECMAScript spec, các phiên bản lớn) - Phân biệt JavaScript ngôn ngữ vs runtime (V8, SpiderMonkey, JavaScriptCore) vs môi trường (browser, Node, Deno, Bun) - Chạy được JS ở 3 nơi: browser DevTools console, Node REPL, file `.js` qua `node` - Biết các tool core: `node`, `npm`/`pnpm`/`yarn`, `npx`, `eslint`, `prettier` - Hiểu khái niệm "ESM vs CommonJS" ở mức intro (sâu hơn ở chương 8) - Setup được project mini: `npm init`, `package.json`, `node_modules` ### Lý do học Đây là chương "lên xe" — không có chương này, mọi chương sau đều giả định người đọc chạy được file `.js`. Chương 1 cũng phá ngộ nhận lớn: "JavaScript là ngôn ngữ trên trình duyệt" — thực ra JS chạy ở rất nhiều nơi, và mỗi nơi cung cấp API khác nhau. ### Prerequisites Không có — chương khởi đầu. Giả định người đọc đã dùng terminal cơ bản (tham khảo trụ cột CLI nếu cần). ### Sections 1. **JavaScript là gì** — Lịch sử (Netscape 1995, "10 ngày tạo ngôn ngữ"), ECMAScript spec (ES5/ES6/ES2015→ES2024), TC39 process, vì sao tên có "Java" mà không liên quan Java. 2. **Runtime và môi trường thực thi** — V8 (Chrome/Node), SpiderMonkey (Firefox), JavaScriptCore (Safari/Bun). Bảng so sánh Node vs Deno vs Bun: cùng V8 (Bun dùng JavaScriptCore) nhưng API khác. 3. **Chạy JS ở browser** — Mở DevTools (F12 / Cmd+Opt+I), tab Console, gõ `1 + 1`. Giải thích Console = REPL kèm Web API. 4. **Chạy JS với Node** — Cài Node (nvm khuyến khích), `node --version`, REPL `node`, chạy file `node hello.js`. 5. **Hello World** — File `hello.js`: `console.log('Xin chào JavaScript')`. Chạy bằng `node hello.js`. Đọc args qua `process.argv`. 6. **package.json — manifest của project JS** — `npm init -y`, các field quan trọng: `name`, `version`, `type` (module/commonjs), `scripts`, `dependencies`, `devDependencies`. 7. **npm ecosystem cơ bản** — npmjs.com, `npm install `, `npm install -D ` (dev), `npm install -g` (global cảnh báo), `package-lock.json`. Khi nào nên dùng pnpm/yarn (workspaces, hard links). 8. **Tooling baseline** — Prettier (format), ESLint (lint), Node types nếu dùng TS. `npx` để chạy package mà không cần install global. 9. **IDE setup** — VS Code + extension JavaScript/TypeScript (built-in), Prettier, ESLint. Setting format on save. 10. **Compile mode** — JS không cần compile (interpreter), nhưng có 2 process biến đổi phổ biến: bundler (esbuild/vite/webpack/rollup) và transpiler (Babel cho legacy). Sâu hơn ở chương 8. ### Key concepts - JavaScript là ngôn ngữ động, single-threaded, interpreted (có JIT optimization) - ECMAScript = spec, JavaScript = implementation phổ biến của spec (cũng có ActionScript, JScript trong lịch sử) - Browser cung cấp Web API (DOM, fetch, localStorage), Node cung cấp Node API (fs, http, process) — không trộn lẫn - `package.json` ≈ `pubspec.yaml` của Dart, format JSON không phải YAML - `node_modules/` ≈ `.dart_tool/` về vai trò "không commit" và `package-lock.json` ≈ `pubspec.lock` ### Code examples 1. `hello.js` — `console.log('Xin chào JavaScript')`, chạy với `node hello.js` 2. `greet.js` — `const name = process.argv[2] ?? 'bạn'; console.log(\`Xin chào, ${name}\`)`, chạy với `node greet.js Việt` 3. Snippet trong DevTools Console — `document.title`, `window.location.href`, demo Web API tồn tại 4. `package.json` mẫu — đầy đủ field, `"type": "module"` để dùng ESM 5. Demo `npm install lodash`, xem `node_modules/` mọc lên, `package-lock.json` thay đổi ### Visualizer / diagram - Sơ đồ "JavaScript landscape": ECMAScript spec → engines (V8/SpiderMonkey/JSC) → runtimes (browser/Node/Deno/Bun) → ecosystem (npm/jsr) - Bảng so sánh API có sẵn: cột (API, có ở browser, có ở Node, có ở Deno/Bun) - Visual `package.json` mẫu với annotation từng field ### Bài tập (5) 1. Cài Node qua nvm, chạy `node --version`, screenshot kết quả. 2. Mở browser DevTools, gõ `navigator.userAgent` trong Console, copy kết quả. Sau đó chạy `node -e "console.log(process.version)"` — so sánh. 3. Tạo file `greet.js` đọc tên qua command-line args, in ra "Xin chào, [tên]" (nếu không có tên thì "Xin chào, bạn"). Chạy thử cả 2 cách. 4. `npm init -y` ở folder mới, mở `package.json`, sửa `"name"`, thêm script `"start": "node hello.js"`. Chạy `npm start`. 5. `npm install date-fns`, viết file dùng `format(new Date(), 'dd/MM/yyyy')` để in ngày hôm nay theo định dạng Việt Nam. Sau đó xoá `node_modules/`, chạy `npm install` lại — quan sát `package-lock.json` đảm bảo phiên bản giống nhau. ### Quiz (7) 1. JavaScript và Java có liên quan gì không? — Không. Tên "JavaScript" là marketing năm 1995 khi Java đang hot. Hai ngôn ngữ khác nhau hoàn toàn về thiết kế. 2. `console.log` có ở mọi môi trường JS không? — Có ở phần lớn (browser, Node, Deno, Bun) như de-facto standard, nhưng KHÔNG nằm trong ECMAScript spec. Nó là API của host environment. 3. `package.json` và `package-lock.json` khác gì? — `.json` là declaration (version range như `^1.2.0`), `.lock` là resolved version cụ thể (`1.2.5`). `.lock` PHẢI commit cho app để đảm bảo reproducible build. 4. `npm install -g` có nên dùng không? — Hạn chế. Lý do: package global dễ conflict version giữa project. Dùng `npx` hoặc devDependency + `npm scripts` thay thế. 5. `node hello.js` có cần `package.json` không? — Không. Node chạy được file `.js` standalone. Nhưng nếu file có `import`/`export`, cần `package.json` có `"type": "module"` HOẶC đổi đuôi `.mjs`. 6. ECMAScript phiên bản mới ra mỗi bao lâu? — Mỗi năm (kể từ ES2015). Mỗi tháng 6, TC39 finalize feature đã ở stage 4 thành phần của spec năm đó. 7. Trong browser, JS có truy cập file system local không? — Không trực tiếp (sandboxed). Chỉ qua File System Access API (user phải explicit chọn file) hoặc ``. Đây là lý do Node tồn tại — để JS làm server/CLI. ### Connects to - Chương 2-8 — mọi ví dụ giả định người đọc chạy được `node file.js` - Chương 8 (Modules) — đào sâu ESM/CommonJS đã touch ở section 6 - Chương 12 (TS Compiler) — `tsconfig.json` ≈ extension của `package.json` ### Ước lượng độ dài ~700-800 dòng HTML (chương khởi động, không quá nặng cú pháp, nặng setup + diagram). --- ## Chương 2 — Variables, Types & Coercion ### Mục tiêu chương Học xong chương 2, người đọc sẽ: - Hiểu 3 cách khai báo biến: `var`, `let`, `const` và biết KHI NÀO dùng cái nào (mặc định `const`, fallback `let`, tránh `var`) - Phân biệt 7 primitive types: `string`, `number`, `bigint`, `boolean`, `undefined`, `symbol`, `null` (và Object như non-primitive) - Hiểu `null` vs `undefined`: KHI NÀO JS cho ra `undefined` (uninitialized, missing arg, missing property) vs khi nào lập trình viên explicit gán `null` - Nắm được type coercion: implicit (`==`, `+`, `if`) vs explicit (`Number()`, `String()`, `Boolean()`) - Biết các gotcha kinh điển: `[] == ![]`, `NaN !== NaN`, `0.1 + 0.2 !== 0.3`, `typeof null === 'object'` - Hiểu khi nào dùng `===` (strict) vs `==` (loose, gần như không bao giờ) ### Lý do học Type coercion của JS là nguồn của hàng loạt bug nổi tiếng. Hiểu rule coercion = viết được code dự đoán được. Đây cũng là nền tảng để sang TypeScript: bạn cần biết JS "type" thật sự là gì (runtime) trước khi học TS "type" (compile-time). ### Prerequisites Chương 1 (chạy được file JS). ### Sections 1. **Khai báo biến: `var`, `let`, `const`** — Bảng so sánh: scope (function vs block), hoisting (undefined vs TDZ), reassignment, redeclaration. Khuyến nghị: default `const`, dùng `let` khi cần thay đổi, `var` chỉ học để hiểu code cũ. 2. **7 primitive types** — Bảng từng type: ví dụ, `typeof` trả về gì, có wrapper object không (String/Number/Boolean), có gotcha gì. 3. **`null` vs `undefined`** — Mental model: `undefined` = "chưa được gán" (JS tự sinh), `null` = "explicit empty" (lập trình viên gán). Khi nào API trả `null` (vd `document.getElementById` không tìm thấy) vs `undefined`. 4. **Number — chỉ có 1 type number** — Không phân biệt int/float như Dart. Tất cả là IEEE 754 double. `0.1 + 0.2 = 0.30000000000000004`. `Number.MAX_SAFE_INTEGER`. `BigInt` cho số lớn hơn. 5. **String** — Single quote vs double quote vs backtick (template literal), `${expr}` interpolation, multiline, escape, immutable. 6. **Boolean và Truthy/Falsy** — 6 giá trị falsy: `false`, `0`, `''`, `null`, `undefined`, `NaN`. Tất cả còn lại truthy (kể cả `[]`, `{}`, `'0'`, `'false'`). `Boolean(x)` để convert. 7. **Type coercion — implicit** — Quy tắc `+` với string (concat), `+` với number (add), `-` chỉ number. Quy tắc `==` (Abstract Equality Comparison). Sơ đồ flow chart cho `==`. 8. **Type coercion — explicit** — `Number(x)`, `String(x)`, `Boolean(x)`, `parseInt`, `parseFloat`. Khi nào dùng cái nào. Trick `+x` (chuyển sang number), `!!x` (chuyển sang boolean). 9. **`typeof` operator** — Trả về string. Bảng: `typeof undefined === 'undefined'`, `typeof null === 'object'` (bug lịch sử). `typeof function === 'function'` (đặc biệt). 10. **Gotcha kinh điển và cách tránh** — `NaN !== NaN` (dùng `Number.isNaN`), `0.1 + 0.2` (dùng `toFixed` hoặc lib `decimal.js`), `[] == false` (dùng `===`), `typeof null` (kiểm tra `x === null` riêng). ### Key concepts - `let`/`const` block-scoped, `var` function-scoped (di sản từ pre-ES6) - Hoisting: tất cả khai báo "lên đầu scope" nhưng `let`/`const` ở TDZ (Temporal Dead Zone) cho đến dòng khai báo - Primitive là immutable — `'abc'.toUpperCase()` không thay đổi string gốc mà trả về string mới - `===` so sánh value + type, `==` còn coercion (gần như nên cấm trừ `x == null` để check cả null lẫn undefined) - JS không có `int`, chỉ `number` (IEEE 754) → cẩn thận với phép cộng số thập phân - `NaN` là number duy nhất không bằng chính nó ### Code examples 1. Demo TDZ — `console.log(x); let x = 5;` báo ReferenceError, vs `var` thì in `undefined` 2. Bảng `typeof` cho từng giá trị 3. Demo coercion: `1 + '2' === '12'`, `1 + true === 2`, `null + 1 === 1`, `undefined + 1 === NaN` 4. Demo gotcha `0.1 + 0.2` và cách dùng `(0.1 + 0.2).toFixed(2)` hoặc check `Math.abs(a - b) < Number.EPSILON` 5. Pattern check empty: `if (!value)` vs `if (value == null)` vs `if (value === undefined)` — khi nào dùng cái nào ### Visualizer / diagram - Sơ đồ "Type hierarchy của JS": primitive (7 types) vs object - Flow chart so sánh `==` (Abstract Equality) — các bước coerce - Bảng truthy/falsy với ví dụ cụ thể - Bảng so sánh `var`/`let`/`const` (scope, hoisting, reassign, redeclare) ### Bài tập (5) 1. Đoán kết quả không chạy: `console.log(typeof null, typeof undefined, typeof NaN, typeof [], typeof null === typeof {})`. Sau đó chạy thử và giải thích. 2. Viết function `isEmpty(value)` trả về `true` nếu value là `null`, `undefined`, `''`, hoặc `[]` rỗng / `{}` rỗng. Test với 10 case. 3. Tìm cách check `x` là số nguyên không. Hint: `Number.isInteger(x)`, nhưng còn `'5'` thì sao? Viết function `isStrictInteger(x)` strict hơn. 4. Demo gotcha: viết loop dùng `var i` trong setTimeout vs `let i` — giải thích vì sao kết quả khác nhau (closure + scope). 5. Viết function `safeJsonParse(str)` parse JSON, nếu lỗi trả về `null`. Khi parse `'null'` thì return gì? Khi parse `'undefined'` thì sao? ### Quiz (7) 1. `typeof null` trả về gì? — `'object'`. Đây là bug từ thuở JS đầu tiên không thể fix vì backward compat. 2. `[] == false` đúng hay sai? — Đúng (true). Vì coercion: `[]` → `''` → `0`, `false` → `0`, `0 == 0`. Đây là lý do dùng `===`. 3. `const obj = { a: 1 }; obj.a = 2;` có lỗi không? — Không. `const` chỉ chặn reassign biến, không chặn mutate object/array bên trong. 4. Trong `if (x)` thì `x = []` chạy nhánh nào? — Nhánh `true` (truthy). Vì `[]` là object, mọi object đều truthy. 5. `NaN === NaN` trả về gì? — `false`. Đây là rule của IEEE 754. Dùng `Number.isNaN(x)` hoặc `x !== x` để check. 6. `0.1 + 0.2 === 0.3` đúng hay sai? — Sai (false). Vì IEEE 754 double không biểu diễn được chính xác 0.1 và 0.2. 7. Khi nào nên dùng `==` thay `===`? — Hầu như không bao giờ. Một trường hợp hiếm: `x == null` để check cả `null` và `undefined` cùng lúc — nhưng có người vẫn thích viết `x === null || x === undefined` cho rõ ràng. ### Connects to - Chương 3 (Functions/Scope) — đào sâu hoisting và TDZ - Chương 4 (Objects) — phân biệt primitive vs object reference - Chương 9 (TS types) — type của TS đối chiếu với type runtime của JS ### Ước lượng độ dài ~800-900 dòng HTML — nặng bảng so sánh + gotcha + flow chart. --- ## Chương 3 — Functions, Scope & Closures ### Mục tiêu chương Học xong chương 3, người đọc sẽ: - Phân biệt 4 cách định nghĩa function: function declaration, function expression, arrow function, method shorthand - Hiểu `this` binding — quy tắc nào khi nào: default, implicit (method call), explicit (`call`/`apply`/`bind`), `new` (constructor), arrow (lexical) - Nắm khái niệm scope: global, function, block; scope chain - Hiểu hoisting: function declaration hoisted fully, function expression chỉ hoisted name (nếu `var`) hoặc TDZ (nếu `let`/`const`) - Nắm closure: function nhớ scope lúc khai báo, dùng cho data privacy, factory, callback - Biết các parameter pattern: default params, rest params, destructuring params ### Lý do học Closure và `this` là 2 concept gây bug nhiều nhất với người chuyển từ ngôn ngữ khác sang JS. Hiểu chúng = không bị "tại sao `this` undefined?". Closure cũng là nền tảng cho module pattern, factory pattern, callback pattern phổ biến. ### Prerequisites Chương 1-2. ### Sections 1. **4 cách định nghĩa function** — `function foo() {}`, `const foo = function() {}`, `const foo = () => {}`, `{ foo() {} }`. Bảng: hoisting? có `this` riêng? có `arguments` không? dùng `new` được không? 2. **Function là first-class** — Gán biến, truyền argument, return từ function, lưu trong array/object. Đây là gốc rễ của functional programming trong JS. 3. **Parameters: default, rest, destructuring** — `function foo(a = 1, b = 2, ...rest)`, `function foo({ x, y })`. Order matter: default đứng cuối, rest cuối cùng. 4. **Arrow function — khác gì function thường** — 4 điểm: (a) không có `this` riêng (dùng `this` lexical), (b) không có `arguments`, (c) không dùng được với `new`, (d) không có `prototype` property. Khi nào dùng / không dùng. 5. **`this` binding — 4 quy tắc** — Default (strict: undefined, sloppy: window), implicit (`obj.method()`), explicit (`fn.call(ctx)`, `fn.apply(ctx, args)`, `fn.bind(ctx)`), `new` binding. Arrow ngoại lệ: lexical, không bị các quy tắc trên. 6. **Scope — global / function / block** — Block scope chỉ áp dụng cho `let`/`const`. `var` ignore block. Demo: `if (true) { var x = 1; } console.log(x)` chạy, `let x` thì lỗi. 7. **Scope chain & hoisting** — Khi truy cập biến, JS đi từ scope hiện tại ra ngoài cho đến global. Hoisting: function declaration nhảy lên đầu scope, function expression với `var` chỉ tên nhảy lên (= undefined), với `let`/`const` ở TDZ. 8. **Closure — định nghĩa và ví dụ** — "Function + scope nó được tạo ra". Ví dụ counter: `function makeCounter() { let n = 0; return () => ++n; }`. Closure giữ biến sống lâu hơn function tạo ra nó. 9. **Closure patterns** — (a) Data privacy (encapsulation), (b) Factory function, (c) Memoization, (d) Once-only callback, (e) Currying. 10. **IIFE — Immediately Invoked Function Expression** — `(function() { ... })()`. Dùng để tạo scope cô lập (trước khi có module). Ngày nay ít cần vì có ESM. ### Key concepts - Function declaration hoisted hoàn toàn → có thể gọi trước khi khai báo - Function expression với `const` không hoisted → TDZ - `this` của function thường = "ai gọi nó", `this` của arrow = "scope khai báo" - Closure không phải feature riêng, mà là hệ quả của lexical scoping + first-class function - `let` trong loop tạo scope mới mỗi iteration → fix bug `setTimeout` trong loop kinh điển ### Code examples 1. Demo 4 cách định nghĩa, table so sánh kèm sample 2. Demo `this` 4 cách bind, kèm output từng cách 3. Closure counter: `makeCounter()` trả về 3 hàm: increment, decrement, get 4. Demo `setTimeout` trong loop với `var` vs `let` — kết quả khác nhau, giải thích 5. Memoize pattern: `function memoize(fn) { const cache = new Map(); return (x) => cache.has(x) ? cache.get(x) : (cache.set(x, fn(x)), cache.get(x)); }` ### Visualizer / diagram - Sơ đồ scope chain: global → outer → inner, lookup đi từ trong ra ngoài - Diagram `this` binding: 4 rule với priority (new > explicit > implicit > default) - Animation/visualizer closure: function "nắm tay" biến của scope cha - Bảng so sánh function thường vs arrow (5 điểm) ### Bài tập (5) 1. Viết function `add(a, b)` 3 cách: declaration, expression, arrow. Kiểm tra hoisting bằng cách gọi `add(1, 2)` trước dòng khai báo cho từng cách. 2. Viết object `user` có method `greet()`. Sau đó gán `const fn = user.greet`. Gọi `fn()` — `this` là gì? Sửa lại để `this` luôn là `user` (3 cách: `bind`, arrow + capture, hoặc closure). 3. Viết function `once(fn)` — trả về function chỉ chạy `fn` 1 lần đầu, các lần sau return cached result. Test với function in `console.log`. 4. Viết function `curry(fn)` — convert `fn(a, b, c)` thành `fn(a)(b)(c)`. Bắt đầu với version fix 3 args, sau đó mở rộng cho n args. 5. Sửa bug: code dưới in ra `3 3 3` thay vì `0 1 2`. Sửa bằng 2 cách (đổi `var` → `let`, hoặc IIFE). ```js for (var i = 0; i < 3; i++) { setTimeout(() => console.log(i), 100); } ``` ### Quiz (7) 1. Function declaration và function expression khác nhau ở điểm nào về hoisting? — Declaration hoisted toàn bộ (name + body), expression chỉ hoisted name (nếu `var`) hoặc TDZ (nếu `let`/`const`). 2. Arrow function có `this` riêng không? — Không. Arrow dùng `this` của scope khai báo (lexical). Đây là lý do arrow phù hợp với callback trong method. 3. `function foo() { console.log(this); } foo();` in ra gì? — Trong strict mode: `undefined`. Sloppy mode: `window` (browser) hoặc `global` (Node). 4. Closure có giải phóng biến sau khi function trả về không? — Không nếu vẫn còn reference đến closure. JS GC chỉ thu hồi khi không còn reference. Đó là lý do closure "nhớ" được. 5. `for (let i = 0; i < 3; i++) { setTimeout(() => console.log(i), 0); }` in ra gì? — `0 1 2`. Vì `let` tạo binding mới mỗi iteration. Nếu là `var` thì in `3 3 3` vì cùng 1 biến. 6. Có thể dùng `new` với arrow function không? — Không. Arrow không có internal `[[Construct]]` method. 7. `const fn = obj.method; fn.call(obj)` và `obj.method()` cho kết quả gì khác nhau? — Giống nhau, vì `call(obj)` explicit bind `this = obj`, tương đương implicit qua `obj.method()`. ### Connects to - Chương 4 (Objects) — method là function attached vào object, `this` rule áp dụng - Chương 5 (Iterables) — callback function passed cho map/filter/reduce - Chương 6 (Async) — closure giữ scope cho async callback ### Ước lượng độ dài ~900-1000 dòng HTML — chương dày vì closure + this cần nhiều ví dụ. --- ## Chương 4 — Objects, Prototypes & Classes ### Mục tiêu chương Học xong chương 4, người đọc sẽ: - Tạo object bằng 4 cách: object literal, `new Object()`, `Object.create(proto)`, `class` - Hiểu prototype chain: mỗi object có `__proto__`, lookup property đi theo chain - Phân biệt `prototype` (property của Function/Class) vs `__proto__` (property của Instance) - Sử dụng `class` syntax: constructor, instance method, static method, getter/setter, inheritance qua `extends`, `super` - Hiểu private field (`#field`), khác gì convention `_field` - Nắm pattern phổ biến: factory function, mixin, composition over inheritance - Phân biệt reference vs value: primitive copy by value, object copy by reference ### Lý do học JavaScript là ngôn ngữ prototype-based, nhưng cú pháp `class` (ES6) làm nó "trông giống" Java/C++. Hiểu sự khác biệt giúp đọc code library, tracking bug "method không tồn tại", và thiết kế hệ thống không lạm dụng inheritance. ### Prerequisites Chương 1-3. ### Sections 1. **Object literal** — `{ key: value }`, shorthand property (`{ x }` ≡ `{ x: x }`), computed key (`{ [k]: v }`), method shorthand (`{ foo() {} }`). 2. **Property access** — Dot notation vs bracket notation, optional chaining `?.`, nullish coalescing `??`. Khi nào dùng bracket (key có dấu cách, dấu đặc biệt, hoặc dynamic). 3. **Reference vs value** — Demo: `const a = { x: 1 }; const b = a; b.x = 2; console.log(a.x)` in 2. Vs `const a = 1; let b = a; b = 2; console.log(a)` in 1. Lý do: object lưu reference. 4. **Object methods** — `Object.keys/values/entries`, `Object.assign`, spread `{...obj}`, `Object.freeze`, `Object.seal`, `Object.fromEntries`. Khi nào dùng cái nào. 5. **Prototype — mental model** — Mọi object có `__proto__` trỏ về parent. Khi truy cập property, JS đi theo chain từ object lên prototype, cho đến `null`. Lookup time O(chain depth). 6. **`Object.create(proto)`** — Cách low-level nhất tạo object với prototype tuỳ chọn. Hữu ích để hiểu cơ chế trước khi đến `class`. 7. **`class` syntax (ES6+)** — `class User { constructor(name) { this.name = name; } greet() { ... } }`. Behind the scenes: `class` chỉ là syntactic sugar cho `function` + `prototype`. 8. **Static method và static property** — `static makeAdmin()`. Dùng khi method không phụ thuộc instance state (vd factory, helper, constant). 9. **Getter / Setter** — `get fullName() { ... }`, `set fullName(value) { ... }`. Behavior như property nhưng có logic. Trade-off với method. 10. **Inheritance qua `extends` và `super`** — `class Admin extends User { constructor(name) { super(name); } }`. Khi nào hợp lý dùng inheritance (is-a), khi nào không (favor composition). 11. **Private field `#field` (ES2022)** — `class Counter { #count = 0; increment() { this.#count++; } }`. Khác `_count` convention: `#` thực sự private (compile-time enforce), `_` chỉ là quy ước. 12. **Composition over inheritance** — Pattern: thay vì `class B extends A`, ta dùng `class B { constructor() { this.a = new A(); } }` hoặc mixin. Demo case study: cây class deep vs composition flat. ### Key concepts - JavaScript là prototype-based, không phải class-based — `class` là sugar - Mọi instance đều có `__proto__` trỏ về `ConstructorFunction.prototype` - Inheritance qua prototype chain, không phải copy field - Object copy by reference, primitive copy by value - Private field `#field` là feature ngôn ngữ thật sự, không phải convention ### Code examples 1. Demo `__proto__` chain: `[].__proto__ === Array.prototype`, `Array.prototype.__proto__ === Object.prototype` 2. `Object.create(null)` vs `{}` — khác nhau ở prototype (`null` vs `Object.prototype`) 3. Class `Animal` với method `speak`, class `Dog extends Animal` override `speak`, demo `super.speak()` 4. Counter với `#count` private vs `_count` convention — demo `counter._count = -999` hack được vs `counter.#count` không truy cập từ ngoài 5. Composition: `class Logger { log(msg) {...} }; class UserService { constructor() { this.logger = new Logger(); } }` ### Visualizer / diagram - Diagram prototype chain với 3-4 level (instance → constructor.prototype → parent.prototype → Object.prototype → null) - Bảng so sánh inheritance (extends) vs composition (has-a) - Visualizer "reference vs value" — 2 ô nhớ với mũi tên cho object, ô đơn cho primitive - Bảng method `Object.*` với input/output ví dụ ### Bài tập (5) 1. Viết function `deepClone(obj)` — clone object lồng nhau. Test với object có nested object, array, và circular reference (challenge). 2. Tạo class `BankAccount` với `#balance` private. Method `deposit`, `withdraw` (throw nếu không đủ), getter `balance`. Test rằng `account.#balance` từ ngoài không truy cập được. 3. Tạo class `Shape` (base), `Circle extends Shape`, `Square extends Shape`. Override `area()`. Sau đó refactor sang composition: `class Shape { constructor(strategy) { this.strategy = strategy; } area() { return this.strategy.area(); } }`. So sánh trade-off. 4. Viết `Object.pick(obj, keys)` (chọn 1 số key) và `Object.omit(obj, keys)` (loại 1 số key) — tương tự `_.pick`/`_.omit` của lodash. 5. Tạo mixin `Serializable` có method `toJSON()` và `fromJSON(str)`. Apply vào class `User` qua `Object.assign(User.prototype, Serializable)`. Demo work với cả `class User` viết bằng `class` syntax lẫn cũ. ### Quiz (8) 1. `{}` và `Object.create(null)` khác gì? — `{}` có prototype `Object.prototype` (do đó có `toString`, `hasOwnProperty`). `Object.create(null)` không có prototype, "pure dictionary". Tốt cho map dữ liệu user-input tránh prototype pollution. 2. `class` của JS có khác gì `class` của Java về bản chất? — Khác. Java class compile sang class file riêng, JS class chỉ là function + prototype. JS không có overload method (chỉ có method cuối ghi đè), không có abstract class native, không có interface. 3. Private field `#x` và `_x` khác gì? — `#x` thực sự private (cú pháp ngôn ngữ, runtime throw nếu truy cập từ ngoài). `_x` chỉ convention, vẫn truy cập được. Dùng `#` khi muốn enforce thật sự. 4. `instance.__proto__` và `Constructor.prototype` có liên quan gì? — `instance.__proto__ === Constructor.prototype`. Khi `new Constructor()`, JS gán `__proto__` của instance = `Constructor.prototype`. 5. `static` method gọi qua instance được không? — Không trực tiếp. `User.makeAdmin()` chạy, `userInstance.makeAdmin()` undefined. Static thuộc class, không thuộc instance. 6. Khi `class B extends A` và B có `constructor`, có bắt buộc gọi `super()` không? — Có. Phải gọi `super()` TRƯỚC khi truy cập `this`. JS sẽ throw nếu quên. 7. `Object.freeze(obj)` có làm nested object freeze không? — Không. Chỉ freeze level 1. Muốn deep freeze cần đệ quy tự viết. 8. Composition và inheritance, cái nào tốt hơn? — Tuỳ case. Inheritance phù hợp khi có quan hệ "is-a" rõ ràng (Admin is User). Composition phù hợp khi "has-a" (Car has Engine) và linh hoạt hơn cho thay đổi. Lời khuyên phổ biến: "favor composition over inheritance" để tránh tree class sâu khó refactor. ### Connects to - Chương 5 (Iterables) — array là object đặc biệt với numeric key + length - Chương 11 (TS Advanced Types) — type modeling cho class hierarchy - OOP pillar (trụ cột 6) — design pattern cụ thể với class ### Ước lượng độ dài ~1000-1100 dòng HTML — nặng vì prototype + class + private + pattern. --- ## Chương 5 — Arrays, Iterables & Iteration Protocols ### Mục tiêu chương Học xong chương 5, người đọc sẽ: - Sử dụng thành thạo Array methods: `map`, `filter`, `reduce`, `forEach`, `find`, `findIndex`, `some`, `every`, `flat`, `flatMap`, `sort` - Phân biệt mutating methods (`push`, `pop`, `splice`, `sort`) và non-mutating (`concat`, `slice`, `map`, mới: `toSorted`, `toReversed`) - Hiểu Iteration Protocol: `[Symbol.iterator]`, `next()`, `done`/`value` - Viết được custom iterable, custom iterator - Sử dụng generator function (`function*`, `yield`) cho lazy sequence - Nắm Set, Map, WeakSet, WeakMap — khi nào dùng cái nào - Hiểu spread vs rest, destructuring array/object sâu ### Lý do học Phần lớn data trong app JS là collection (array, object, response từ API). Master Array/Iterable methods = code ngắn hơn 50%, ít bug hơn. Iteration protocol là nền của `for...of`, spread, destructuring — feature dùng hàng ngày. ### Prerequisites Chương 1-4. ### Sections 1. **Array — basic** — Tạo `[]`, `new Array(n)` (gotcha: tạo sparse), `Array.of`, `Array.from`. Length property và sparse array. 2. **Mutating vs non-mutating methods** — Bảng đầy đủ. Khuyên: trừ khi performance cần, ưu tiên non-mutating cho code dễ đọc + immutable mindset. 3. **Map, Filter, Reduce — trinity của functional JS** — Mỗi method: signature, ví dụ, gotcha. `reduce` đặc biệt: hơn 80% case dùng có thể đơn giản hoá bằng phối hợp khác. 4. **forEach vs for/of vs for** — Bảng: có thể break? có async work tốt? có index không? performance? Recommend: `for/of` mặc định, `forEach` cho side effect đơn giản, `for` cổ điển khi cần index + break. 5. **Find / Some / Every / Includes** — Cái nào early return, cái nào full scan, cái nào dùng `===` cái nào dùng predicate. 6. **Flat / FlatMap** — `flat(Infinity)` để flatten sâu, `flatMap` ≡ `map().flat(1)` nhưng efficient hơn. 7. **Sort — gotcha** — `[10, 1, 2].sort()` → `[1, 10, 2]` vì so sánh string. Phải truyền comparator: `.sort((a, b) => a - b)`. Sort mutate, `toSorted` (ES2023) không mutate. 8. **Spread và Rest** — Spread `...` để mở array/object ra, rest `...` để gom vào. Cùng cú pháp nhưng ngữ cảnh khác. Demo: copy array shallow, merge object, gather extra args. 9. **Destructuring** — Array: `const [a, b, ...rest] = arr`, object: `const { x, y: yAlias = 1 } = obj`. Nested, default, rename. Pattern: swap variable, function params, return multiple values. 10. **Iteration Protocol** — Object có `[Symbol.iterator]` method → iterable. `[Symbol.iterator]()` trả iterator (object có `next()` return `{ value, done }`). Demo: viết iterable custom (vd range). 11. **Generator function** — `function* range(start, end) { for (let i = start; i < end; i++) yield i; }`. Lazy, có thể dùng `for/of`, có thể spread. Sâu hơn ở chương 6 (cho async). 12. **Set / Map / WeakSet / WeakMap** — Set: unique value, dùng `.has` O(1) thay vì `.includes` O(n). Map: key bất kỳ (Object cũng được), giữ thứ tự insert. Weak: key là object, không giữ reference (GC được). ### Key concepts - Array là object đặc biệt, key là string số ("0", "1", ...) và có length - Mutating methods nguy hiểm trong concurrent code và React state — ưu tiên non-mutating - `map`/`filter` luôn trả array mới cùng length (filter ≤), `reduce` trả gì cũng được (accumulator type) - Iteration protocol là cơ chế ngầm sau `for/of`, spread, `Array.from`, `Promise.all` - Set/Map là default cho lookup, Object chỉ khi key luôn string và nhỏ ### Code examples 1. Bảng so sánh mutating vs non-mutating với 10 method phổ biến 2. Demo `reduce` 5 use case: sum, group by, count occurrence, build object from pairs, flatten 3. Sort comparator: number, string locale (`localeCompare`), object by property, multi-key sort 4. Viết iterable `range(start, end, step)` bằng generator 5. Pattern Set: remove duplicates `[...new Set(arr)]`, intersection `a.filter(x => b.has(x))` ### Visualizer / diagram - Bảng đầy đủ Array methods: mutating?, return value, callback signature, ví dụ - Diagram iteration protocol: iterable → iterator → next() loop - Visualizer destructuring: ánh xạ source → target - Bảng Set/Map vs Object/Array: dùng cho gì ### Bài tập (5) 1. Cho `users = [{ name: 'An', age: 20 }, { name: 'Bình', age: 25 }, ...]`. Viết các operation: tên người ≥ 21 tuổi, tuổi trung bình, group by tên đầu chữ cái. 2. Viết function `unique(arr)` (xoá duplicate), `chunk(arr, size)` (chia array thành sub-array size cố định), `zip(...arrs)` (ghép theo index). Không dùng lodash. 3. Viết iterable `fibonacci()` bằng generator, lấy 10 số đầu bằng `[...take(fib(), 10)]`. Bonus: viết `take(iter, n)` cũng là generator. 4. Refactor: thay 1 đoạn code dùng `for` loop + array push thành `map/filter/reduce`. So sánh độ dài, đọc dễ hơn không. 5. Viết function `groupBy(arr, keyFn)` trả object, key là kết quả của `keyFn(item)`, value là array các item cùng key. Test với `groupBy(users, u => u.age >= 18 ? 'adult' : 'child')`. ### Quiz (8) 1. `[1, 2, 3].map(parseInt)` trả về gì? — `[1, NaN, NaN]`. Vì `map` truyền 3 arg `(value, index, array)`, `parseInt(value, radix)` lấy 2 arg. `parseInt('1', 0) = 1`, `parseInt('2', 1) = NaN` (radix 1 invalid), `parseInt('3', 2) = NaN` (3 không phải digit base 2). 2. `Array.from({ length: 3 }, (_, i) => i)` trả gì? — `[0, 1, 2]`. `Array.from` chấp nhận array-like + mapping function. 3. `[1, 2, 3].reduce((a, b) => a + b)` và `.reduce((a, b) => a + b, 0)` khác gì? — Cùng kết quả (6). Khác khi array rỗng: không có initial value sẽ throw TypeError, có `0` thì trả `0`. 4. `for (const item of obj)` chạy được không? Vì sao? — Không, trừ khi obj có `[Symbol.iterator]`. Plain object không iterable. Dùng `for...in` cho key, hoặc `Object.entries(obj)` rồi `for...of`. 5. `Set` và `Array.includes`, cái nào nhanh hơn cho lookup nhiều lần? — Set (O(1) avg) nhanh hơn `includes` (O(n)). Nếu lookup > 1 lần trên cùng collection, convert sang Set. 6. `[...arr1, ...arr2]` và `arr1.concat(arr2)` khác gì? — Kết quả giống. Spread linh hoạt hơn (chèn giữa, mix với value khác). Concat hơi nhanh hơn cho array lớn. 7. `arr.sort()` mặc định sort theo gì? — Theo string. Convert mọi element sang string rồi so sánh char code. Đó là lý do `[10, 1, 2]` sort thành `[1, 10, 2]`. 8. WeakMap khác Map ở điểm nào quan trọng? — WeakMap key phải là object, và reference đến key là weak — không ngăn GC. Tức là khi không còn ref đến key ngoài WeakMap, key có thể bị thu hồi và entry tự xoá. Dùng cho cache, metadata không muốn leak. ### Connects to - Chương 6 (Async) — async iterator, generator cho async sequence - Chương 7 (Error) — handle error trong reduce/map (mỗi callback nên pure) - Dart Chương 6 (Iterables) — đối chiếu lazy iterable của Dart với JS ### Ước lượng độ dài ~950-1050 dòng HTML — nặng bảng method + ví dụ thực dụng. --- ## Chương 6 — Async JavaScript: Callbacks, Promise, async/await ### Mục tiêu chương Học xong chương 6, người đọc sẽ: - Hiểu single-threaded + event loop của JS qua diagram chi tiết: Call Stack, Web/Node API, Macrotask Queue, Microtask Queue - Phân biệt callback hell và cách Promise giải quyết - Sử dụng `Promise` API: `new Promise`, `then`/`catch`/`finally`, `Promise.all`/`allSettled`/`race`/`any` - Viết async function với `async`/`await`, biết khi nào dùng `await` trong loop tuần tự vs `Promise.all` song song - Hiểu error propagation: throw trong Promise chain, try/catch trong async function - Sử dụng AbortController để cancel fetch / async operation - Biết khi nào async không cần thiết (CPU-bound → vẫn block thread) ### Lý do học Async là phần JS gây nhiều bug và confusion nhất. Hiểu event loop = không bị "tại sao callback chạy sau cái này?". Đây cũng là kiến thức bắt buộc cho mọi app thực tế (network call, file I/O, animation). ### Prerequisites Chương 1-5. ### Sections 1. **Single-threaded + non-blocking — paradox** — JS chạy 1 thread, nhưng vẫn xử lý ngàn request đồng thời. Bí mật: event loop + Web/Node API chạy background. 2. **Event loop — diagram chi tiết** — Call Stack (chạy code sync), Web API (timer, fetch, DOM event), Macrotask Queue (setTimeout, setInterval, I/O callback), Microtask Queue (Promise.then, queueMicrotask). Rule: stack rỗng → drain microtask → 1 macrotask → loop. 3. **Callback** — Pattern cổ điển: `setTimeout(cb, 1000)`. Callback hell khi nest sâu. Inversion of control problem (ai gọi callback? khi nào? bao nhiêu lần?). 4. **Promise — 3 trạng thái** — Pending, Fulfilled, Rejected. Một khi settle, không thể thay đổi. Tạo: `new Promise((resolve, reject) => ...)`. Tiêu thụ: `.then(onFulfilled, onRejected)` hoặc `.then(...).catch(...)`. 5. **Promise chaining** — `.then(fn)` luôn trả Promise mới. Return value trong `.then` trở thành value của Promise tiếp. Return Promise sẽ flatten (không bị Promise>). 6. **Promise.all / allSettled / race / any** — Bảng: input array, output, behavior khi 1 reject. all: short-circuit reject. allSettled: chờ hết, trả mảng `{status, value/reason}`. race: lấy cái settle đầu (resolve hoặc reject). any: lấy resolve đầu, reject nếu tất cả reject. 7. **async/await — sugar trên Promise** — `async function foo() { const x = await bar(); }` tương đương `bar().then(x => ...)`. Function có `async` luôn trả Promise. 8. **Tuần tự vs song song** — `for (const url of urls) { const data = await fetch(url); }` chạy tuần tự (chậm). `await Promise.all(urls.map(fetch))` chạy song song (nhanh). 9. **Error handling** — try/catch quanh await, hoặc `.catch` trên Promise. Lưu ý: error trong `setTimeout` callback KHÔNG bắt được bằng try/catch ngoài. Unhandled rejection warning. 10. **AbortController — cancel async** — `const controller = new AbortController(); fetch(url, { signal: controller.signal }); controller.abort();`. Hữu ích cho cleanup khi component unmount, race. 11. **Microtask vs macrotask order** — Code mẫu: `setTimeout(() => log('macro'), 0); Promise.resolve().then(() => log('micro'));` → in `micro` trước `macro` dù timeout 0. 12. **async không có nghĩa parallel** — `async` chỉ "yield" thread khi await. CPU-bound code (vd loop tính toán) vẫn block. Muốn parallel thật sự dùng Web Worker (browser) hoặc Worker Threads (Node). ### Key concepts - Event loop là cơ chế single-threaded + non-blocking - Microtask priority cao hơn macrotask - `async function` luôn trả Promise (kể cả khi return value sync) - `await` chỉ chạy được trong `async function` (hoặc top-level trong ESM) - Promise không cancel native được, dùng AbortController ### Code examples 1. Diagram step-by-step: trace 5 dòng code có setTimeout + Promise + sync, xem từng tick event loop 2. Convert callback API (vd `fs.readFile`) thành Promise version (manually + `util.promisify`) 3. Demo sequential vs parallel: fetch 5 URL, đo thời gian 2 cách 4. Pattern retry: function gọi lại 3 lần nếu fail, exponential backoff 5. Pattern timeout: `Promise.race([fetch(url), new Promise((_, rej) => setTimeout(() => rej(new Error('timeout')), 3000))])` ### Visualizer / diagram - Sơ đồ event loop chi tiết với 4 thành phần (Stack, Web API, Macrotask, Microtask) - Animation step-by-step: trace 1 đoạn code, hiển thị stack/queue qua từng tick - Bảng `Promise.all`/`allSettled`/`race`/`any` với input/output ví dụ - Diagram Promise state machine (pending → fulfilled/rejected) ### Bài tập (5) 1. Viết function `delay(ms)` trả Promise resolve sau `ms`. Demo dùng với `await delay(1000)`. 2. Viết function `fetchWithTimeout(url, ms)` — fetch URL, nếu quá `ms` ms thì reject với error 'timeout'. 3. Viết function `parallelLimit(tasks, limit)` — chạy `tasks` (mảng function trả Promise) với concurrency tối đa `limit`. Test với 10 task, limit 3. 4. Convert đoạn callback nested 4 level sang Promise chain, rồi sang async/await. So sánh 3 phiên bản về độ đọc. 5. Trace order log của đoạn code có 3 setTimeout + 3 Promise.then xen kẽ. Vẽ event loop từng tick. ### Quiz (8) 1. `console.log(1); setTimeout(() => console.log(2), 0); Promise.resolve().then(() => console.log(3)); console.log(4);` in thứ tự nào? — `1, 4, 3, 2`. Sync (1, 4) trước, microtask (3) trước macrotask (2). 2. `async function foo() { return 1; }` — `foo()` trả gì? — `Promise<1>`. Mọi `async function` đều trả Promise, dù return primitive. 3. `try { setTimeout(() => { throw new Error('oops'); }, 0); } catch(e) {}` có bắt được error không? — Không. Callback của setTimeout chạy ở context khác, try/catch không scope tới được. Phải bắt trong callback. 4. `await Promise.all([])` trả gì? — `[]`. Empty array → resolve ngay với array rỗng. 5. `await Promise.race([])` trả gì? — Promise pending mãi mãi. Vì race chờ ít nhất 1 settle, không có thì không bao giờ settle. 6. `for await (const x of asyncIterable)` chạy được không? — Có. Async iteration cho Stream/AsyncGenerator. Sâu hơn ở Dart Chương 7 đối chiếu. 7. `async function` chạy song song chứ? — Không. `async` chỉ làm cho function "có thể await". Chỉ chạy song song khi không await tuần tự (vd dùng `Promise.all`). 8. `Promise.allSettled` ra đời để giải quyết vấn đề gì của `Promise.all`? — `Promise.all` reject sớm khi 1 cái fail (mất kết quả các cái khác đã xong). `allSettled` chờ hết, trả mảng `{status, value/reason}` để xử lý từng cái độc lập. ### Connects to - Chương 7 (Error) — error trong async chain - Chương 5 (Iterables) — async iterator (`Symbol.asyncIterator`) - Dart Chương 7 (Async, Future, Stream) — đối chiếu Promise vs Future, microtask queue - Flutter Chương 10 (Network) — fetch / Dio đều dùng Promise/Future model ### Ước lượng độ dài ~1100-1200 dòng HTML — chương nặng nhất JS, cần nhiều diagram + ví dụ. --- ## Chương 7 — Error Handling & Defensive Patterns ### Mục tiêu chương Học xong chương 7, người đọc sẽ: - Hiểu Error là Object: có `name`, `message`, `stack` - Tự tạo Error class kế thừa Error - Phân biệt try/catch sync vs async (await trong try) - Hiểu error boundary trong UI framework (intro Flutter/React) - Nắm các pattern: Result type, early return, defensive copy, fail fast - Tránh anti-pattern: swallow error, catch-all, console.log error mà không re-throw - Sử dụng `globalThis.addEventListener('error')`, `process.on('uncaughtException')` cho global error ### Lý do học Error handling tệ là gốc của crash production, log spam, và bug khó debug. Hiểu cách thiết kế error flow giúp code có "blast radius" nhỏ — 1 lỗi không sập toàn bộ app. ### Prerequisites Chương 1-6. ### Sections 1. **Error object trong JS** — Built-in: `Error`, `TypeError`, `RangeError`, `SyntaxError`, `ReferenceError`. Property `name`, `message`, `stack`. Tạo bằng `new Error('msg')` hoặc `throw 'string'` (anti-pattern: nên throw Error). 2. **try / catch / finally** — Sync: bắt error sync. `finally` chạy bất kể có throw không (hữu ích cleanup). `catch(e)` ES2019+ có thể bỏ `(e)` nếu không cần. 3. **Custom error class** — `class ValidationError extends Error { constructor(field, msg) { super(msg); this.name = 'ValidationError'; this.field = field; } }`. Pattern để phân biệt loại error trong catch. 4. **try/catch trong async** — `try { const x = await foo(); } catch(e) {}`. Khác Promise chain: `.then().catch()` chỉ catch promise hiện tại trở về trước. 5. **Anti-pattern: swallow error** — `try { ... } catch {}` (no-op). Lý do nguy hiểm: lỗi mất tăm, debug không được. Nếu thực sự muốn ignore, ít nhất log. 6. **Anti-pattern: catch all rồi log** — `catch(e) { console.log(e); }` mà không re-throw. UI vẫn render "thành công" dù backend fail. Thường phải re-throw hoặc trả error state lên trên. 7. **Pattern Result type** — Thay vì throw, trả object `{ ok: true, value }` hoặc `{ ok: false, error }`. Inspiration từ Rust. Giúp caller bắt buộc xử lý error. 8. **Pattern fail fast** — Validate input ngay đầu function, throw sớm nếu invalid. Tránh đi nửa chừng mới fail (state inconsistent). 9. **Pattern defensive copy** — Khi nhận object từ caller, clone trước khi mutate. Tránh "side effect bí ẩn" làm caller bug. 10. **Global error handler** — Browser: `window.addEventListener('error', ...)` cho sync error, `window.addEventListener('unhandledrejection', ...)` cho promise reject không catch. Node: `process.on('uncaughtException')`, `process.on('unhandledRejection')`. Last-resort logging, KHÔNG dùng để recover. 11. **Error trong UI framework** — React ErrorBoundary, Flutter ErrorWidget. Thiết kế chia "khu vực error" để 1 widget fail không sập app. 12. **Logging error đúng cách** — Không log `Error` bằng `JSON.stringify` (mất stack). Dùng `error.message + error.stack`. Sentry / log service trong production. ### Key concepts - Error là Object, không phải string — luôn `throw new Error(...)` - try/catch trong sync và trong async function (await trong try) khác Promise chain - Custom error class giúp distinguish loại lỗi và xử lý có target - Global handler là "phao cuối", không phải strategy chính - Result type là alternative pattern khi không muốn dùng exception flow ### Code examples 1. Built-in error types và khi nào throw cái nào 2. Custom error: `ValidationError`, `NetworkError`, `AuthError` — switch theo `error.name` hoặc `instanceof` 3. Pattern Result: `function safeParse(json) { try { return { ok: true, value: JSON.parse(json) }; } catch(e) { return { ok: false, error: e }; } }` 4. Demo `unhandledrejection`: `Promise.reject('oops')` không catch → trigger global handler 5. Pattern retry với error type: retry chỉ khi NetworkError, throw ngay với ValidationError ### Visualizer / diagram - Sơ đồ Error class hierarchy: Error → TypeError/RangeError/... và custom - Flow chart "khi nào dùng exception vs Result type" - Bảng anti-pattern và pattern tốt - Diagram error propagation: throw → catch theo call stack, async function dừng ở `await` ### Bài tập (5) 1. Tạo class `ApiError extends Error` có field `statusCode`, `endpoint`. Throw nó khi `fetch` trả status không 2xx. 2. Viết function `safeFetch(url)` dùng Result type: trả `{ ok: true, data }` hoặc `{ ok: false, error }`. 3. Viết wrapper `withRetry(fn, retries, shouldRetry)` — retry `fn` tối đa `retries` lần, chỉ retry nếu `shouldRetry(error)` true. Test với network call. 4. Tìm bug: function dưới swallow error gì? Fix lại. ```js async function loadUser(id) { try { return await fetch(`/users/${id}`).then(r => r.json()); } catch (e) { console.log(e); return null; } } ``` 5. Setup `window.addEventListener('error')` và `window.addEventListener('unhandledrejection')` trong HTML test page, log tất cả error sang `localStorage`. Trigger sync error + async error, kiểm tra log. ### Quiz (7) 1. `throw 'oops'` và `throw new Error('oops')` khác gì? — String throw không có stack trace, không có `.name`, `.message`. Always prefer Error instance. 2. `try { await foo(); } catch(e) {}` — bắt được error gì? — Cả error của `foo()` (Promise reject) và error sync nếu `foo` throw trước khi return promise. Cả 2 đều rơi vào catch. 3. `finally` có chạy không nếu catch re-throw? — Có. `finally` luôn chạy: sau try thành công, sau catch (kể cả catch throw), trước khi error tiếp tục propagate. 4. `catch(e)` mà không re-throw thì error còn propagate không? — Không. Caller nghĩ rằng OK. Đây là lý do swallow nguy hiểm. 5. `instanceof Error` có hoạt động cho error từ JSON parse không? — Có. `JSON.parse` throw SyntaxError, là instance của Error. 6. Khi nào throw vs return error? — Throw cho lỗi exceptional, không lường (network fail, parse fail). Return error (Result type) cho expected error flow (validation fail, user input sai) muốn caller xử lý tường minh. 7. `Promise.reject(reason)` mà không catch — chuyện gì xảy ra? — Trigger `unhandledrejection` event. Node 15+ default crash process. Production phải có global handler. ### Connects to - Chương 6 (Async) — error trong Promise chain - Chương 9 (TS) — typed error qua discriminated union - Flutter Chương 6/10 — Error widget, exception handling trong Dio - Dart Chương 5 — try/catch Future trong Dart ### Ước lượng độ dài ~750-850 dòng HTML. --- ## Chương 8 — Modules, Bundlers & Runtime ### Mục tiêu chương Học xong chương 8, người đọc sẽ: - Phân biệt CommonJS (`require`/`module.exports`) và ESM (`import`/`export`) - Hiểu vì sao có 2 module system, Node hỗ trợ cả 2, browser chỉ ESM - Viết module ESM: named export, default export, re-export, dynamic import - Hiểu tree-shaking — vì sao ESM cho phép, CommonJS thì không - Biết bundler là gì: Vite, esbuild, Webpack, Rollup — khác nhau cơ bản - Hiểu `package.json` field `main`, `module`, `exports`, `type` - Setup project tối thiểu với Vite (Browser) và Node.js (ESM) ### Lý do học Module system là cách JS scale từ vài file lên hàng ngàn file. Confusion giữa CJS và ESM là nguồn của lỗi "cannot use import statement outside module" rất phổ biến. Hiểu bundler giúp debug build issue, optimize size. ### Prerequisites Chương 1-7. ### Sections 1. **Lịch sử module trong JS** — Pre-ES6: không có. Workaround: IIFE, AMD, UMD, CommonJS (Node). ES6 (2015) standard hoá ESM. Browser native ESM từ 2017. 2. **CommonJS — module system của Node (cũ)** — `const x = require('./mod')`, `module.exports = ...`. Synchronous, dynamic (require trong if/loop được). File `.js` default là CJS trừ khi `package.json` có `"type": "module"`. 3. **ESM — ECMAScript Modules** — `import x from './mod.js'`, `export const x = 1`. Static (import top-level), async load (browser), tree-shakeable. File `.mjs` luôn ESM, hoặc `.js` với `"type": "module"`. 4. **Named export vs default export** — Named: `export const foo; import { foo } from`. Default: `export default class Foo; import Foo from`. Có thể mix. Trade-off: default tự do rename khi import (dễ inconsistency), named ổn định hơn. 5. **Re-export — barrel file** — `export * from './a'; export { foo } from './b'`. Pattern barrel: file `index.ts` re-export hết. Pro: import gọn. Con: tree-shaking khó hơn, có thể tăng bundle size. 6. **Dynamic import** — `const mod = await import('./mod.js')`. Async, trả Promise. Dùng cho code-split (chỉ load khi cần), conditional load (env khác nhau). 7. **Tree-shaking** — Bundler phân tích static import, xoá code không dùng. Chỉ work với ESM static (CJS dynamic không phân tích được). Side effect (top-level code) chặn tree-shake → `"sideEffects": false` trong package.json. 8. **Bundler — concept** — Input nhiều file → output ít file (bundle). Resolve module graph, transform (TS/JSX), minify, split chunk, source map. 9. **Bundler — landscape** — esbuild (cực nhanh, Go), Vite (esbuild dev + Rollup prod, recommended), Webpack (cũ, mature, plugin nhiều), Rollup (library), Parcel (zero config), tsup (TS library). Khi nào dùng cái nào. 10. **package.json — fields cho module** — `"main"` (CJS entry cũ), `"module"` (ESM entry, không chuẩn nhưng widely supported), `"exports"` (chuẩn mới, conditional export theo runtime/environment), `"type"`. 11. **Setup tối thiểu — Node ESM** — `package.json` có `"type": "module"`, file `.js` dùng `import`. Lưu ý: phải có extension `.js` trong import path. 12. **Setup tối thiểu — Browser với Vite** — `npm create vite@latest my-app`, chọn template Vanilla JS, `npm run dev`. Hot reload, ESM native. ### Key concepts - ESM là tương lai, CJS là di sản; nhưng hệ Node mature trên CJS nên còn lâu mới hết - Browser CHỈ hỗ trợ ESM (không native CJS) — đó là lý do cần bundler để dùng package npm - Tree-shaking là feature của bundler, chỉ work với ESM static - `"type": "module"` trong `package.json` flip toàn folder sang ESM - Vite là default tốt cho dự án mới — nhanh, ít config ### Code examples 1. Demo CJS: 2 file, `math.js` export `add`, `app.js` require + dùng 2. Demo ESM: 2 file, syntax import/export, kèm `"type": "module"` 3. Demo named vs default export — viết module với cả 2 4. Demo dynamic import: load module khi click button (browser) hoặc khi env biến set (Node) 5. `package.json` đầy đủ với `exports` conditional cho ESM/CJS/types ### Visualizer / diagram - Bảng so sánh CJS vs ESM: syntax, timing, dynamic, tree-shake, browser - Sơ đồ bundler: input files → resolve graph → transform → bundle output - Bảng bundler landscape với strengths - Diagram tree-shaking: import chỉ dùng 1 function, bundler xoá phần còn lại ### Bài tập (5) 1. Tạo 3 file: `math.js` export `add`/`subtract`, `string.js` export `capitalize`, `index.js` re-export hết. File `main.js` import từ `index.js` chỉ dùng `add`. Build với esbuild xem bundle có chứa `subtract`/`capitalize` không (tree-shake). 2. Convert một module CJS (do bạn viết) sang ESM. Lưu ý các điểm: thêm `.js` extension, đổi require/module.exports, set `"type": "module"`. 3. Setup project Vite mới, viết SPA đơn giản (1 button, click thì gọi `import('./greeting.js')`, log greeting). Kiểm tra Network tab: file `greeting.js` chỉ load sau khi click. 4. Đọc `package.json` của 3 npm package (vd: `lodash-es`, `axios`, `react`). Note `"main"`, `"module"`, `"exports"`, `"type"`. Giải thích sao mỗi package config khác nhau. 5. Tự build mini bundler bằng esbuild: input `src/index.js` (có import nhiều file), output `dist/bundle.js`. Chỉ dùng esbuild API, không Webpack. ### Quiz (7) 1. Trong Node, file `.js` mặc định là CJS hay ESM? — CJS, trừ khi `package.json` gần nhất có `"type": "module"`. 2. Browser native dùng module hệ nào? — ESM. Phải gắn `