Bản chất JavaScript dành cho Fullstack: Event Loop, Scope và Bất đồng bộ

JavaScript đã vươn lên trở thành ngôn ngữ thống trị hệ sinh thái phát triển phần mềm hiện đại, từ giao diện trình duyệt cho đến máy chủ Node.js. Đối với một lập trình viên Fullstack, việc chỉ biết sử dụng cú pháp là chưa đủ; bạn buộc phải hiểu rõ bản chất cách JavaScript vận hành dưới tầng hệ thống để xây dựng những ứng dụng có hiệu năng cao, không bị nghẽn cổ chai.

1. Mô hình thực thi và Event Loop

JavaScript là ngôn ngữ đơn luồng (single-threaded), nghĩa là nó chỉ thực hiện một tác vụ tại một thời điểm trên một luồng chính (Call Stack). Tuy nhiên, các ứng dụng hiện đại thường xuyên phải xử lý các tác vụ I/O nặng như gọi API, đọc ghi file, hoặc truy vấn cơ sở dữ liệu mà không thể làm đơ giao diện hay dừng máy chủ.

Call Stack, Web APIs và Callback Queue

Khi mã nguồn JavaScript chạy, các hàm được đẩy vào Call Stack theo cơ chế LIFO (Last In, First Out). Khi gặp các tác vụ bất đồng bộ như setTimeout hay fetch, JavaScript đẩy chúng sang môi trường thực thi của trình duyệt hoặc Node.js (gọi chung là Web APIs hoặc background threads).

Khi tác vụ hoàn thành, callback tương ứng sẽ được đưa vào hàng đợi:

• Macrotask Queue (Callback Queue): Chứa các callback từ setTimeout, setInterval, I/O operations.
• Microtask Queue: Chứa các callback từ Promise.then(), queueMicrotask, và MutationObserver.

Cơ chế ưu tiên của Event Loop

Event Loop liên tục kiểm tra xem Call Stack có trống hay không. Nếu trống, nó sẽ ưu tiên xử lý toàn bộ các tác vụ trong Microtask Queue trước, cho đến khi sạch bóng, sau đó mới chuyển sang xử lý một tác vụ duy nhất trong Macrotask Queue.

console.log('1: Start');

setTimeout(() => {
  console.log('2: Macrotask (setTimeout)');
}, 0);

Promise.resolve().then(() => {
  console.log('3: Microtask (Promise)');
});

console.log('4: End');

Thứ tự in ra màn hình sẽ là: 1, 4, 3, 2. Hiểu rõ điều này giúp bạn dự đoán chính xác luồng chạy của ứng dụng, tránh các lỗi logic khó phát hiện.

2. Scope, Execution Context và Closure

Quá trình biên dịch và thực thi mã trong JavaScript đi kèm với khái niệm Execution Context (Ngữ cảnh thực thi) và Scope Chain (Chuỗi phạm vi).

Lexical Scope và Closure

Closure là hiện tượng một hàm nhớ và truy cập được vào phạm vi (lexical scope) của nó ngay cả khi hàm đó được thực thi bên ngoài phạm vi ban đầu. Trong lập trình Fullstack, closure cực kỳ hữu ích cho việc đóng gói dữ liệu (Encapsulation) và tạo các biến private.

function createCounter() {
  let count = 0;
  return {
    increment: function() {
      count++;
      return count;
    },
    getCount: function() {
      return count;
    }
  };
}

const counter = createCounter();
console.log(counter.increment()); // 1
console.log(counter.increment()); // 2
// Biến count hoàn toàn an toàn và không bị truy cập trực tiếp từ bên ngoài

3. Xử lý bất đồng bộ thực tế: Callback Hell đến Async/Await

Sự tiến hóa của JavaScript trong việc xử lý bất đồng bộ đã trải qua ba giai đoạn lớn:

1. Callback: Gây ra hiện tượng Callback Hell (Code hình kim tự tháp), khó bắt lỗi (try/catch không hoạt động qua các callback bất đồng bộ).
2. Promise: Giúp phẳng hóa code, dễ dàng quản lý chuỗi tác vụ thông qua .then() và .catch().
3. Async/Await: Cú pháp tổng hợp dựa trên Promise, giúp viết code bất đồng bộ trông giống như mã đồng bộ tuyến tính.

Lưu ý quan trọng cho Fullstack: Khi dùng await trong một vòng lặp Array.forEach, JavaScript sẽ không đợi các Promise hoàn thành theo ý muốn vì forEach không hỗ trợ async. Hãy sử dụng vòng lặp for...of truyền thống hoặc Promise.all() khi cần xử lý song song.

4. Best Practices cho Lập trình viên Fullstack

• Tránh chặn Event Loop: Không thực hiện các thuật toán tính toán nặng (như mã hóa phức tạp, xử lý mảng lớn hàng triệu phần tử) trên luồng chính của Node.js. Hãy tách chúng sang Worker Threads.
• Quản lý Memory Leak: Đảm bảo hủy đăng ký sự kiện (event listeners), xóa các bộ hẹn giờ (timers) và giải phóng tham chiếu không cần thiết trong các ứng dụng Single Page Application (SPA) hoặc closures kéo dài trên server.
• Xử lý lỗi toàn diện: Luôn bọc các khối async/await trong try/catch và xử lý lỗi ở tầng Global (như unhandledRejection trong Node.js) để tránh sập ứng dụng.

5. Câu hỏi thường gặp (FAQ)

Tại sao Node.js được coi là bất đồng bộ nhưng vẫn có thể bị nghẽn?

Node.js xử lý các tác vụ I/O một cách bất đồng bộ thông qua libuv và hệ thống luồng ngầm. Tuy nhiên, nếu bạn thực hiện một vòng lặp tính toán CPU nặng (CPU-bound) trên luồng chính, luồng này sẽ bị chiếm dụng hoàn toàn và không thể xử lý các request khác, gây ra hiện tượng nghẽn.

Sự khác biệt cốt lõi giữa var, let và const là gì?

var có phạm vi hoạt động theo hàm (function scope) và bị hoisting với giá trị undefined. let và const có phạm vi theo khối (block scope), không cho phép truy cập trước khi khai báo (TDZ - Temporal Dead Zone). const bắt buộc phải gán giá trị khởi tạo và không cho phép gán lại tham chiếu biến.