Computer >> บทช่วยสอนคอมพิวเตอร์ >  >> การเขียนโปรแกรม >> JavaScript

IIFE (Immediately Invoked Function Expression) ใน JavaScript คืออะไร

IIFE (Immediately Invoked Function Expression) หรือ (function() { })() เป็นฟังก์ชันที่ถูกสร้างและเรียกใช้ทันทีในจุดเดียวกัน ใช้สร้าง scope แบบ isolate ไม่ให้ตัวแปรรั่วไหลไปสู่ global scope

ไวยากรณ์ (Syntax)

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

การทำงานแยกส่วน

  1. function() { ... } - Function Expression (ไม่ใช่ declaration)
  2. ( ... ) - วงเล็บครอบทำให้กลายเป็น Expression
  3. () - วงเล็บที่สอง เรียกใช้ฟังก์ชันทันที

ตัวอย่างการใช้งาน

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