IIFE in JS

Nếu các bạn có cơ hội đọc những code rất cũ hoặc đã từng maintain dự án dùng JS thuần thì chắc có lẽ đã gặp IIFE (Immediately Invoked Function Expression) và đã chắc đã có lần đặt câu hỏi tại sao lại dùng nó, nó được dùng với tác dụng gì??? Trong phần này chúng ta sẽ cùng tìm hiểu IIFE nhé.

Tuần vừa rồi mình vướng một số chuyện lên không có time viết bài, nhưng thật ra là mình lười ^^, về quê thì toàn chơi thôi - thế cho nhẹ đầu. Nhưng từ tuần này mình lại ra bài đều nhé, cập nhật tình hình thời tiết là hôm nay nóng lắm 38 - 40 độ, không có điều hòa chắc không sống được mất.

1. Mở đầu

IIFE là viết tắt của Immediately Invoked Function Expression, nó là một dạng viết Function trong JS và nó sẽ được chạy ngay sau khi nó được khởi tạo.

Dạng function này có rất nhiều lợi ích như: Sẽ làm block các biến global, đỡ tốn bộ nhớ (Vì khởi tạo cái là chạy luôn, sau đó sẽ được clean khỏi memory), sẽ không cần khởi tạo Function global tránh polluted (Ô nhiễm) Global namespace.

2. Chi tiết

Syntax

Trước khi nói đến IIFE chúng ta hãy xem một function bình thường được định nghĩa và được exucute như thế nào nhé.

function func() {
    // Do something
}

func();

Và như vậy khi chúng ta khai báo function đồng thời lại vô tình gắn nó vào memory sau đó gọi lại, nó sẽ là rất hay nếu như chúng ta gọi lại hàm này và coi nó như một hàm Common, gọi đi gọi lại nhiều lần. Khi đó cách khai báo function như trên là rất hợp lý, tuy nhiên hãy giả sử trường hợp là chúng ta chỉ cần gọi hàm đó 1 lần và ngay sau khi mà window được load xong chẳng hạn thì sẽ cần bỏ hàm đó vào trong $(document).ready() hoặc window.onload trong hợp như này thì nên dùng IIFE để memory được nhẹ, cùng như window object tránh ô nhiễm. Tại sao mình lại nói đến 2 vấn đề này thì các bạn hãy theo dõi tiếp nhé.

Còn bây giờ hãy nhìn syntax của IIFE nhé.

// 1
(function(params) {
    // Do something
})(paramsInput);

// 2
((params) => {
    // Do something
})(paramsInput);

// 3
;(function(params) {
    // Do something
})(paramsInput);

// 4
;((params) => {
    // Do something
})(paramsInput);

// 5
(function nameFunc(params) {
    // Do something
})(paramsInput);

Như các bạn đã thấy ở trên chúng ta có một số cách để khai báo IIFE. Nhưng mình chia làm 2 loại chính, một loại có tên function và loại còn lại không có tên function.

IIFE có thể viết mà không có tên function vì nó chỉ được chạy có một lần, tuy nhiên cũng có thể viết tên function trong trường hợp các bạn muốn đặt tên tường mình ra chút (more meaning). Và hãy để ý là không thể đặt tên cho Arrow function viết theo kiểu IIFE nhé. Và kiểu viết tên thì cũng không thể call lại được, nó cũng chỉ chạy 1 lần thôi, nó không thể gắn vào Window Object được.

Bên trên mình có viết kiểu 3 và 4 có bạn hỏi tại sao lại viết vậy, liệu có viết nhầm không? Mình xin trả lời là không nhé, vì trong trường hợp bạn nối 2 file lại với nhau (Dùng package với Grunt, Gulp, Webpack, ....) thì có thể file trước và file sau nó sẽ như thế này:

function func() {
    // Do something
}

(function func() {
    // Do something
})()

Sau khi chạy lệnh, concat các file js thành 1 dòng nó sẽ lỗi:

function func(){}(function func() {})()

Nên mới có trường hợp để tránh lỗi này nên chúng ta sẽ add thêm ; vào đăng trước IIFE.

function func() {
    // Do something
}

;(function func() {
    // Do something
})()

// =>

function func(){};(function func() {})()

Tương tự đối với việc dùng arrow function nhé.

Nhẹ Memory và tránh gây ô nhiễm cho window object.

Ở đây 2 ý này là một nhé, vì khi chúng ta khai báo một function thì chính function cũng đã được add vào Window Object, như vậy thì khai báo càng nhiều thì sẽ càng làm cho đối tượng này bị phình to ra và như vậy sẽ rất khó kiểm soát.

function func() {
    console.log("func");
}

window.func(); // func

Tại sao lên dùng IIFE.

Với các đặc tính ở bên trên thì IIFE đang tỏ hết sức mạnh mẽ trong một số trường hợp với các phần logic mà chúng ta chỉ cần chạy 1 lần. Tuy nhiên cũng chính vì vậy nên nó không thể dùng lại ở những phần khác.

3. Kết luận

Đây là một dạng viết function không phải là mới, tuy nhiên các bạn có lẽ sẽ ít gặp và sẽ gặp nhiều hơn khi mà làm các dự án maintain hoặc những dự án code JS thuần.

Còn khi làm dự án mới hoặc có Framework thì có lẽ các bạn sẽ không thấy nó nữa, tuy nhiên cũng lên biết để hiểu thêm về JS, để nhỡ như có gặp nó thì cũng không bỡ ngỡ với nó.

4. Tham khảo

# JavaScript Immediately Invoked Function Expression
# IIFE
# What is an IIFE in JavaScript?
# JavaScript Immediately-invoked Function Expressions (IIFE)