Falsy Values จุดเล็กๆที่ไม่ควรมองข้าม (Javascript)

การเกริ่นของบทความนี้อาจจะยาวซักเล็กน้อยแต่เพื่อทำให้ทุกๆคนเข้าใจ เรามาทำความรู้จักกับจุดเริ่มต้นของเรื่องนี้กันหน่อย

เมื่อเราเริ่มเขียนโค้ด เราก็จะได้เจอเครื่องหมายหน้าตาแบบนี้ → “=” ถ้าไม่ใช่ในการเขียนโค้ดเราคงเรียกมันว่า “เท่ากับ” หรือ “equal to” แต่ในการเขียนโค้ด JavaScript นั้นเครื่องหมายนี้คือ “ assignment”

x = x + 10 //เป็นการกำหนดให้เอาค่าของ x + 10 ไปใส่ให้กับ x ซึ่งพูดง่ายๆก็คือ จะคิดคำนวณค่าของ x + 10 ก่อนแล้วนำผลลัพธ์ไปใส่ให้กับ x

อ้าว แล้วถ้าเราต้องการเปรียบเทียบค่าด้านซ้ายและขวาล่ะจะต้องทำยังไง ทุกๆคนน่าจะต้องเคยเห็นเครื่องหมายหน้าตาแบบนี้ → “==” หรือว่าแบบนี้ “===” ซึ่งเอาไว้ตรวจสอบว่าค่าเป็น true หรือ false … เอ้า! หน้าตาคล้ายกันแต่เพิ่มจำนวน ใช้ยังไงอีกล่ะ … งั้นเราไปดูกันเลย~

== คือ equal to การเปรียบเทียบแบบนี้จะเทียบเฉพาะค่าของมัน โดยที่มันจะทำการแปลงชนิดของข้อมูลทางด้านขวาให้ตรงกับชนิดของข้อมูลทางด้านซ้ายก่อน แล้วค่อยนำค่าไปเปรียบเทียบกัน

=== คือ equal value and equal type การเปรียบเทียบแบบนี้จะเทียบทั้งชนิดและค่าของข้อมูล

งั้นเราให้ x = 10 แล้วมาลองดูค่าต่างๆที่ได้มากัน

x == 5 //ได้ค่า false
x == 10 //ได้ค่า true
x == "10" //ได้ค่า true
x === 5 //ได้ค่า false
x === 10 //ได้ค่า true
x === "10" //ได้ค่า false

ทีนี้เราจะพาทุกคนไปดูตัวอย่างเพิ่มเติมกัน สมมุตินะว่าเรานำ == และ === ไปใช้งานจริงในการ compare

if(false === 0){
   console.log("A");
}
//ในกรณีนี้เราจะไม่เคยได้เห็น A เลย เพราะมันจะได้ค่าเป็น false
if(false == 0){
console.log("A");
}
//ในกรณีนี้เราจะได้เห็น A เพราะมันจะได้ค่าเป็น true

ทำไมถึงได้ค่าเป็น true ล่ะ? เพราะ javascript จะพยายามแปลงค่า 0 เป็นค่า false ที่เป็น boolean ดังนั้น false จึงมีค่าเท่ากับ false … เรื่องนี้มันเกี่ยวข้องกับค่า falsy value ใน javascript ซึ่งเราจะพูดถึงในต่อไปนี้นั่นเอง

Falsy Values

Falsy Value ก็คือค่าที่ถือว่าเป็นค่าเท็จเมื่อใช้ในการเปรียบเทียบ boolean ซึ่งมีด้วยกันทั้งหมด 6 ค่าที่เราควรระมัดระวัง

• false — ค่า boolean ที่เป็นfalse
• 0 — เลข 0 ที่มี type เป็น number
• "", '', `` — empty string
• null
• undefined
• NaN

false, 0, ""

ถ้าเรานำสามค่านี้มาเปรียบเทียบกันมันจะเท่ากันเสมอ เพราะเมื่อถูกแปลงค่าเป็น false ดังนั้น false จะเท่ากับ false

false == 0 // ได้ค่าtrue
0 == "" //ได้ค่าtrue
"" == false //ได้ค่าtrue

null และ undefined

ค่าของสองตัวนี้จะเท่ากัน และเท่ากันกับค่าของตัวเองเท่านั้น ถ้าพยายามนำไปเทียบกับค่าอื่นๆเราจะได้เป็นค่า false

null == null // ได้ค่าtrue
undefined == undefined // ได้ค่าtrue
null == undefined// ได้ค่าtrue

NaN

ค่าของตัวนี้อภิมหาพิเศษเพราะนอกจากมันจะไม่เท่ากับค่าใดๆแล้ว มันยังไม่เท่ากันกับค่าตัวเองอีกด้วย (โอ้โห!)

NaN == null // ได้ค่าfalse
NaN == undefined // ได้ค่าfalse
NaN == NaN // ได้ค่าfalse

มาดูตัวอย่างอีกตัวอย่างที่อยากนำเสนอกัน

var value  = "Hello";
if(value){
   console.log("true");
}else{
   console.log("false");
}
//จากโค้ดเราต้องการเช็คว่ามีค่า value มั้ย? ถ้ามีก็จะแสดงคำว่า true ซึ่งในที่นี้มันก็จะได้ค่า true ... ทีนี้ลองคิดดูว่าถ้าค่าของ value เป็นค่า falsy value ล่ะ
var value  = 0;
if(value){
   console.log("true");
}else{
   console.log("false");
}
//ในกรณีจะแสดงคำว่า false เพราะ 0 เป็นค่าชนิด number นั่นเอง

จะเห็นได้ว่าจริงๆแล้วค่า falsy value กับการ compare ก็ไม่ได้เกี่ยวข้องกันโดยตรง แต่ falsy value ก็เป็นส่วนที่เราต้องให้ความระมัดระวังในการเขียนโค้ดเหมือนกัน

และนั่นคือสิ่งที่เราอยากจะเตือนทุกๆคนให้มีสติให้มากๆในการทำ compare condition จะเห็นได้ว่าการใช้ === ในการเปรียบเทียบค่าจะทำให้ชีวิตปลอดภัยขึ้น เตือนไว้ให้คิด … ถึงแม้เรื่องนี้จะดูเล็กๆน้อยๆ แต่ถ้าเราไม่ระมัดระวังมันก็สร้าง bug ให้กับ code ของเราได้นะจ๊ะ