IIFE (Immediately Invoked Function Expression)

IIFE (Immediately Invoked Function Expression) là một function expression được định nghĩa và gọi ngay lập tức tại chỗ, không cần đặt tên rồi gọi ở dòng khác.

(function () {
  console.log("Chạy ngay!");
})();

---

Cú pháp

Function thường

(function () {
  // code chạy ngay
})();

Arrow function

(() => {
  // code chạy ngay
})();

Async IIFE

(async () => {
  const data = await fetch('/api');
  console.log(data);
})();

Có tham số

(function (name) {
  console.log(`Hello, ${name}!`);
})("An");
// "Hello, An!"

Tại sao cần dấu ()?

Bọc function trong () để JS hiểu đây là expression, không phải declaration. Nếu không có (), JS sẽ báo lỗi cú pháp.

// ❌ SyntaxError
function () { ... }();

// ✅ OK — bọc trong ()
(function () { ... })();

---

Mục đích chính

1. Tạo scope riêng — tránh ô nhiễm global

Có IIFE

var x = 1;

(function () {
  var x = 2; // x chỉ tồn tại trong IIFE
  console.log("Trong IIFE:", x); // 2
})();

console.log("Ngoài IIFE:", x); // 1 ← không bị ảnh hưởng

Không có IIFE

var x = 1;

// Không có IIFE → var x bị ghi đè
var x = 2;

console.log(x); // 2 ← biến global bị thay đổi!

2. Tạo closure và dữ liệu “private”

const counter = (function () {
  let count = 0; // "private" — không truy cập được từ bên ngoài

  return {
    inc() {
      count++;
      return count;
    },
    get() {
      return count;
    },
  };
})();

console.log(counter.inc()); // 1
console.log(counter.inc()); // 2
console.log(counter.get()); // 2
console.log(counter.count); // undefined — không truy cập được!

Mẹo

count bị “giấu” bên trong IIFE — chỉ có thể tương tác qua inc() và get(). Đây là Module Pattern cổ điển.

3. Tránh xung đột thư viện

// Mỗi thư viện tự bọc trong IIFE → không xung đột biến
(function ($) {
  // $ ở đây chắc chắn là jQuery
  $(".btn").click(function () { ... });
})(jQuery);

---

IIFE trong thời đại hiện đại

Trước ES6

• Chưa có let, const → var không có block scope
• Chưa có module → dùng IIFE để tạo private scope
• IIFE là cách duy nhất để đóng gói code

Sau ES6

• let, const có block scope → dùng {} là đủ
• ES Modules (import/export) thay thế IIFE
• IIFE vẫn hữu ích cho async top-level và legacy code

IIFE (cũ)

(function () {
  var secret = 42;
  console.log(secret);
})();
// secret không tồn tại ở đây

Block scope (mới)

{
  const secret = 42;
  console.log(secret);
}
// secret không tồn tại ở đây

Module (mới)

utils.js

const secret = 42;
export const getSecret = () => secret;

// main.js
import { getSecret } from './utils.js';
// secret không truy cập trực tiếp được

---

Các biến thể cú pháp

Ngoài cách phổ biến nhất, còn có vài cách viết khác (ít dùng):

// Cách 1: phổ biến nhất
(function () { ... })();

// Cách 2: gọi bên trong ()
(function () { ... }());

// Cách 3: dùng toán tử unary
!function () { ... }();
void function () { ... }();
+function () { ... }();

Chú ý

Cách 1 là chuẩn và phổ biến nhất. Các cách khác hoạt động nhưng ít đọc được hơn.

---

Tóm tắt

Đặc điểm	Chi tiết
Cú pháp	(function () { ... })(); hoặc (() => { ... })();
Mục đích	Tạo scope riêng, closure, dữ liệu private
Tham số	Truyền qua () cuối cùng
Async	(async () => { ... })();
Thay thế hiện đại	let/const block scope, ES Modules
Vẫn hữu ích	Async IIFE, tương thích legacy, đóng gói nhanh