โอเปอเรเตอร์ void ใน JavaScript คืออะไร?

โอเปอเรเตอร์ void เป็น Unary Operator ที่ ประเมินนิพจน์แต่ไม่ส่งค่ากลับ (Return undefined) ใช้เมื่อต้องการรันโค้ดเพื่อ Side Effect โดยไม่ต้องการค่าผลลัพธ์

ไวยากรณ์

void expression
void (expression)

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

<html>
<head>
  <script>
    // ไม่มีการทำงานที่มองเห็นได้
  </script>
</head>
<body>
  <p>Click the following, This won't react at all...</p>
  <a href="javascript:void(alert('Warning!!!'))">Click me!</a>
</body>
</html>

การทำงาน

1. User คลิก Link
2. Browser รัน alert('Warning!!!') (Side Effect: แสดง Popup)
3. void ทำให้ผลลัพธ์ของ alert (ซึ่งเป็น undefined) ถูกทิ้ง
4. Browser ไม่นำทาง (Navigate) ไปหน้าใหม่ เพราะ href คืนค่า undefined

การใช้งานทั่วไป

1. javascript: URLs (หลัก)

<a href="javascript:void(doSomething())">Click</a>
// ป้องกัน Browser นำทางไปหน้าใหม่จาก Return Value

2. IIFE (Immediately Invoked Function Expression) แบบไม่ต้องการค่า

void function() {
  // initialization code
  console.log("Initialized");
}();

3. ป้องกันการ Return ค่าที่ไม่ต้องการ

// Arrow Function implicit return
const btn = document.querySelector('button');
btn.onclick = () => void doSomething(); // ป้องกัน return value leak

4. Bookmarklets

javascript:void((function(){ /* code */ })())

void 0 vs undefined

void 0 === undefined // true
// void 0 ใช้แทน undefined ใน Code Golf / Minification
// ปลอดภัยกว่า undefined (undefined อาจถูก Override ได้ใน ES3)

ข้อควรระวัง

• ไม่ควรใช้ใน href สำหรับ Link ปกติ (Accessibility, SEO, UX แย่) ควรใช้ <button> + Event Handler แทน
• void มี Precedence ต่ำ ต้องใช้วงเล็บถ้ารวมกับ Operator อื่น: void (a + b)
• ใน Strict Mode ก็ทำงานเหมือนเดิม

ตัวเลือกที่ดีกว่า (Modern)

// แทน 
Click

// หรือ
Link

// หรือใช้ Event Listener
element.addEventListener('click', e => {
  e.preventDefault();
  doSomething();
});