ตัวดำเนินการ Nullish Coalescing ใน TypeScript

ในบทความนี้ เราจะอธิบายตัวดำเนินการ Nullish Coalescing ใน TypeScript

YouTube Video

ตัวดำเนินการ Nullish Coalescing ใน TypeScript

ตัวดำเนินการ nullish coalescing (??) ใน TypeScript คล้ายกับการตรวจสอบลัดใน JavaScript แต่ถูกใช้ในลักษณะที่ชัดเจนกว่าเพื่อให้ค่าเริ่มต้น (fallback) เฉพาะเมื่อด้านซ้ายเป็น null หรือ undefined ตัวดำเนินการนี้ช่วยให้คุณตรวจสอบค่าที่เป็น null หรือ undefined ได้ง่ายและตั้งค่าพื้นฐานตามที่ต้องการ

ตัวดำเนินการ nullish coalescing (??) จะคืนค่าฝั่งขวาเมื่อฝั่งซ้ายเป็น null หรือ undefined เท่านั้น ซึ่งหมายความว่าค่าต่าง ๆ เช่น false, สตริงว่าง, หรือเลข 0 จะไม่ถูกเปลี่ยนแปลง นี่เป็นความแตกต่างที่สำคัญจากตัวดำเนินการ OR แบบดั้งเดิม (||) ตัวดำเนินการนี้ถูกเพิ่มใน TypeScript เวอร์ชัน 3.7

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

1let result = value ?? defaultValue;

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

ตัวอย่างการใช้งาน

1function getUserName(userName: string | null | undefined): string {
2  return userName ?? "Default User";
3}
4
5console.log(getUserName("Alice"));  // Output: Alice
6console.log(getUserName(null));     // Output: Default User
7console.log(getUserName(undefined)); // Output: Default User

ในที่นี้ ฟังก์ชัน getUserName จะคืนค่า "Default User" หาก userName เป็น null หรือ undefined มิฉะนั้นจะคืนค่าของ userName

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

ตัวดำเนินการ OR จะถือว่าค่าต่าง ๆ เช่น false, 0, และ "" (สตริงว่าง) เป็น "falsy" เช่นเดียวกับ null และ undefined ในทางกลับกัน ตัวดำเนินการ nullish coalescing ใช้เพียง null และ undefined สำหรับ fallback

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

1function getUserAge(age: number | null | undefined): number {
2  return age || 18;  // `0` also applies the default value
3}
4
5console.log(getUserAge(25));  // Output: 25
6console.log(getUserAge(0));   // Output: 18
7console.log(getUserAge(null)); // Output: 18

ตัวอย่างของตัวดำเนินการ nullish coalescing

1function getUserAge(age: number | null | undefined): number {
2  return age ?? 18;  // `0` does not apply the default value
3}
4
5console.log(getUserAge(25));  // Output: 25
6console.log(getUserAge(0));   // Output: 0
7console.log(getUserAge(null)); // Output: 18

การเลือกใช้งานระหว่างตัวดำเนินการ OR และตัวดำเนินการ nullish coalescing ขึ้นอยู่กับว่า 0 และสตริงว่างนั้นเป็นค่าที่ใช้งานได้หรือไม่ ตัวอย่างเช่น หากคุณต้องการเก็บอายุของผู้ใช้เป็น 0 คุณจำเป็นต้องใช้ตัวดำเนินการ nullish coalescing

การผสมผสานกับชนิดข้อมูล (Types)

คุณสามารถเพิ่มความแข็งแรงให้กับโค้ดของคุณได้ด้วยการใช้ข้อดีของความปลอดภัยของชนิดข้อมูลใน TypeScript ควบคู่กับตัวดำเนินการ nullish coalescing ในตัวอย่างต่อไปนี้ ค่าพื้นฐานจะถูกใช้เมื่อคุณสมบัติบางอย่างเป็น null หรือ undefined

 1interface User {
 2  name: string;
 3  age?: number | null;
 4}
 5
 6function displayUserInfo(user: User): string {
 7  const userName: string = user.name ?? "Anonymous";
 8  const userAge: number = user.age ?? 18;
 9  return `Name: ${userName}, Age: ${userAge}`;
10}
11
12const user1: User = { name: "John", age: null };
13const user2: User = { name: "Doe" };
14
15console.log(displayUserInfo(user1)); // Output: Name: John, Age: 18
16console.log(displayUserInfo(user2)); // Output: Name: Doe, Age: 18

