Operator Nullish Coalescing di TypeScript

Dalam artikel ini, kami akan menjelaskan Operator Nullish Coalescing di TypeScript.

YouTube Video

Operator Nullish Coalescing di TypeScript

Operator nullish coalescing (??) di TypeScript mirip dengan evaluasi short-circuit JavaScript tetapi lebih jelas digunakan untuk memberikan nilai pengganti hanya ketika sisi kiri adalah null atau undefined. Operator ini memungkinkan Anda untuk dengan mudah memeriksa apakah suatu nilai adalah null atau undefined dan menetapkan nilai default sesuai kebutuhan.

Operator nullish coalescing (??) mengembalikan nilai di sisi kanan hanya jika sisi kiri adalah null atau undefined. Ini berarti nilai seperti false, string kosong, atau angka 0 tetap tidak berubah. Ini adalah perbedaan besar dari operator logika OR tradisional (||). Operator ini diperkenalkan di TypeScript 3.7.

Sintaks Dasar

1let result = value ?? defaultValue;

• value: Objek yang diperiksa apakah null atau undefined
• defaultValue: Nilai yang dikembalikan jika value adalah null atau undefined

Contoh Penggunaan

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

Di sini, fungsi getUserName mengembalikan "Default User" jika userName adalah null atau undefined, jika tidak, fungsi tersebut mengembalikan nilai dari userName.

Perbedaan dari operator logika OR

Operator logika OR memperlakukan nilai seperti false, 0, dan "" (string kosong) sebagai "falsy," seperti halnya null dan undefined. Di sisi lain, operator nullish coalescing hanya menggunakan null dan undefined untuk pengganti.

Contoh operator logika 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

Contoh operator 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

Memilih antara operator logika OR dan operator nullish coalescing tergantung pada apakah 0 dan string kosong dapat diterima. Sebagai contoh, jika Anda ingin menjaga usia pengguna tetap 0, Anda perlu menggunakan operator nullish coalescing.

Kombinasi dengan Tipe

Anda dapat meningkatkan kekuatan kode Anda dengan memanfaatkan keamanan tipe TypeScript yang dikombinasikan dengan operator nullish coalescing. Dalam contoh berikut, nilai default digunakan ketika properti tertentu adalah null atau 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

• Dalam antarmuka User, age adalah number | null, yang memungkinkan null atau undefined sebagai nilainya.
• Fungsi displayUserInfo mengembalikan "Anonymous" jika name adalah null atau undefined, dan 18 jika age adalah null atau undefined.

Ringkasan

Operator nullish coalescing membantu menetapkan nilai default hanya ketika nilai tersebut adalah null atau undefined. Berbeda dengan operator logika OR tradisional, operator ini tidak memperlakukan false, 0, atau string kosong sebagai "falsy," sehingga sangat berguna untuk menjaga nilai-nilai ini. Selain itu, menggabungkannya dengan sistem tipe TypeScript memungkinkan untuk membuat kode yang lebih kuat dan mudah dibaca.

Dengan menggunakan operator nullish coalescing secara efektif, Anda dapat menulis logika untuk menetapkan nilai default secara ringkas sambil mengurangi pemeriksaan null yang tidak perlu.

Operator Nullish Coalescing Assignment di TypeScript

Operator nullish coalescing assignment (??=) adalah operator yang relatif baru yang diperkenalkan di TypeScript, menyediakan metode yang praktis untuk menetapkan nilai hanya jika variabel tersebut adalah null atau undefined. Di sini, kami akan menjelaskan bagaimana operator ini bekerja, dalam situasi apa ini efektif, dan memberikan contoh dengan kode.

Apa itu Operator Nullish Coalescing Assignment

Operator penugasan nullish coalescing adalah operator penugasan yang didasarkan pada operator nullish coalescing. Operator ini digunakan untuk menetapkan nilai baru hanya jika variabel tersebut adalah null atau 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"

Dengan menggunakan operator ini, Anda dapat menulis logika "tetapkan jika variabel undefined atau null" dengan lebih ringkas.

Perbandingan dengan Metode Penugasan Tradisional

Tanpa operator penugasan nullish coalescing, Anda perlu menggunakan pernyataan if atau operator ternary untuk mencapai perilaku yang sama. Mari kita bandingkan dengan metode penugasan tradisional.

Metode konvensional

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

Metode menggunakan operator ternary

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

Metode ringkas menggunakan operator ??=

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

Operator penugasan nullish coalescing jauh lebih sederhana dan lebih mudah dibaca dibandingkan dengan metode penugasan lainnya, meningkatkan keterbacaan kode.

Contoh Khusus Penggunaan ??=

Operator penugasan nullish coalescing berguna dalam berbagai skenario, seperti menginisialisasi properti objek dan menetapkan nilai default. Berikut adalah beberapa contoh spesifik.

Inisialisasi properti objek

 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" }

Inisialisasi array

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

Pengaturan nilai default untuk argumen fungsi

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!"

Catatan dan Kendala

Operator penugasan nullish coalescing sangat berguna, tetapi ada beberapa hal yang perlu diperhatikan.

• Hanya menargetkan null dan undefined: Operator ini hanya menetapkan nilai jika nilainya adalah null atau undefined. Misalnya, string kosong (""), 0, dan false tidak menjadi target.

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)

• Menggabungkan dengan operator lain: Menggunakan operator penugasan nullish coalescing dengan operator lain dapat menghasilkan hasil yang tidak diinginkan. Sangat penting untuk memahami perbedaan antara operator ini dan operator penugasan logika 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"

Kode Contoh

 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]

Dengan menggunakan operator penugasan nullish coalescing, Anda dapat menghilangkan kode yang tidak perlu dan menulis kode TypeScript yang lebih mulus dan elegan.

Ringkasan

Operator penugasan nullish coalescing (??=) adalah salah satu operasi penugasan yang sederhana dan efisien dalam TypeScript. Ini sangat berguna ketika Anda perlu memeriksa null atau undefined saat menetapkan nilai default. Dibandingkan dengan pernyataan if tradisional atau operator ternary, ini membuat kode lebih ringkas dan mudah dibaca, dan sebaiknya digunakan secara aktif dalam pengembangan di masa depan.

Anda dapat mengikuti artikel di atas menggunakan Visual Studio Code di saluran YouTube kami. Silakan periksa juga saluran YouTube kami.

YouTube Video