Programming Track
JavaScript
ES6+
Nullish coalescing
เรียนรู้ Nullish Coalescing operator (??) ที่ให้ค่า fallback เฉพาะเมื่อค่าเป็น null หรือ undefined โดยไม่กระทบค่า falsy ที่ถูกต้องอย่าง 0 หรือ ""
ปัญหาของ `||` กับค่า falsy
`||` (OR operator) ใช้เป็น fallback ได้ก็จริง แต่จะแทนที่ค่าที่เป็น "falsy" ทุกค่า — รวมถึง `0`, `""`, และ `false` ซึ่งบางครั้งเป็นค่าที่ถูกต้องและไม่ควรถูกแทนที่
JS
// ต้องการ fallback เฉพาะเมื่อ value เป็น null หรือ undefined
const score = 0;
const displayScore = score || "ไม่มีข้อมูล";
console.log(displayScore); // "ไม่มีข้อมูล" ❌ ผิด! 0 เป็นคะแนนที่ถูกต้อง
const title = "";
const displayTitle = title || "ไม่ระบุ";
console.log(displayTitle); // "ไม่ระบุ" ❌ อาจไม่ถูกต้อง ถ้า "" คือชื่อที่ผู้ใช้ตั้งใจNullish Coalescing `??` คืออะไร?
`??` คือ operator ที่คืนค่าทางขวาเฉพาะเมื่อค่าทางซ้ายเป็น `null` หรือ `undefined` เท่านั้น — ค่า falsy อื่นๆ เช่น `0`, `""`, `false` จะไม่ถูกแทนที่
JS
// ?? — fallback เฉพาะ null / undefined
const score = 0;
const displayScore = score ?? "ไม่มีข้อมูล";
console.log(displayScore); // 0 ✅ ถูกต้อง
const title = "";
const displayTitle = title ?? "ไม่ระบุ";
console.log(displayTitle); // "" ✅ ถูกต้อง
// กรณีที่ ?? ทำงาน (null หรือ undefined)
const config = null;
const timeout = config ?? 3000;
console.log(timeout); // 3000
const setting = undefined;
const theme = setting ?? "light";
console.log(theme); // "light"เปรียบเทียบ `||` กับ `??`
| ค่าทางซ้าย | ผลลัพธ์ด้วย `||` | ผลลัพธ์ด้วย `??` |
|---|---|---|
| `null` | คืนค่าทางขวา ✓ | คืนค่าทางขวา ✓ |
| `undefined` | คืนค่าทางขวา ✓ | คืนค่าทางขวา ✓ |
| `0` | คืนค่าทางขวา ⚠️ | คืนค่าทางซ้าย (0) ✓ |
| `""` | คืนค่าทางขวา ⚠️ | คืนค่าทางซ้าย ("") ✓ |
| `false` | คืนค่าทางขวา ⚠️ | คืนค่าทางซ้าย (false) ✓ |
| `"hello"` | คืนค่าทางซ้าย ✓ | คืนค่าทางซ้าย ✓ |
การรวม `??` กับ `?.`
`??` ใช้งานร่วมกับ `?.` ได้ดี — เข้าถึง nested property อย่างปลอดภัยแล้วใส่ fallback ถ้าไม่มีค่า
JS
const user = {
settings: null,
};
// ?. เข้าถึงอย่างปลอดภัย + ?? fallback ถ้าไม่มี
const theme = user?.settings?.theme ?? "light";
console.log(theme); // "light"
const fontSize = user?.settings?.fontSize ?? 16;
console.log(fontSize); // 16
// กรณีมีค่าจริง
const user2 = { settings: { theme: "dark", fontSize: 14 } };
const theme2 = user2?.settings?.theme ?? "light";
console.log(theme2); // "dark"สรุป
- ?? คืนค่าทางขวาเฉพาะเมื่อค่าทางซ้ายเป็น null หรือ undefined
- || คืนค่าทางขวาเมื่อค่าทางซ้ายเป็น falsy ทุกรูปแบบ (รวม 0, "", false)
- ใช้ ?? เมื่อต้องการ fallback สำหรับ null/undefined โดยไม่กระทบค่า falsy ที่ถูกต้อง
- รวมกับ ?. ได้: obj?.prop ?? defaultValue