5 Khái Niệm Javascript Cần Biết Cho Mọi Lập Trình Viên Web

Trong lĩnh vực lập trình web, Javascript là ngôn ngữ không thể thiếu. Để từ một người mới bắt đầu trở thành lập trình viên chuyên nghiệp, bạn chỉ cần nắm vững 5 khái niệm cốt lõi. Bài viết dưới đây sẽ giới thiệu chi tiết về những kiến thức này, phù hợp cho mọi trình độ, từ người mới đến lập trình viên giàu kinh nghiệm.

1. Call Stack

Call Stack (Ngăn xếp gọi hàm) là cấu trúc dữ liệu quan trọng mà Javascript sử dụng để theo dõi quá trình thực thi của chương trình. Khi một hàm được gọi, một mục (hay còn gọi là 'stack frame') sẽ được thêm vào call stack. Khi hàm hoàn thành, mục này sẽ được loại bỏ, và quyền điều khiển sẽ trở lại hàm trước đó trong stack.

Các điểm chính về Call Stack:

• Nguyên tắc LIFO (Vào sau, ra trước): Hàm được gọi gần đây nhất sẽ được thực thi trước.
• Theo dõi các lệnh gọi hàm: Điều này được sử dụng trong các công cụ gỡ lỗi để xác định thứ tự các lệnh gọi dẫn đến lỗi.
• Đảm bảo không tràn ngăn xếp: Nếu có quá nhiều lệnh gọi hàm mà không được trả về, sẽ xảy ra lỗi tràn stack.

2. Execution Context

Execution Context (Bối cảnh thực thi) xác định môi trường mà mã Javascript được chạy. Nó chứa các thông tin như định nghĩa biến, từ khóa 'this' và tham chiếu hàm.

Các loại bối cảnh thực thi:

• Bối cảnh thực thi toàn cục: Tạo ra khi tập lệnh bắt đầu và chứa các biến và hàm toàn cục.
• Bối cảnh thực thi hàm: Tạo ra mỗi khi một hàm được gọi, với bối cảnh riêng cho từng lệnh gọi.
• Bối cảnh thực thi Eval: Tạo ra khi mã được thực thi bên trong hàm eval().

3. Toán Tử typeof và So Sánh Lỏng Lẻo (==) vs Nghiêm Nhặt (===)

Mặc dù typeof, ==, và === nghe có vẻ đơn giản, nhưng để sử dụng hiệu quả, bạn cần biết rõ về chúng.

Toán tử typeof:

• Trả về kiểu dữ liệu của biến. Kết quả luôn trả về một chuỗi như "number", "string", "boolean", "object", "function", hoặc "undefined".

Ví dụ:

typeof 42; // "number"
typeof "Hello"; // "string"
typeof {}; // "object"

Toán tử so sánh lỏng lẻo (==):

• Kiểm tra xem hai giá trị có lỏng lẻo bằng nhau hay không, thực hiện ép kiểu nếu cần.

Ví dụ:

42 == "42"; // true
null == undefined; // true
0 == false; // true

Toán tử so sánh nghiêm ngặt (===):

• Kiểm tra xem hai giá trị có bằng nhau không mà không thực hiện ép kiểu.

Ví dụ:

42 === "42"; // false
null === undefined; // false
0 === false; // false

Khi nào nên sử dụng?:

• Sử dụng typeof để kiểm tra kiểu.
• Sử dụng === để so sánh chính xác.
• Tránh == trừ khi bạn tự tin về kết quả ép kiểu.

4. Hàm Thuần Khiết Và Hàm Không Thuần Khiết

Hàm thuần khiết (pure function) là hàm không có tác dụng phụ và luôn trả về cùng một giá trị cho cùng một input. Ngược lại, hàm không thuần khiết (impure function) có thể ảnh hưởng đến trạng thái bên ngoài.

Ví dụ về hàm thuần khiết:

function add(a, b) {
  return a + b;
}

Ví dụ về hàm không thuần khiết:

let counter = 0;
function increment() {
  counter++;
}

Lợi ích của hàm thuần khiết:

• Dễ dàng kiểm tra và gỡ lỗi.
• Có khả năng dự đoán cao, không có tác dụng phụ.
• Dễ dàng tái sử dụng trong nhiều ngữ cảnh khác nhau.

5. Lan Truyền Sự Kiện (Event Propagation)

Lan truyền sự kiện diễn ra khi một sự kiện được kích hoạt trong DOM. Trong Javascript, sự kiện có thể nổi lên hoặc được bắt lại ở mỗi cấp.

Một số điều cần lưu ý về lan truyền sự kiện:

• Sử dụng ủy quyền sự kiện để quản lý nhiều sự kiện con với một trình lắng nghe cha duy nhất.
• Dừng lan truyền với event.stopPropagation() và event.stopImmediatePropagation() để kiểm soát sự kiện chính xác hơn.

Kết luận

Hiểu rõ 5 khái niệm này sẽ giúp bạn có nền tảng vững chắc trong lập trình Javascript. Việc nắm được những kiến thức này không chỉ hữu ích trong việc phát triển, mà còn trong việc gỡ lỗi và tối ưu hóa mã nguồn. Cảm ơn bạn đã theo dõi bài viết!

source: viblo