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

== และ != มีชื่อในภาษาอังกฤษว่า operator ส่วน === และ !== ในภาษาอังกฤษเรียกว่า identity ทั้งสองแบบมีข้อแตกต่างกันเล็กน้อยครับ
// identity
3 === '3' // false
3 === 3 // true

// operator
'' == '0' // false
0 == '' // true
0 == '0' // true

false == 'false' // false
false == '0' // true

false == undefined // false
false == null // false
null == undefined // true

' \t\r\n ' == 0 // true

จากผลลัพท์ด้านบน
        
  • เครื่องหมาย === หรือ !== จะมีการเปรีบเทียบให้ตรงกันทั้งชนิดของข้อมูล (เช่นต้องเป็นตัวเลขเหมือนกัน) และค่าของมันด้วย โดยจะมีการเปรียบเทียบชนิดของตัวแปรก่อน ถ้าตัวแปรทั้งสองตัวเป็นชนิดเดียวกัน ถึงจะมีการเปรียบเทียบค่าของมัน
  •     
  • ส่วนแบบ == หรือ != จะมีการเปรียบเทียบเฉพาะค่าของมันเท่านั้น โดยจะมีการตรวจสอบชนิดของตัวแปรก่อน ถ้าชนิดของตัวแปรไม่ตรงกัน javascript จะทำการแปลงตัวแปรทางด้านขวามือ ให้เหมือนกับตัวแปรทางด้านซ้ายมือ แล้วถึงนำไปเปรียบเทียบกัน (หรือที่บางคนบอกว่า มันแปลงก่อนนำไปเปรียบเทียบ นั่นแหละครับ)
โดยที่เงื่อนไขในการเปรียบเทียบจะเป็นไปตามกฏ The Abstract Equality Comparison Algorithm

Performance
ถ้าดูจากวิธีการที่ใช้ในการเปรียบเทียบจะเห็นว่า === จะมีประสิทธิภาพมากที่สุดหากผลลัพท์เป็นเท็จ เพราะเมื่อมันตรวจพบว่า ตัวแปรทั้งสองมีชนิดไม่ตรงกันมันจะคืนค่า false ทันที แต่หากมันเป็นชนิดเดียวกันมันถึงจะไปตรวจสอบค่าของมัน ซึ่งในขั้นตอนนี้ประสิทธิภาพของสองฟังก์ชั่นจะมีพอๆกัน และ ประสิทธิภาพจะต่ำที่สุดหากใช้ == และตัวแปรทั้งสองต่างชนิดกัน

การนำไปใช้งาน
หลายคนอาจคิดว่า == อย่างเดียวก็สามารถใช้งานได้แล้ว ทำไมจะต้องใช้ === ให้ยุ่งยากด้วย ซึ่งจริงๆแล้วการใช้เครื่องหมายให้ถูกที่ถูกเวลาจะช่วยลดความซับซ้อน และ ป้องกันความผิดพลาดได้ครับ
        
  • ปกติแล้ว หากเรารู้ค่าชนิดของตัวแปรที่แน่นอน เราสามารถใช้ == ได้ครับ (เช่นการเขียน Javascript ทั่วๆไปที่เราสามารถควบคุมค่าของตัวแปรได้)
  •     
  • แต่หาก เราต้องรับค่ามาจากที่อื่นเช่น จาก PHP (ด้วย Ajax) หรือจากฟังก์ชั่นภายนอกอื่นๆที่เราไม่อาจควบคุมได้ การใช้ === จะช่วยลดภาระในการแปลงค่าได้
var a = 1; // ตัวแปรสมมุติที่ค่าอาจเป็น 1 หรือ '1'
if (a == 1) {
    a = a.toString(); // แปลงให้เป็น string ก่อน
   alert(a + a); // 11
}

โค้ดตัวอย่างด้านบน สมมุติว่าค่าตัวแปร a อาจเป็นได้ทั้ง 1 (ตัวเลข) และ '1' (string) ซึ่งถ้าใช้ == แล้ว ผลลัพท์นี้จะเป็น true เสมอ ซึ่งถ้า a เป็น string เมื่อมาถึง a.toString() จะเกิดข้อผิดพลาดทันที (เพราะคำสั่งนี้ไม่มีใน string)
var a = 1;
if (a === '1') { // เป็นจริงหากเป็น string เท่านั้น
   alert(a + a); // 11
}

ในกรณีนี้ผลลัพท์ที่เราต้องการคือ 11 ดังนั้น a ต้องเป็น string เท่านั้น ซึ่งถ้าเราใช้ === ก็จะเปนการกรองเอาตัวแปร string เท่านั้นมาใช้งาน ซึ่งจะลดได้ทั้งโอกาศในการเกิดข้อผิดพลาด และบรรทัดของโค้ด
 
ผู้เขียน Goragod โพสต์เมื่อ 26 พ.ค. 2558 เปิดดู 2,103 ป้ายกำกับ Javascript

เรื่องที่เกี่ยวข้อง

^