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 apakahnull
atauundefined
.defaultValue
adalah nilai yang dikembalikan saatvalue
adalahnull
atauundefined
.
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 adalah0
.
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 tetap0
, 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
, propertiage
dapat berupanumber
,null
, atauundefined
, sehingga operator penggabungan nullish digunakan untuk menetapkan nilai default18
. - Sementara itu, properti
name
hanya menerimastring
, sehingga nilainya digunakan apa adanya.
Ringkasan
- Operator nullish coalescing membantu menetapkan nilai default hanya ketika nilai tersebut adalah
null
atauundefined
. Berbeda dengan operator OR logis tradisional, ini tidak memperlakukanfalse
,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
atauundefined
. Sebagai contoh, nilai seperti string kosong (""
),0
, ataufalse
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.