ตัวดำเนินการ Nullish Coalescing ในภาษา JavaScript

บทความนี้อธิบายตัวดำเนินการ Nullish Coalescing ในภาษา JavaScript

YouTube Video

ตัวดำเนินการ Nullish Coalescing ในภาษา JavaScript

ในภาษา JavaScript ตัวดำเนินการ Nullish Coalescing (??) จะตรวจสอบว่าค่าคือ null หรือ undefined หรือไม่ และจะคืนค่าค่าเริ่มต้น (default value) ที่แตกต่างกันหากเป็นจริง มันคล้ายกับตัวดำเนินการทางตรรกะ OR (||) ที่ใช้บ่อย แต่ต่างกันตรงที่มันจะเน้นเจาะจงที่ null และ undefined

ตัวดำเนินการ OR เชิงตรรกะจะคืนค่าฝั่งขวาเมื่อค่าฝั่งซ้ายเป็น falsy ในขณะที่ตัวดำเนินการ Nullish Coalescing จะคืนค่าฝั่งขวา เฉพาะเมื่อค่าฝั่งซ้ายเป็น null หรือ undefined คุณสมบัตินี้ช่วยให้สามารถจัดการค่า เช่น 0 และสตริงว่าง ("") ได้อย่างถูกต้อง

ไวยกรณ์พื้นฐาน

1let result = value ?? defaultValue;

• value คือค่าที่กำลังถูกตรวจสอบ
• defaultValue คือค่าที่จะถูกคืนเมื่อ value เป็น null หรือ undefined

ตัวอย่างการใช้งานตัวดำเนินการ Nullish Coalescing

ตัวอย่างต่อไปนี้แสดงกระบวนการคืนค่าค่าเริ่มต้นในกรณีที่ค่าเป็น null หรือ undefined

1let name = null;
2let defaultName = "Anonymous";
3
4// If name is null or undefined, 'Anonymous' is returned
5let displayName = name ?? defaultName;
6console.log(displayName); // "Anonymous"

ในโค้ดนี้ เนื่องจาก name เป็น null ค่า defaultName ซึ่งคือ "Anonymous" จะถูกคืนค่า ถ้า name เป็นค่าที่แตกต่างจาก null หรือ undefined ค่านั้นจะถูกคืนค่า

ความแตกต่างกับตัวดำเนินการ Logical OR

ตัวดำเนินการ Nullish Coalescing มีลักษณะคล้ายกับตัวดำเนินการ OR เชิงตรรกะแต่มีความแตกต่างที่สำคัญ ตัวดำเนินการ OR เชิงตรรกะจะตรวจสอบค่าว่าเป็น 'falsy' (false, 0, NaN, "", null, undefined, ฯลฯ) ในขณะที่ตัวดำเนินการ Nullish Coalescing จะตรวจสอบ เฉพาะเมื่อค่าเป็น null และ undefined

ตัวอย่างของตัวดำเนินการ Logical OR:

1let count = 0;
2let defaultCount = 10;
3
4// Since count is falsy (0), defaultCount is returned
5let result = count || defaultCount;
6console.log(result); // 10

ตัวอย่างของตัวดำเนินการ Nullish Coalescing:

1let count = 0;
2let defaultCount = 10;
3
4// Since count is neither null nor undefined, count is returned as is
5let result = count ?? defaultCount;
6console.log(result); // 0

ด้วยวิธีนี้ ตัวดำเนินการ Nullish Coalescing จะเก็บรักษาค่าที่ถูกต้อง เช่น 0 และสตริงว่าง ("") และจะคืนค่าดีฟอลต์เฉพาะเมื่อจำเป็น เนื่องจากตัวดำเนินการ OR เชิงตรรกะถือค่าดังกล่าวเป็น falsy และคืนค่าดีฟอลต์ การเลือกตัวดำเนินการที่เหมาะสมจึงเป็นสิ่งสำคัญขึ้นอยู่กับกรณีการใช้งาน

ตัวอย่างเมื่อนำไปใช้ร่วมกัน:

ตัวดำเนินการ Nullish Coalescing สามารถใช้ร่วมกับตัวดำเนินการเชิงตรรกะอื่นๆ ได้ แต่ต้องใช้ด้วยความระมัดระวัง

