Cạm bẫy IIFE trong JavaScript

Hãy cùng xem xét hai đoạn mã.

Đoạn thứ nhất:

let result = 1
+function() {
	return 2;
}();

console.log(result);

Đoạn thứ hai:

let result = 1;
+function() {
	return 2;
}();

console.log(result);

Hai đoạn mã này gần như giống hệt nhau, nhưng nếu chạy chúng - kết quả sẽ khác nhau. Đoạn mã đầu tiên sẽ in ra console số 3, còn đoạn thứ hai - số 1.

Tại sao lại có sự khác biệt như vậy: tất cả là do trong một trường hợp, ở cuối dòng đầu tiên của mã không có dấu chấm phẩy, còn trong trường hợp kia - thì có.

Bạn có thể hỏi: làm sao có thể như vậy, dù trong JavaScript dấu chấm phẩy ở cuối câu lệnh không phải là bắt buộc! Thực ra điều này không hoàn toàn đúng. Hãy cùng tìm hiểu xem thực sự điều gì đang xảy ra.

Đoạn mã đầu tiên có thể được viết lại như sau:

let result = 1 + function() {
	return 2;
}();

console.log(result); // sẽ in ra 3

Bây giờ ngay lập tức trở nên rõ ràng rằng vào số một cộng thêm kết quả của việc gọi hàm ngay lập tức, tức là 2. Do đó kết quả cuối cùng sẽ là 3.

Nếu đặt dấu chấm phẩy sau số một, thì mã sẽ được trình thông dịch hiểu theo cách khác:

// Câu lệnh đầu tiên:
let result = 1;

// Câu lệnh thứ hai:
+function() {
	return 2;
}();

// Câu lệnh thứ ba:
console.log(result); // sẽ in ra 1

Tức là phép gán vào biến và việc gọi hàm ngay lập tức sẽ trở thành các câu lệnh khác nhau. Và tất cả là do sự có mặt của dấu chấm phẩy!

Hóa ra, trong trường hợp này việc gọi hàm ngay lập tức về cơ bản không làm gì cả - chỉ đơn giản trả về số 2 vào khoảng không, số này không ảnh hưởng gì đến biến result.

Vậy thì hãy cùng tìm hiểu, tại sao chúng ta về cơ bản có thể không viết dấu chấm phẩy trong JavaScript. Giả sử chúng ta có đoạn mã không có dấu chấm phẩy như sau:

let result = 1 // vào result sẽ được ghi 1
let test = 2   // vào test sẽ được ghi 2

Nó hoạt động chính xác, vì trình thông dịch tự động đặt dấu chấm phẩy ở cuối mỗi dòng.

Nhưng hãy xem đoạn mã này:

let result = 1
+ 2; // vào result sẽ được ghi 3

Bây giờ dấu chấm phẩy ở cuối dòng đầu tiên sẽ không được đặt tự động, vì trình thông dịch hiểu rằng câu lệnh của dòng thứ hai - đó là một phần của câu lệnh dòng đầu tiên.

Nhưng nếu chúng ta tự đặt dấu chấm phẩy - kết quả sẽ hoàn toàn khác:

let result = 1; // vào result sẽ được ghi 1
+ 2; // câu lệnh không làm gì cả, nhưng cũng không có lỗi

Hóa ra, trình thông dịch tự đặt dấu chấm phẩy, chỉ khi câu lệnh tiếp theo không phải là một phần của câu lệnh trước đó.

Và bây giờ hãy xem đoạn mã này:

let result = 1
+function() {
	return 2;
}();

console.log(result);

Quả thật, dòng thứ hai - chỉ đơn giản là sự tiếp nối của câu lệnh dòng đầu tiên và trình thông dịch không đặt dấu chấm phẩy tự động. Chính vì vậy, nếu chúng ta tự viết dấu chấm phẩy ở cuối dòng đầu tiên - kết quả sẽ hoàn toàn khác. Điều này nói lên rằng tốt nhất là luôn luôn đặt dấu chấm phẩy ở những vị trí cần thiết, để tránh các vấn đề.