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:
Trước khi bắt đầu
Cần biết trước. Biết viết một trang HTML đơn giản và đã từng gõ vài dòng JavaScript —
biến, if, vòng lặp, gọi hàm. Không cần biết framework nào, không cần Node.js: mọi thứ chạy
thẳng trong trình duyệt.
Series này không dạy. Đây là series về ngôn ngữ JavaScript, không phải về React, Vue hay Node.js. Series cũng không dạy CSS, dàn trang, hay thiết kế giao diện — phần đó nằm ở series CSS & Animation riêng.
Học xong bạn làm được gì. Đọc được mã nguồn thư viện mà không hoảng; biết vì sao
this đổi giá trị và khi nào closure giữ bộ nhớ lại; giải thích được thứ tự chạy của
await so với .then() mà không phải đoán; và tự viết được một reactive store
nhỏ bằng Proxy — đúng cơ chế mà các framework hiện đại dùng bên trong.
Vì sao thứ tự này. Thứ tự 12 bài không tuỳ tiện: bài 1–2 làm sạch những chỗ JavaScript hay gây bất ngờ, bài 3 mở nắp máy ra xem engine chạy thế nào, rồi bài 4–5 mới bàn tới hai phong cách lập trình dựa trên nền đó. Bài 8 (bất đồng bộ) đặt sau bài 3 là có lý do — không hiểu execution context thì event loop chỉ là một sơ đồ phải học thuộc.
12 bài · 27 câu trắc nghiệm có phản hồi giải thích · 11 file mã nguồn tải về · trình mô phỏng Event Loop tương tác
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.