JavaScript Programming Series: Roadmap & Curriculum
Lộ trình Tự học lập trình JavaScript cốt lõi từ con số 0
This JavaScript programming guide is currently only available in Vietnamese. Please toggle the language switch (🇻🇳) in the top navigation to read the roadmap.
Welcome to our JavaScript self-study series. This course is designed to guide you through core JavaScript engine details (Call Stack, Scope, Closures), ES6 Classes, Functional programming patterns, Iterators/Generators, Metaprogramming (Proxies), Asynchronous flows, and Reactive Programming.
Chào mừng bạn đến với chuỗi bài học tự học lập trình JavaScript cốt lõi (Core JavaScript) theo chuẩn hiện đại. JavaScript là một trong những ngôn ngữ lập trình phổ biến nhất thế giới, kích hoạt sức mạnh tương tác cho hàng tỷ trang web. Hiểu sâu về cách JavaScript hoạt động dưới nắp máy (under the hood) sẽ giúp bạn viết mã nguồn tối ưu hiệu năng, dễ bảo trì, và nâng tầm kỹ năng lập trình web.
Dưới đây là lộ trình 12 bài học được thiết kế chi tiết từ nền tảng đến chuyên sâu — mỗi bài đều có giải thích kỹ lưỡng, ví dụ cụ thể và playground tương tác để bạn thực hành ngay trong trình duyệt:
Bài 1: Nền Tảng JavaScript — Kiểu Dữ Liệu, Ép Kiểu & So Sánh
7 kiểu nguyên thủy, chuẩn IEEE 754 & cạm bẫy số học, ép kiểu tường minh/ngầm định (ToNumber, ToString, ToPrimitive), Abstract Equality Algorithm của == vs ===, 8 giá trị falsy và autoboxing. Đây là nền tảng bắt buộc trước khi học bất kỳ chủ đề nào khác.
Bài 2: JavaScript Hiện Đại — Destructuring, Spread & Optional Chaining
Làm chủ cú pháp ES2015–ES2023: let/const & Block Scope, template literals, destructuring (object & array), rest/spread operator, arrow functions, optional chaining (?.), nullish coalescing (??) và logical assignment. Mã ngắn hơn, an toàn hơn, dễ đọc hơn.
Bài 3: Cách JavaScript Hoạt Động — JS Engine, Execution Context & Closures
Cấu trúc V8 Engine (Parser → AST → Ignition Bytecode → TurboFan JIT). Hidden Classes, Inline Cache. Vòng đời Execution Context (Creation Phase / Execution Phase), Hoisting, Temporal Dead Zone, Scope Chain và bộ nhớ Heap của Closures. Kèm playground tương tác.
Bài 4: Hướng Đối Tượng trong JS — Prototype Chain, Class ES6 & this Binding
Chuỗi Prototype ([[Prototype]], Object.create), 4 quy tắc ràng buộc this (Default/Implicit/Explicit/New). Class ES6: private fields (#), getter/setter, static, Symbol.hasInstance. instanceof dưới hood, Mixin pattern, Object.freeze vs const.
Bài 5: Functional Programming — Pure Functions, Currying & Compose
Triết lý lập trình hàm: Pure Function, Immutability, Side Effect. Currying & Partial Application thực tế. Memoization tối ưu fibonacci. Pipe/Compose pipeline. map/filter/reduce chaining. V8 Elements Kinds và tác động hiệu năng của Holey Arrays.
Bài 6: Xử Lý Lỗi & Gỡ Rối JavaScript
try/catch/finally chuyên sâu, optional catch binding (ES2019), các lỗi Built-in (TypeError, RangeError, ReferenceError). Tạo Custom Error class. Xử lý lỗi async với Promise.catch và async/await. Result pattern, retry/backoff, gỡ lỗi với Chrome DevTools.
Bài 7: Làm Chủ Biểu Thức Chính Quy (Regex) trong JavaScript
Regex từ zero: literal vs constructor, character classes, quantifiers, anchors, groups, named groups, lookahead/lookbehind, flags (g/i/m/s/u). Tất cả String methods tích hợp Regex. Kèm live Regex Tester tương tác để kiểm nghiệm ngay trong trình duyệt.
Bài 8: Iterators, Generators & Bất Đồng Bộ — Promises & Async/Await
Iterable Protocol (Symbol.iterator), xây dựng Custom Iterator từ đầu. Generator functions (function*, yield) và lazy sequences. Event Loop architecture, Microtask (drain-all) vs Macrotask (1-per-tick). Promise states, Async Generators và for await...of.
Bài 9: Metaprogramming — Symbol, Proxy & Reflect API
Symbol: unique keys, well-known Symbols (Symbol.iterator, Symbol.toPrimitive, Symbol.toStringTag). Proxy traps (get, set, has, deleteProperty): input validation, schema enforcement, private key hiding. Reflect API: receiver-correct delegation. Phân tích hiệu năng Proxy trong V8.
Bài 10: Hệ Thống Module — ESM vs CommonJS & Tree Shaking
Module Scope Isolation, Dependency Graph. ESM 3-phase loading (Construction → Instantiation → Evaluation), Live Bindings vs Copy-on-require của CJS. Named/Default/Dynamic import(). Tree Shaking với sideEffects package.json. Circular dependency detection.
Bài 11: DOM Events & Lập Trình Phản Ứng — Reactive State Store
3 pha propagation (Capturing → Target → Bubbling), stopPropagation vs stopImmediatePropagation. Event Delegation tối ưu bộ nhớ. Debounce & Throttle từ nguyên lý. Tự xây dựng ReactiveStore dùng Proxy + Observer pattern — nền tảng của Vue/MobX.
Bài 12: Trình Mô Phỏng Event Loop — Trực Quan Hóa Tương Tác
Sử dụng công cụ mô phỏng tương tác để xem từng bước chạy của Call Stack, Web APIs, Microtask Queue và Macrotask Queue. 3 kịch bản: Promise vs setTimeout, nested Microtask chains, Async/Await sequential flow. Hiểu sâu frozen UI và Microtask starvation.