ความแตกต่างระหว่าง == และ === ใน Javascript
// 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 จะทำการแปลงตัวแปรทางด้านขวามือ ให้เหมือนกับตัวแปรทางด้านซ้ายมือ แล้วถึงนำไปเปรียบเทียบกัน (หรือที่บางคนบอกว่า มันแปลงก่อนนำไปเปรียบเทียบ นั่นแหละครับ)
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 เท่านั้นมาใช้งาน ซึ่งจะลดได้ทั้งโอกาสในการเกิดข้อผิดพลาด และบรรทัดของโค้ด