IIFE là gì?

Anh NguyễnBạn nghĩ gì về bài viết này?

IIFE là viết tắt của Immediately Invoked Function Expression, có nghĩa là khởi tạo một function và thực thi nó ngay lập tức.
Cú pháp của IIFE là:

(function(){
 //code here
})();

Ta có thể truyền tham số cho IIFE như sau:

(function(window, name){
 //code here
})(window, name);

Vậy tại sao lại dùng IIFE? Bởi vì IIFE như là một các hộp đóng gói code của chính nó. Do đó, những biến trong hộp này là private, bên ngoài(global) không thể truy xuất hay thay đổi được. Và nếu vô tình bạn đặt tên biến giống với global thì cũng không bị ảnh hưởng bên ngoài. Xem ví dụ sau nhé:

var greeting = 'Hola';
var name = 'Thau';

(function(window, name){
 //code here
 var greeting = 'Hello';
 console.log(greeting + ' ' + name)
})(window, name);

Bạn có thể thấy rằng ta có hai biến greeting. Một là toàn cục, một trong IIFE. Hai biến này nằm ở hai context và bộ nhớ khác nhau, nên khi ta thay đổi biến greeting trong IIFE không làm ảnh hưởng greeting ở ngoài và ngược lại.

Có một điều lưu ý là khi tạo thư viện bằng khối IIFE thì bạn nên sử dụng ‘use strict’ để tránh được một số lỗi về type, scope trong js. Nếu như ví dụ trên nếu không có strict mode như sau:

var greeting = 'Hola'; 
var name = 'Thau'; 
(function(window, name){ //code here 
   greeting = 'Hello';       
   console.log(greeting + ' ' + name) 
})(window, name);

Biến greeting ở đây vô tình là global và sẽ thay đổi luôn giá trị của biến bên ngoài. Cho nên để hạn chế điều này bạn có thể sử dụng strict mode.

(function(window, name){ //code here 
  'use strict';
  greeting = 'Hello'; 
  console.log(greeting + ' ' + name) 
})(window, name);
Ở đoạn code này JS sẽ throw error vì bạn đang cố truy cập một biến gobal trong IIFE

Cùng xem một ví dụ khác:

for(var i = 0; i < 10; i++){
 setTimeout(function(){
  console.log(i);//biến i ở đây là biến i của for
 });
}

setTimeout sẽ chạy khi vòng for chạy xong, do đó i = 10;

for(var i = 0; i < 10; i++){
 (function(i){//IIFE tạo ra một scope khác cho từng i, nên giá trị của i là khác nhau
  setTimeout(function(){
   console.log(i);
  });
 })(i);//biến i ở đây được tạo riêng cho từng IIFE 
}

Mỗi vòng lặp IIFE tạo một scope mới cho i, nên i ở đây là khác nhau.

Tóm lại, IIFE hữu ích khi chúng ta muốn đóng gói code để nó không ảnh hưởng đến các biến toàn cục. Nó hữu ích khi chúng ta viết những thư viện. Sau đó, chúng ta nhúng vào những trang web khác nhau thì cũng không ảnh hưởng đến code của chúng ta.

Cảm ơn bạn đã theo dõi bài viết!

Các bạn có thể tham khảo các bài viết hay về JavaScript tại đây.

Hãy tham gia nhóm Học lập trình để thảo luận thêm về các vấn đề cùng quan tâm.

TỔNG HỢP TÀI LIỆU HỌC LẬP TRÌNH CƠ BẢN CHO NGƯỜI MỚI BẮT ĐẦU

KHOÁ HỌC BOOTCAMP JAVA/PHP/.NET TRỞ THÀNH LẬP TRÌNH VIÊN TRONG 5-6 THÁNG

Bình luận