ความแตกต่างระหว่าง ==, ===, และการใช้ 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 ตรวจสอบก่อนได้!

ระวัง! typeof มีกับดักอยู่

แต่ typeof ก็มีจุดที่หลอกเราได้เหมือนกันนะครับ ลองดูสองตัวนี้:

typeof null   // "object"  ❌ ทั้งๆ ที่ null ไม่ใช่ object
typeof []     // "object"  ❌ array ก็ขึ้นว่า object

typeof null === "object" คือบั๊กชื่อดังที่ติดมากับ JavaScript ตั้งแต่ยุคแรกๆ และแก้ไม่ได้แล้วเพราะจะทำให้โค้ดเก่าพังทั้งโลก ส่วน array ที่ขึ้นว่า "object" ก็เพราะจริงๆ แล้ว array ใน JavaScript ก็คือ object ชนิดหนึ่ง

ดังนั้นถ้าอยากเช็กว่าเป็น array จริงๆ อย่าใช้ typeof ให้ใช้ Array.isArray() แทน:

Array.isArray([1, 2, 3]); // true
Array.isArray("hello");   // false

ผลลัพธ์แปลกๆ ที่ == ชอบหลอกเรา

นี่คือเหตุผลที่หลายคนแนะนำให้เลี่ยง == ลองดูชุดนี้ดูครับ เดาถูกกี่ข้อ?

""  == 0;          // true  (string ว่างกลายเป็น 0)
"0" == 0;          // true
"0" == "";         // false (อ้าว!)
null == undefined; // true
null == 0;         // false (null ไม่ยอมแปลงเป็นเลข)
NaN == NaN;        // false (NaN ไม่เท่ากับอะไรเลย แม้แต่ตัวเอง)

เห็นไหมครับว่าตรรกะมันชวนปวดหัว "0" == 0 เป็น true แต่ "0" == "" กลับเป็น false ทั้งที่ดูเผินๆ น่าจะไปทางเดียวกัน นี่แหละคือสาเหตุที่ == ทำให้เกิดบั๊กแบบงงๆ

แล้วควรใช้ตัวไหนดี?

กฎง่ายๆ คือ ใช้ === เป็นค่าเริ่มต้นเสมอ จะปลอดภัยที่สุด

มีข้อยกเว้นเดียวที่ == มีประโยชน์จริง คือเวลาอยากเช็ก null กับ undefined พร้อมกันในบรรทัดเดียว:

if (value == null) {
  // จับได้ทั้ง null และ undefined
}

อันนี้นักพัฒนาหลายคนยอมรับว่าเขียนแบบนี้ได้ เพราะสั้นและความตั้งใจชัดเจน นอกนั้นใช้ === ไว้ก่อนปลอดภัยกว่า อ่านรายละเอียดเชิงลึกเพิ่มได้ที่ MDN: Equality comparisons and sameness

สรุป

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

ตอนเริ่มเขียน JavaScript ใหม่ๆ ผมเองก็เคยโดน 5 == "5" หลอกจนงงว่าทำไมโค้ดมันทำงานไม่ตรงที่คิด พอมาตั้งกฎให้ตัวเองว่า “ใช้ === ไว้ก่อนเสมอ” บั๊กแปลกๆ พวกนี้ก็หายไปเกือบหมดเลยครับ ใครที่เพิ่งเริ่มจำแค่ข้อเดียวนี้ก็ช่วยได้เยอะแล้ว