1let a = null;
2let b = 0;
3let c = false;
4
5// SyntaxError
6let result = a ?? b || c;

• ตัวอย่างเช่น เมื่อใช้ร่วมกับตัวดำเนินการ OR เชิงตรรกะ (||) หรือตัวดำเนินการ AND เชิงตรรกะ (&&) ควรใช้ วงเล็บ เพื่อทำให้ลำดับการดำเนินการชัดเจนขึ้น

1let a = null;
2let b = 0;
3let c = false;
4
5let result = (a ?? b) || c;
6console.log(result); // false

• ในตัวอย่างนี้ a ?? b ถูกประเมินก่อน และเนื่องจาก a เป็น null ค่า b จึงถูกคืนค่า จากนั้นจะทำการประเมิน b || c และเมื่อ b เป็นค่าที่ให้ผลลัพธ์เป็นเท็จ (falsy) ค่าของ c จะถูกส่งกลับในที่สุด

กรณีที่ตัวดำเนินการ Nullish Coalescing มีประโยชน์

กรณีต่อไปนี้คือตัวอย่างที่ตัวดำเนินการ Nullish Coalescing มีประโยชน์

• ค่าเริ่มต้นสำหรับฟอร์ม สิ่งนี้สามารถใช้ในสถานการณ์ที่มีการตั้งค่าค่าเริ่มต้นสำหรับฟิลด์ป้อนข้อมูลในฟอร์มเมื่อผู้ใช้ไม่ได้ป้อนอะไร

1let userAge = null;
2let defaultAge = 18;
3let age = userAge ?? defaultAge;
4console.log(age); // 18

• การจัดการการตอบกลับจาก API กระบวนการสำรองสามารถดำเนินการได้เมื่อค่ามีค่าเป็น null หรือ undefined ในการตอบกลับจาก API

1let apiResponse = {
2    title: "New Article",
3    description: null
4};
5
6let title = apiResponse.title ?? "Untitled";
7let description = apiResponse.description ?? "No description available";
8console.log(title);        // "New Article"
9console.log(description);  // "No description available"

สรุป

ตัวดำเนินการ Nullish Coalescing (??) มีประโยชน์มากสำหรับการกำหนดค่าเริ่มต้นและการจัดการการตอบสนองของ API เนื่องจากจะคืนค่าดีฟอลต์เมื่อพบค่า null หรือ undefined โดยเฉพาะอย่างยิ่ง เป็นตัวเลือกที่ดีกว่าตัวดำเนินการ OR เชิงตรรกะแบบดั้งเดิม (||) เมื่อคุณต้องการจัดการค่าที่เป็น falsy เช่น 0 หรือสตริงว่างอย่างเหมาะสม

เกี่ยวกับ Nullish Coalescing Assignment Operator (??=)

ภาพรวม

ใน JavaScript ได้มีการแนะนำ Nullish Coalescing Assignment Operator ??= เพื่อการกำหนดค่าใหม่ให้ตัวแปรที่เก็บค่า null หรือ undefined อย่างมีประสิทธิภาพ โอเปอเรเตอร์นี้เป็นทางลัดที่สะดวกสำหรับการกำหนดค่าลงตัวแปรเมื่อค่าเฉพาะนั้นเป็น null หรือ undefined

การใช้งานพื้นฐาน

ตัวดำเนินการกำหนดค่า Nullish Coalescing ทำงานดังนี้:

• หากตัวแปรเป็น null หรือ undefined จะกำหนดค่าที่อยู่ด้านขวามือ
• หากตัวแปรไม่ใช่ null และ undefined จะไม่มีการทำใดๆ และค่าปัจจุบันยังคงอยู่

ไวยากรณ์

ไวยากรณ์พื้นฐานของตัวดำเนินการกำหนดค่า Nullish Coalescing มีดังนี้:

1x ??= y;

• x จะถูกกำหนดค่าให้กับ y หาก x คือ null หรือ undefined
• หาก x มีค่าอยู่แล้ว (ไม่ใช่ null หรือ undefined) ค่าของ x จะไม่ถูกเปลี่ยนแปลง

ตัวอย่าง

ลองดูตัวอย่างพื้นฐานของตัวดำเนินการกำหนดค่า nullish coalescing

