IIFE (Immediately Invoked Function Expression) หรือ (function() { })() เป็นฟังก์ชันที่ถูกสร้างและเรียกใช้ทันทีในจุดเดียวกัน ใช้สร้าง scope แบบ isolate ไม่ให้ตัวแปรรั่วไหลไปสู่ global scope
ไวยากรณ์ (Syntax)
(function() {
// code
})();
การทำงานแยกส่วน
function() { ... }- Function Expression (ไม่ใช่ declaration)( ... )- วงเล็บครอบทำให้กลายเป็น Expression()- วงเล็บที่สอง เรียกใช้ฟังก์ชันทันที
ตัวอย่างการใช้งาน
1. สร้าง Private Scope
(function() {
var privateVar = 'secret';
function privateFunc() {
console.log(privateVar);
}
// ไม่สามารถเข้าถึง privateVar จากนอกได้
})();
console.log(privateVar); // ReferenceError
2. ส่งค่ากลับ (Return Value)
var result = (function() {
var x = 10;
var y = 20;
return x + y;
})();
console.log(result); // 30
3. รับพารามิเตอร์
(function(name) {
console.log('Hello ' + name);
})('World'); // Hello World
4. รูปแบบอื่นๆ
// ใช้ ! แทนวงเล็บแรก
!function() {
console.log('IIFE with !');
}();
// ใช้ +
+function() {
console.log('IIFE with +');
}();
// ใช้ arrow function (ES6)
(() => {
console.log('Arrow IIFE');
})();
ประโยชน์หลัก
- Encapsulation - ซ่อนตัวแปร/ฟังก์ชันไม่ให้เข้าถึงจากภายนอก
- ไม่มลพิษ Global Namespace - ป้องกันชื่อชนกัน
- Module Pattern - พื้นฐานของ module system ก่อน ES6
- Initialization Code - รันโค้ด setup ทันที
IIFE vs Block Scope (ES6+)
ตอนนี้ใช้ let/const กับ block { } แทนได้บ้าง:
// แทน IIFE
{
let privateVar = 'secret';
// scope จำกัดใน block นี้
}
แต่ IIFE ยังคงมีประโยชน์สำหรับ async initialization และ module pattern