• ในอินเตอร์เฟซ User ของ TypeScript, age คือ number | null ซึ่งอนุญาตให้ null หรือ undefined เป็นค่าได้
• ฟังก์ชัน displayUserInfo จะคืนค่า "Anonymous" หาก name เป็น null หรือ undefined และ 18 หาก age เป็น null หรือ undefined

สรุป

ตัวดำเนินการ nullish coalescing ช่วยตั้งค่าดีฟอลต์เมื่อค่าคือ null หรือ undefined เท่านั้น แตกต่างจากตัวดำเนินการ OR แบบดั้งเดิม ตัวดำเนินการนี้จะไม่ถือว่า false, 0, หรือสตริงว่างเป็น "falsy," ทำให้มีประโยชน์ในการเก็บค่าต่าง ๆ เหล่านี้ไว้ นอกจากนี้ การผสมผสานกับระบบชนิดของ TypeScript ทำให้สามารถสร้างโค้ดที่แข็งแกร่งและอ่านได้ง่ายขึ้น

ด้วยการใช้ตัวดำเนินการ nullish coalescing อย่างมีประสิทธิภาพ คุณสามารถเขียนลอจิกสำหรับการตั้งค่าเริ่มต้นได้อย่างกระชับ พร้อมทั้งลดการตรวจสอบ null ที่ไม่จำเป็น

ตัวดำเนินการ Nullish Coalescing Assignment ใน TypeScript

ตัวดำเนินการ nullish coalescing assignment (??=) เป็นตัวดำเนินการใหม่ล่าสุดที่ถูกนำมาใช้ใน TypeScript ซึ่งช่วยให้สามารถกำหนดค่าได้สะดวกเมื่อค่าของตัวแปรเป็น null หรือ undefined เท่านั้น ที่นี่ เราจะอธิบายวิธีการทำงานของตัวดำเนินการนี้ สถานการณ์ที่มันมีประสิทธิภาพ และให้ตัวอย่างพร้อมโค้ด

ตัวดำเนินการ Nullish Coalescing Assignment คืออะไร

ตัวดำเนินการกำหนดค่า nullish coalescing assignment operator เป็นตัวดำเนินการกำหนดค่าที่อิงกับตัวดำเนินการ nullish coalescing ตัวดำเนินการนี้ใช้สำหรับกำหนดค่าทดแทนใหม่เฉพาะกรณีที่ค่าของตัวแปรเป็น null หรือ undefined

1let variable: string | null = null;
2variable ??= "Default Value"; // The variable is null, so the new value is assigned
3console.log(variable); // Output: "Default Value"

ด้วยการใช้ตัวดำเนินการนี้ คุณสามารถเขียนลอจิก "กำหนดค่าเมื่อค่าตัวแปรเป็น undefined หรือ null" ได้กระชับมากยิ่งขึ้น

การเปรียบเทียบกับวิธีการกำหนดค่าแบบดั้งเดิม

หากไม่มีตัวดำเนินการ nullish coalescing assignment operator คุณจะต้องใช้คำสั่ง if หรือตัวดำเนินการ ternary เพื่อให้ได้พฤติกรรมเดียวกัน ลองเปรียบเทียบกับวิธีการกำหนดค่าแบบดั้งเดิม

วิธีการแบบดั้งเดิม

1let variable: string | null = null;
2if (variable === null || variable === undefined) {
3  variable = "Default Value";
4}
5console.log(variable); // Output: "Default Value"

วิธีการที่ใช้ตัวดำเนินการแบบเทอร์นารี

1let variable: string | null = null;
2variable = variable ?? "Default Value";
3console.log(variable); // Output: "Default Value"

วิธีการแบบย่อที่ใช้ตัวดำเนินการ ??=

1let variable: string | null = null;
2variable ??= "Default Value";
3console.log(variable); // Output: "Default Value"

ตัวดำเนินการ nullish coalescing assignment operator ใช้งานง่ายและอ่านเข้าใจกว่าการกำหนดค่าในวิธีอื่น ๆ ทำให้โค้ดอ่านง่ายขึ้น

ตัวอย่างเฉพาะของการใช้ ??=

