Anonymous Wrapper Functions และ IIFE ใน JavaScript

IIFE (Immediately Invoked Function Expression) คือฟังก์ชันที่ถูกประกาศและเรียกใช้ทันทีในบรรทัดเดียวกัน ใช้สำหรับสร้าง Scope แบบ隔离 (Isolated Scope) ป้องกันการปนเป้อนของตัวแปรใน Global Scope

ตัวอย่างโค้ด

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>IIFE Demo</title>
  <style>
    body { font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif; }
    .result { font-size: 20px; font-weight: 500; color: blueviolet; }
  </style>
</head>
<body>
  <h1>Anonymous Wrapper Functions ใน JavaScript</h1>
  <div class="result">0</div>
  <br />
  <script>
    const resEle = document.querySelector(".result");
    
    // IIFE - ทำงานทันทีหลังจากประกาศ
    (function() {
      resEle.innerHTML = "โค้ดชิ้นนี้ทำงานอัตโนมัติ เพราะอยู่ใน IIFE";
    })();
    
    // รูปแบบอื่นๆ
    (() => {
      console.log("Arrow function IIFE");
    })();
    
    // ส่งพารามิเตอร์เข้าไป
    ((name) => {
      console.log("Hello " + name);
    })("World");
  </script>
</body>
</html>

รูปแบบ IIFE ที่พบบ่อย

// รูปแบบคลาสสิก
(function() { /* code */ })();

// รูปแบบ Arrow Function (ES6+)
(() => { /* code */ })();

// กับ Operator (void, +, -, ~, !)
void function() { /* code */ }();
+function() { /* code */ }();

// ส่งค่ากลับ
const result = (function() { return 42; })();

กรณีการใช้งาน (Use Cases)

• Module Pattern: สร้าง private variables/methods
• Initialization Code: รันโค้ดตั้งค่าครั้งเดียว
• Avoid Global Pollution: ไม่ทิ้งตัวแปรไว้ใน global scope
• Library Wrapping: jQuery, Lodash ใช้ IIFE ห่อหุ้มโค้ดทั้งไลบรารี

ผลลัพธ์

โค้ดภายใน IIFE ทำงานทันทีและแสดงข้อความใน div result