IIFEs (Immediately Invoked Function Expressions) là một mẫu trong JavaScript, trong đó một hàm được định nghĩa và gọi ngay lập tức sau khi được tạo ra. Điều này cho phép bạn tạo ra một phạm vi cục bộ để tránh làm ô nhiễm không gian tên toàn cục, bảo vệ các biến và hàm của bạn khỏi các đoạn mã khác.
Một IIFE có cấu trúc cơ bản là một function expression được bao bọc trong cặp dấu ngoặc đơn, theo sau là một cặp dấu ngoặc đơn khác để thực thi ngay lập tức hàm đó.
(function() {
// Code bên trong IIFE
})();
(function() { ... }) là một function expression, nó bao bọc định nghĩa hàm trong cặp dấu ngoặc đơn.() gọi hàm ngay lập tức sau khi hàm được định nghĩa.
(function() {
console.log('This is an IIFE!');
})();
Kết quả là:
This is an IIFE!
Trong ví dụ này, hàm được định nghĩa và ngay lập tức được thực thi mà không cần gọi lại ở bất kỳ đâu trong mã. Điều này làm cho nó trở thành một lựa chọn hữu ích trong nhiều tình huống.
Tránh làm ô nhiễm không gian tên toàn cục: Trong JavaScript, nếu bạn không cẩn thận với cách bạn khai báo biến, chúng có thể làm ô nhiễm phạm vi toàn cục (global scope). IIFE giúp bạn bọc mã của mình vào một phạm vi cục bộ, ngăn các biến hoặc hàm bị lộ ra ngoài phạm vi đó.
(function() {
var a = 10;
console.log(a); // 10
})();
console.log(a); // Lỗi: a is not defined
Ở đây, biến a chỉ tồn tại bên trong IIFE và không thể truy cập từ bên ngoài.
Tạo ra phạm vi cục bộ (Local Scope): Trong JavaScript, mỗi hàm tạo ra một phạm vi cục bộ cho các biến. IIFE cho phép bạn tạo ra phạm vi này mà không cần phải gọi hàm từ bên ngoài. Điều này đặc biệt hữu ích trong môi trường toàn cục, chẳng hạn như khi làm việc với các thư viện lớn.
Bảo vệ mã: IIFE có thể giúp bảo vệ các biến cục bộ khỏi sự thay đổi không mong muốn hoặc xung đột với các đoạn mã khác.
Giữ nguyên các giá trị ban đầu: IIFE có thể giúp lưu trữ giá trị ngay tại thời điểm thực thi, điều này rất hữu ích trong các vòng lặp hoặc với các biến thay đổi.
Ví dụ với vòng lặp:
for (var i = 0; i < 5; i++) {
(function(i) {
setTimeout(function() {
console.log(i);
}, 1000);
})(i);
}
Kết quả sẽ là:
0
1
2
3
4
Ở đây, IIFE tạo ra một phạm vi riêng biệt cho mỗi giá trị của i, tránh hiện tượng tất cả các setTimeout đều in ra giá trị cuối cùng của i (là 5).
IIFE có thể nhận tham số giống như bất kỳ hàm nào khác.
(function(name) {
console.log('Hello ' + name);
})('Alice');
Kết quả là:
IIFE mũi tên (Arrow IIFE): Từ ES6, bạn có thể sử dụng hàm mũi tên cho IIFE.
(() => {
console.log('This is an arrow IIFE!');
})();
IIFE với giá trị trả về: IIFE có thể trả về giá trị giống như các hàm thông thường.
const result = (function() { return 5 + 3;})();console.log(result); // 8
IIFEs là một công cụ mạnh mẽ trong JavaScript, giúp bạn tạo ra phạm vi cục bộ, bảo vệ mã khỏi làm ô nhiễm không gian tên toàn cục và xử lý các tình huống yêu cầu thực thi mã ngay lập tức. Điều này đặc biệt hữu ích trong các ứng dụng lớn hoặc khi bạn muốn tránh xung đột biến với mã khác.
