TypeScript'te Boş Birleştirme Operatörü
Bu makalede, TypeScript'te Boş Birleştirme Operatörünü açıklayacağız.
YouTube Video
TypeScript'te Boş Birleştirme Operatörü
TypeScript'teki boş birleştirme operatörü (??), JavaScript'in kısa devre değerlendirmesine benzer ancak sol taraf null veya undefined olduğunda yalnızca bir yedek değer sağlamak için daha açık bir şekilde kullanılır. Bu operatör, bir değerin null veya undefined olup olmadığını kolayca kontrol etmenizi ve gerektiğinde varsayılan bir değer ayarlamanızı sağlar.
Boş birleştirme operatörü (??), yalnızca sol taraf null veya undefined ise sağdaki değeri döner. Bu, false, boş bir dize veya 0 gibi değerlerin değişmeden kalacağı anlamına gelir. Bu, geleneksel mantıksal VEYA operatöründen (||) önemli bir farktır. Bu operatör, TypeScript 3.7 ile tanıtıldı.
Temel Sözdizimi
1let result = value ?? defaultValue;value: Null veya undefined olup olmadığını kontrol etmek için kullanılan değişkendefaultValue:valuenull veya undefined ise dönen değer
Örnek Kullanım
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
Burada, getUserName fonksiyonu, userName null veya undefined ise "Default User" döner, aksi takdirde userName değerini döner.
Mantıksal VEYA operatöründen farkı
Mantıksal VEYA operatörü false, 0 ve "" (boş string) gibi değerleri, null ve undefined gibi "yanlış" olarak değerlendirir. Öte yandan, boş birleştirme operatörü yalnızca yedekleme için null ve undefined kullanır.
Mantıksal VEYA operatörü örneği
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
Nullish birleştirme operatörü örneği
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
Mantıksal VEYA operatörü ile nullish birleştirme operatörü arasında seçim yapmak, 0 ve boş stringlerin kabul edilebilir olup olmamasına bağlıdır. Örneğin, bir kullanıcının yaşını 0 olarak tutmak istiyorsanız, nullish birleştirme operatörünü kullanmalısınız.
Türlerle Birleştirme
TypeScript'in tür güvenliğini, boş birleştirme operatörü ile birleştirerek kodunuzun sağlamlığını artırabilirsiniz. Aşağıdaki örnekte, bazı özellikler null veya undefined olduğunda varsayılan değerler kullanılır.
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
Userarayüzünde,agenumber | nullolarak tanımlanmıştır, bu danullveyaundefineddeğerlerini almasına izin verir.displayUserInfofonksiyonu,namenull veya undefined ise"Anonymous",agenull veya undefined ise18döner.
Özet
Nullish birleştirme operatörü, yalnızca değer null veya undefined olduğunda varsayılan bir değer ayarlamanıza yardımcı olur. Geleneksel mantıksal VEYA operatöründen farklı olarak, false, 0 veya boş stringleri "yanlış" olarak değerlendirmez ve bu değerleri korumak için özellikle kullanışlı hale gelir. Buna ek olarak, TypeScript'in tip sistemiyle birleştirilmesi, daha sağlam ve okunabilir bir kod oluşturmayı sağlar.
Nullish coalescing operatörünü etkili bir şekilde kullanarak, gereksiz null kontrollerini azaltırken varsayılan değerleri ayarlamak için kısa ve öz mantık yazabilirsiniz.
TypeScript'te Nullish Coalescing Atama Operatörü
Nullish coalescing atama operatörü (??=), TypeScript'e yeni eklenen bir operatördür ve bir değişkenin yalnızca null veya undefined olduğu durumlarda değer atamak için kullanışlı bir yöntem sunar. Burada, bu operatörün nasıl çalıştığını, hangi durumlarda etkili olduğunu açıklayacağız ve kodla örnekler vereceğiz.
Nullish Coalescing Atama Operatörü Nedir?
Nullish birleştirme atama operatörü, nullish birleştirme operatörüne dayalı bir atama operatörüdür. Bu operatör, bir değişken null veya undefined ise yeni bir değer atamak için kullanılır.
1let variable: string | null = null;
2variable ??= "Default Value"; // The variable is null, so the new value is assigned
3console.log(variable); // Output: "Default Value"
Bu operatörü kullanarak, "değişken undefined veya null ise atama yap" mantığını daha kısa ve öz bir şekilde yazabilirsiniz.
Geleneksel Atama Yöntemleriyle Karşılaştırma
Nullish birleştirme atama operatörü olmadan, aynı davranışı elde etmek için bir if ifadesi veya üçlü operatör kullanmanız gerekirdi. Geleneksel atama yöntemleriyle karşılaştıralım.
Geleneksel yöntem
1let variable: string | null = null;
2if (variable === null || variable === undefined) {
3 variable = "Default Value";
4}
5console.log(variable); // Output: "Default Value"
Üçlü operatör kullanarak yöntem
1let variable: string | null = null;
2variable = variable ?? "Default Value";
3console.log(variable); // Output: "Default Value"
??= operatörünü kullanarak özlü yöntem
1let variable: string | null = null;
2variable ??= "Default Value";
3console.log(variable); // Output: "Default Value"
Nullish birleştirme atama operatörü, diğer atama yöntemlerine göre çok daha basit ve okunabilir olup, kod okunabilirliğini artırır.
??= Kullanımına Dair Özel Örnekler
Nullish birleştirme atama operatörü, nesne özelliklerini başlatma ve varsayılan değerler ayarlama gibi çeşitli senaryolarda faydalıdır. İşte bazı özel örnekler.
Nesne özelliklerinin başlatılması
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" }
Dizilerin başlatılması
1let numbers: number[] | null = null;
2numbers ??= []; // Assign an empty array if numbers is null
3
4numbers.push(1);
5console.log(numbers); // Output: [1]
Fonksiyon argümanları için varsayılan değerlerin ayarlanması
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!"
Notlar ve Sınırlamalar
Nullish birleştirme atama operatörü çok faydalı olsa da bazı dikkat edilmesi gereken noktalar vardır.
- Yalnızca
nullveundefinedhedeflenir: Bu operatör, yalnızca değernullveyaundefinedise atama yapar. Örneğin, boş stringler (""),0vefalsehedef alınmaz.
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)
- Diğer operatörlerle birleştirme: Nullish birleştirme atama operatörünü diğer operatörlerle kullanmak beklenmeyen sonuçlara yol açabilir. Bunun ile mantıksal VEYA atama operatörü arasındaki farkı anlamak özellikle önemlidir.
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"
Örnek Kod
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 birleştirme atama operatörünü kullanarak gereksiz kodları ortadan kaldırabilir ve daha akıcı, şık TypeScript kodu yazabilirsiniz.
Özet
Nullish coalescing atama operatörü (??=), TypeScript'te basit ve verimli atama işlemlerinden biridir. Varsayılan değerler ayarlanırken null veya undefined kontrolleri yapmak gerektiğinde özellikle yararlıdır. Geleneksel if ifadeleri veya üçlü operatörlere kıyasla kodu daha kısa ve okunabilir hale getirir ve gelecekteki geliştirmelerde aktif olarak kullanılmalıdır.
Yukarıdaki makaleyi, YouTube kanalımızda Visual Studio Code'u kullanarak takip edebilirsiniz. Lütfen YouTube kanalını da kontrol edin.