ความแตกต่างระหว่าง ==, ===, และการใช้ typeof ใน JavaScript

ความแตกต่างระหว่าง ==, ===, และการใช้ typeof ใน JavaScript

วันนี้เราจะมาเคลียร์ปมปัญหาที่หลายคนอาจจะงงกันอยู่ใน JavaScript นั่นก็คือความแตกต่างระหว่างตัวดำเนินการ == (Double Equals), === (Triple Equals) และ typeof ว่าแต่ละตัวต่างกันอย่างไร ไม่ว่าคุณจะเป็นมือใหม่ หรือเขียน JavaScript มาสักพักแล้ว ก็อาจจะยังไม่แน่ใจว่าใช้งานทั้งสามตัวนี้ต่างกันอย่างไร โดยเฉพาะความแตกต่างระหว่าง == และ === เอาล่ะ เรามาดูกันเลย!

ทำไม == ถึงเป็นปัญหาได้?

มาเริ่มกันที่ == ก่อนเลย บางคนเรียกว่า "weak equality" หรือการเปรียบเทียบค่าแบบหลวมๆ ทำไมถึงเรียกแบบนั้น? ก็เพราะว่าตัวดำเนินการ == มัน "ยืดหยุ่น" มากๆ จนบางครั้งก็อาจจะทำให้เราสับสนได้ มันจะพยายามแปลงค่าของทั้งสองฝั่งให้เป็นชนิดเดียวกันก่อนเปรียบเทียบ

เช่นตัวอย่างนี้:

5 == "5"; // ได้ true

ในตัวอย่างนี้ "5" ซึ่งเป็นสตริงจะถูกแปลงให้เป็นตัวเลข 5 ก่อน แล้วค่อยเปรียบเทียบกัน บางครั้งสิ่งนี้อาจจะดูเป็นข้อดี แต่ก็อาจนำมาซึ่งผลลัพธ์ที่คาดไม่ถึง

อีกหนึ่งตัวอย่างเช่น:

1 == true; // ได้ true เหมือนกัน เพราะ true ถูกแปลงเป็น 1

ถ้าเราต้องการเปรียบเทียบค่าคนละประเภทจริง ๆ การใช้ == อาจทำให้เราสับสนหรือเจอบั๊กได้ง่ายๆดังนั้นต้องระวัง

ทีนี้มาดูฮีโร่ของเรากัน === (triple equals)

ในขณะที่ == อาจจะมีการแปลงชนิดข้อมูล, === หรือ "strict equality" จะไม่ทำการแปลงชนิดข้อมูลใดๆเลยก่อนเปรียบเทียบ

ลองดูตัวอย่าง:

5 === "5"; // ได้ false, เพราะตัวหนึ่งเป็น number อีกตัวเป็น string

สังเกตว่า == อาจจะให้ผลลัพธ์เป็น true แต่พอใช้ === กลับเป็น false เพราะไม่มีการแปลงชนิดให้ตรงกันก่อน

อีกตัวอย่างหนึ่ง:

1 === true; // ได้ false, เพราะชนิดข้อมูลไม่เหมือนกัน

ดังนั้นเมื่อเราเขียนโค้ดแล้วต้องการเปรียบเทียบแบบตรงไปตรงมาไม่มีการแปลงชนิดให้ปวดหัวการใช้ === ถือเป็นตัวเลือกที่ปลอดภัยกว่าซึ่งโอกาสจะเจอบั๊กก็จะน้อยลงไปเยอะเลย

มาทำความรู้จักกับ typeof กันครับ!

typeof ไม่ใช่ตัวเปรียบเทียบเหมือนสองตัวแรก แต่เป็นเครื่องมือที่บอกเราว่าข้อมูลที่เรามีเป็นประเภทอะไรโดยมันจะ return ค่าออกมาเป็นข้อความ string

ลองดูตัวอย่าง:

typeof 42        // "number"
typeof "สวัสดี"    // "string"
typeof true      // "boolean"
typeof {}        // "object"

สิ่งนี้มีประโยชน์มากเวลาที่เราไม่แน่ใจว่าค่าที่ส่งเข้ามาใน function เป็นชนิดข้อมูลอะไรเราก็สามารถใช้ typeof ตรวจสอบก่อนได้!

สรุป

• == (Double Equals) — Weak Equality: ยอมให้มีการแปลงชนิดข้อมูลก่อนเปรียบเทียบ, ระวังการใช้งานเพราะอาจได้ผลลัพธ์ไม่คาดคิด
• === (Triple Equals) — Strict Equality: ไม่มีการแปลงชนิดข้อมูลทำให้เปรียบเทียบได้ตรงไปตรงมา, ปลอดภัยและควบคุมผลลัพธ์ได้ง่าย
• typeof (typeof Operator): ใช้ตรวจสอบชนิดข้อมูลคืนค่าเป็น string เช่น number, string, boolean, object, array