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 memungkinkan nilai seperti false, string kosong, atau angka 0 untuk dievaluasi sebagaimana adanya. Ini adalah perbedaan besar dari operator logika OR tradisional (||). Operator ini diperkenalkan di TypeScript 3.7.

Sintaks Dasar

Sintaksis dasarnya adalah sebagai berikut:.

1let result = value ?? defaultValue;

• value adalah target yang diperiksa apakah null atau undefined.
• defaultValue adalah nilai yang dikembalikan saat 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

Ada perbedaan penting antara operator penggabungan nullish dan operator OR logis. 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

• Seperti yang ditunjukkan, operator OR logis mengembalikan nilai default 18 bahkan ketika nilai tersebut adalah 0.

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

• Sebaliknya, operator penggabungan nullish mengembalikan nilai asli bahkan ketika nilainya 0.

• Pilihan antara operator OR logis dan operator penggabungan nullish bergantung pada apakah 0 atau 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;
 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

• Pada antarmuka User, properti age dapat berupa number, null, atau undefined, sehingga operator penggabungan nullish digunakan untuk menetapkan nilai default 18.
• Sementara itu, properti name hanya menerima string, sehingga nilainya digunakan apa adanya.

Ringkasan

• Operator nullish coalescing membantu menetapkan nilai default hanya ketika nilai tersebut adalah null atau undefined. Berbeda dengan operator OR logis tradisional, ini tidak memperlakukan false, 0, atau string kosong sebagai 'falsy', sehingga sangat berguna saat Anda ingin mempertahankan nilai-nilai tersebut. 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,
3                              // so the new value is assigned
4
5console.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

Menggunakan pernyataan if, ini dapat ditulis sebagai berikut:.

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

Metode menggunakan operator ternary

Sebagai alternatif, menggunakan operator ternary, ini dapat ditulis sebagai berikut:.

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"

Metode ringkas menggunakan operator penugasan penggabungan nullish.

Sebaliknya, menggunakan operator penugasan penggabungan nullish, ini dapat ditulis seperti ini:.

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

Seperti yang ditunjukkan, operator penugasan penggabungan nullish jauh lebih sederhana dan lebih mudah dibaca dibandingkan metode penugasan lainnya, meningkatkan kejelasan 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 null dan undefined yang ditargetkan..

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)

• Operator ini melakukan penugasan hanya ketika nilainya adalah null atau undefined. Sebagai contoh, nilai seperti string kosong (""), 0, atau false tidak ditargetkan.

Hati-hati saat menggunakannya dengan operator lain..

 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"

• Operator penugasan penggabungan nullish dapat menghasilkan hasil yang tidak diinginkan saat digunakan dengan operator lain. Sangat penting untuk memahami perbedaan antara operator ini dan operator penugasan logika OR.

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, kodenya menjadi lebih ringkas dan mudah dibaca.

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

YouTube Video