ความแตกต่างระหว่าง != และ !== ใน JavaScript

ตัวดำเนินการ != (Loose Inequality)

ตัวดำเนินการ != ตรวจสอบ ค่าไม่เท่ากัน โดยไม่ตรวจสอบชนิดข้อมูล (Type Coercion) จะแปลงชนิดข้อมูลของโอเปรานด์ทั้งสองให้เป็นชนิดเดียวกันก่อนเปรียบเทียบ

1 != '1'     // false (แปลง '1' เป็นตัวเลข 1 แล้วเปรียบเทียบ)
0 != false   // false (แปลง false เป็น 0)
null != undefined // false (พิเศษ: null และ undefined ถือว่าเท่ากันใน loose equality)

ตัวดำเนินการ !== (Strict Inequality)

ตัวดำเนินการ !== ตรวจสอบ ค่าไม่เท่ากัน พร้อมตรวจสอบชนิดข้อมูล (No Type Coercion) ไม่แปลงชนิดข้อมูล เปรียบเทียบทั้งค่าและชนิด

1 !== '1'     // true (Number !== String)
0 !== false   // true (Number !== Boolean)
null !== undefined // true (Null !== Undefined)

ตัวอย่างโค้ดเปรียบเทียบ

<!DOCTYPE html>
<html>
<head>
  <title>Operator Example</title>
</head>
<body>
  <script>
    console.log("1 != '1'  = " + (1 != '1'));   // false
    console.log("1 !== '1' = " + (1 !== '1'));  // true
  </script>
</body>
</html>

ผลลัพธ์

1 != '1'  = false
1 !== '1' = true

ตารางเปรียบเทียบความแตกต่าง

แนวทางปฏิบัติที่แนะนำ (Best Practice)

• ใช้ === และ !== เสมอ (Strict Equality/Inequality)
• หลีกเลี่ยง == และ != เพื่อป้องกัน Bug จาก Type Coercion ที่คาดเดาได้ยาก
• ESLint rule: eqeqeq: ["error", "always"]

สรุป

!= = เปรียบเทียบค่า "หลังแปลงชนิด" | !== = เปรียบเทียบ "ค่าและชนิด" โดยไม่แปลง ใช้ !== เพื่อความปลอดภัยและคาดการณ์ได้