สวัสดีครับ บทความนี้จะมีเนื้อหาเกี่ยวกับการใช้งาน || และ ?? ในภาษา JavaScript ครับ ซึ่งการใช้งานโดยทั่วไปจะมีความคล้ายๆกัน แต่จะมีรายละเอียดเล็กน้อยที่มีความต่างกัน ถ้าเราไม่ทราบอาจจะทําให้ Code ที่เราเขียนมี Bug ได้

เรามาเริ่มกันตรงที่การใช้งานโดยทั่วไปกันก่อนครับ โดยปกติเวลาเราต้องการเลือกใช้ข้อมูลที่ไม่ใช่ค่า null จากสองตัวแปรเราสามารถเขียนแบบสั้นๆโดยไม่ต้องใช้ if...else ได้โดยใช้ || และ ?? ตามตัวอย่างนี้ครับ

const a = null
const b = "this is b"

const result1 = a || b
const result2 = a ?? b

// Output
// result1:  this is b
// result2:  this is b

จาก Code ด้านบนหมายความว่า ทั้ง result1 และ result2 จะมีค่าเท่ากับ a ก็ต่อเมื่อ a != null หรือถ้า a == null ทั้ง result1 และ result2 จะมีค่าเท่ากับ b ทันที

ในตัวอย่างก็ดูให้ผลลัพธ์ที่เหมือนกัน แต่ในความเป็นจริงทั้ง || และ ?? มีความแตกต่างกันอยู่เล็กน้อยครับ ลองดูตามตัวอย่างนี้ครับ

const a = ""
const b = "this is b"

const result1 = a || b
const result2 = a ?? b

console.log("result1: ", result1)
console.log("result2: ", result2)

// Output
// result1:  this is b
// result2:

ถ้าเราเปลี่ยน a ให้มีค่าเป็น "" ผลลัพธ์ที่ได้จะออกมาต่างกันดังนี้คือ result2 จะมีค่าเท่ากับ "" เนื่องจาก ?? จะมองว่า "" ไม่มีค่าเป็น null จึงทําให้ result2 ได้ค่าของ a ไป นั่นก็คือ "" นั่นเอง

สรุป

|| และ ?? ต่างกันตรงที่ ?? จะมองว่า null และ "" เป็นคลละตัวกัน ในทางกลับกัน || จะมองว่า null และ "" เป็นตัวเดียวกัน จึงทําให้ผลลัพธ์ออกมาแตกต่างกัน