ตัวดำเนินการ nullish coalescing assignment operator มีประโยชน์ในหลายสถานการณ์ เช่น การกำหนดค่าเริ่มต้นให้กับคุณสมบัติของวัตถุและการตั้งค่าดีฟอลต์ นี่คือตัวอย่างเฉพาะบางประการ

การกำหนดค่าเริ่มต้นของคุณสมบัติออบเจ็กต์

 1interface Config {
 2  theme?: string;
 3  language?: string;
 4}
 5
 6let config: Config = {};
 7config.theme ??= "light";  // Set the default "light" theme if none is specified
 8config.language ??= "en";  // Set the default "en" language if none is specified
 9
10console.log(config); // Output: { theme: "light", language: "en" }

การกำหนดค่าเริ่มต้นของอาเรย์

1let numbers: number[] | null = null;
2numbers ??= [];  // Assign an empty array if numbers is null
3
4numbers.push(1);
5console.log(numbers); // Output: [1]

การตั้งค่าค่าเริ่มต้นสำหรับอาร์กิวเมนต์ของฟังก์ชัน

1function greet(name?: string) {
2  name ??= "Guest";  // Set name to "Guest" if it is undefined or null
3  console.log(`Hello, ${name}!`);
4}
5
6greet();          // Output: "Hello, Guest!"
7greet("Alice");   // Output: "Hello, Alice!"

บันทึกและข้อจำกัด

ตัวดำเนินการ nullish coalescing assignment operator มีประโยชน์มาก แต่มีข้อควรระวังบางประการ

• ใช้ได้เฉพาะกับ null และ undefined: ตัวดำเนินการนี้จะกำหนดค่าเฉพาะเมื่อค่าที่ได้รับเป็น null หรือ undefined เช่น สตริงว่าง (""), 0, และ false จะไม่ถูกกำหนดค่า

1let str: string | null = "";
2str ??= "Default";
3console.log(str); // Output: "" (remains an empty string)
4
5let num: number | undefined = 0;
6num ??= 100;
7console.log(num); // Output: 0 (remains 0)

• การใช้งานร่วมกับตัวดำเนินการอื่น: การใช้ nullish coalescing assignment operator ร่วมกับตัวดำเนินการอื่นอาจส่งผลลัพธ์ที่ไม่คาดคิด เป็นสิ่งสำคัญอย่างยิ่งที่ต้องเข้าใจความแตกต่างระหว่างมันกับตัวดำเนินการกำหนดค่า OR

 1let value: string | null = null;
 2value ||= "Default";  // Targets not only "null" and "undefined" but also falsy values
 3console.log(value);  // Output: "Default"
 4
 5value = "";
 6value ||= "Default";  // An empty string is also targeted
 7console.log(value);  // Output: "Default"
 8
 9value = null;
10value ??= "Default";  // Targets only null or undefined
11console.log(value);  // Output: "Default"

โค้ดตัวอย่าง

 1let config: { theme?: string; language?: string } = {};
 2
 3// Use Nullish Coalescing Assignment to set default values
 4config.theme ??= "light";
 5config.language ??= "en";
 6
 7console.log(config); // Output: { theme: "light", language: "en" }
 8
 9let list: number[] | null = null;
10list ??= [];
11list.push(42);
12
13console.log(list); // Output: [42]

ด้วยการใช้ nullish coalescing assignment operator คุณสามารถลดโค้ดที่ไม่จำเป็นและเขียน TypeScript โค้ดที่ลื่นไหลและสวยงามยิ่งขึ้น

สรุป

ตัวดำเนินการกำหนดค่าแบบ nullish coalescing (??=) เป็นหนึ่งในการดำเนินการกำหนดค่าที่เรียบง่ายและมีประสิทธิภาพใน TypeScript มันมีประโยชน์อย่างยิ่งเมื่อคุณต้องการตรวจสอบค่า null หรือ undefined ขณะตั้งค่าค่าเริ่มต้น เมื่อเปรียบเทียบกับคำสั่ง if แบบดั้งเดิมหรือตัวดำเนินการ ternary จะทำให้โค้ดกระชับและอ่านง่ายขึ้น และควรนำมาใช้ในกระบวนการพัฒนาในอนาคตอย่างจริงจัง

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

YouTube Video