1let userName = null;
2let defaultName = "Guest";
3
4// Since userName is null, defaultName is assigned
5userName ??= defaultName;
6
7console.log(userName);  // "Guest"

• ในโค้ดนี้ เนื่องจาก userName คือ null ค่า defaultName จึงถูกกำหนดค่า

ถัดไปคือตัวอย่างที่ค่าของตัวแปรไม่ใช่ null หรือ undefined

1let userName = "Alice";
2let defaultName = "Guest";
3
4// Since userName is "Alice", nothing is assigned
5userName ??= defaultName;
6
7console.log(userName);  // "Alice"

• ในกรณีนี้ เนื่องจาก "Alice" ถูกตั้งค่าให้กับ userName อยู่แล้ว จึงไม่มีการกำหนดค่าใดๆ

การเปรียบเทียบกับโอเปอเรเตอร์กำหนดค่าอื่นๆ

JavaScript มีโอเปอเรเตอร์ที่ใช้กำหนดค่าอื่นๆ อีกหลายตัว โดยเฉพาะความแตกต่างระหว่าง Logical OR Assignment Operator (||=) นั้นสำคัญ

1let value = 0;
2value ||= 10;  // Assign 10 if value is falsy
3console.log(value);  // 10

ตัวดำเนินการกำหนดค่า OR เชิงตรรกะจะกำหนดค่าแม้เมื่อพบค่าที่เป็น falsy เช่น false, 0, หรือสตริงว่าง ("") ในขณะที่ตัวดำเนินการกำหนดค่า Nullish Coalescing จะทำงานเฉพาะเมื่อค่าเป็น null หรือ undefined

1let value = 0;
2value ??= 10;
3// Since value is neither null nor undefined,
4// nothing is assigned
5console.log(value);  // 0

เนื่องจากตัวดำเนินการกำหนดค่า Nullish Coalescing ทำงานเฉพาะเมื่อค่าเป็น null หรือ undefined จึงมีประโยชน์มากเมื่อคุณต้องการเก็บรักษาค่า เช่น 0 หรือ false

ตัวอย่างการใช้งานในโลกจริง

ตัวอย่างการใช้งานจริงของตัวดำเนินการกำหนดค่าแบบรวมศูนย์สำหรับกรณีไม่ได้ตั้งค่าอาจเป็นดังนี้:

1. การตั้งค่าขั้นต้น

   มีประโยชน์สำหรับการตั้งค่าขั้นต้นเมื่อค่าจากการป้อนของผู้ใช้หรือการตอบกลับ API อาจเป็น null หรือ undefined

1let userSettings = {
2    theme: null,
3    notifications: true
4};
5
6// Since theme is null, "light" is assigned
7userSettings.theme ??= "light";
8
9console.log(userSettings.theme);  // "light"

2. การจัดการพารามิเตอร์ที่เป็นตัวเลือก

   สามารถใช้เพื่อดำเนินการค่าเริ่มต้นเมื่อไม่มีการระบุอาร์กิวเมนต์ของฟังก์ชัน

1function greet(name) {
2    name ??= "Guest";
3    console.log(`Hello, ${name}!`);
4}
5
6greet();  // "Hello, Guest!"
7greet("Alice");  // "Hello, Alice!"

สรุป

ตัวดำเนินการกำหนดค่า Nullish Coalescing (??=) กำหนดค่าเฉพาะเมื่อค่าฝั่งซ้ายเป็น null หรือ undefined ทำให้โค้ดกระชับขึ้นและช่วยป้องกันการกำหนดค่าที่ไม่ตั้งใจ โดยเฉพาะเมื่อจัดการกับค่าที่ "falsy" เช่น 0 หรือ false การใช้งานนี้อาจเหมาะสมกว่าการใช้ตัวดำเนินการ OR แบบดั้งเดิม (||=)

ด้วยการใช้ตัวดำเนินการนี้ คุณสามารถสร้างโค้ดที่มีความทนทานและอ่านได้ง่ายขึ้น

คุณสามารถติดตามบทความข้างต้นโดยใช้ Visual Studio Code บนช่อง YouTube ของเรา กรุณาตรวจสอบช่อง YouTube ด้วย

YouTube Video