Syntax ของ Leading Bang (!) ใน JavaScript Function

รูปแบบต่างๆ

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

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

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

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

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

ตัวอย่างจากบทความ

~function(){ 
  // do stuff 
  return 0; 
}( );

ทำไมต้องมีสัญลักษณ์นำหน้า?

ใน JavaScript function ที่ขึ้นต้นบรรทัด จะถูกตีความว่าเป็น Function Declaration (ต้องมีชื่อ) ไม่สามารถเรียกใช้ทันทีได้:

// SyntaxError: Function declarations require a name
function() { }();

สัญลักษณ์นำหน้าจะบังคับให้ Parser ตีความว่าเป็น Expression แทน

การคืนค่า (Return Value)

!function(){ return true; }();   // false
+function(){ return '5'; }();    // 5 (number)
-function(){ return 10; }();     // -10
~function(){ return 0; }();      // -1 (bitwise not)
void function(){ return 42; }(); // undefined

เปรียบเทียบกับ IIFE แบบมาตรฐาน

// มาตรฐาน (แนะนำ - อ่านง่าย)
(function() { })();

// Leading bang (สั้นกว่า แต่อ่านยากกว่า)
!function() { }();

// Void (ชัดเจนว่าไม่สนใจค่าคืน)
void function() { }();

กรณีใช้งานจริง

// ป้องกัน global leakage ในไฟล์ที่ concatenate รวมกัน
!function(window, undefined) {
  // code ที่ใช้ window และ undefined อย่างปลอดภัย
}(window);

ข้อควรระวัง

• รูปแบบ ! จะกลับค่า Boolean - อาจสับสน
• รูปแบบ void ชัดเจนที่สุดว่าไม่ใช้ค่าคืน
• ใน ES6+ ควรใช้ Modules แทน
• Minifier บางตัวอาจแปลง IIFE มาตรฐานเป็น leading bang เพื่อประหยัด bytes