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