สวัสดีครับ บทความนี้จะมีเนื้อหาเกี่ยวกับการใช้งาน || และ ?? ในภาษา 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 และ "" เป็นตัวเดียวกัน จึงทําให้ผลลัพธ์ออกมาแตกต่างกัน