ตัวดำเนินการ 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

มีข้อแตกต่างที่สำคัญระหว่างตัวดำเนินการ coalescing nullish กับตัวดำเนินการ 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

• ดังแสดง ตัวดำเนินการ OR เชิงตรรกะจะคืนค่าดีฟอลต์ 18 แม้ว่าค่าจะเป็น 0

ตัวอย่างของตัวดำเนินการ 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

• ในทางกลับกัน ตัวดำเนินการ coalescing nullish จะคืนค่าต้นฉบับ แม้ว่ามันจะเป็น 0

• การเลือกใช้ระหว่างตัวดำเนินการ OR เชิงตรรกะและตัวดำเนินการ coalescing nullish ขึ้นอยู่กับว่า 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;
 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 คุณลักษณะ age สามารถเป็น number, null หรือ undefined ดังนั้นจึงใช้ตัวดำเนินการ coalescing nullish เพื่อกำหนดค่าดีฟอลต์เป็น 18
• ในขณะเดียวกัน คุณลักษณะ name อนุญาตเฉพาะ string ดังนั้นค่าจะถูกใช้ตามที่มันเป็น

สรุป

• ตัวดำเนินการ 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,
3                              // so the new value is assigned
4
5console.log(variable); // Output: "Default Value"

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

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

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

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

เมื่อใช้คำสั่ง if สามารถเขียนได้ดังนี้:

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

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

อีกทางหนึ่ง เมื่อใช้ตัวดำเนินการ ternary สามารถเขียนได้ดังนี้:

1let variable: string | null | undefined = undefined;
2variable = variable != null ? variable : "Default Value";
3// != null checks for both null and undefined
4// (intentional loose equality comparison)
5
6console.log(variable); // Output: "Default Value"

วิธีที่กระชับโดยใช้ตัวดำเนินการการกำหนดค่า coalescing nullish

ในทางกลับกัน เมื่อใช้ตัวดำเนินการการกำหนดค่า coalescing nullish สามารถเขียนได้ดังนี้:

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

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

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

ตัวดำเนินการ 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 เท่านั้นที่เป็นเป้าหมาย

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)

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

โปรดระวังเมื่อใช้ร่วมกับตัวดำเนินการอื่นๆ

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

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

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

 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