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 sayısı gibi değerlerin olduğu gibi değerlendirilmesine olanak tanır. 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

Temel sözdizimi şu şekildedir:.

1let result = value ?? defaultValue;

• value, null veya undefined için kontrol edilen hedeftir.
• defaultValue, value null veya undefined olduğunda döndürülen değerdir.

Ö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ı

Nullish coalescing operatörü ile mantıksal VEYA operatörü arasında önemli bir fark vardır. 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

• Görüldüğü gibi, mantıksal VEYA operatörü, değer 0 olduğunda bile varsayılan değer olan 18'i döndürür.

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

• Diğer yandan, nullish coalescing operatörü, değer 0 olduğunda bile orijinal değeri döndürür.

• Mantıksal VEYA operatörü ile nullish coalescing operatörü arasındaki seçim, 0 veya boş bir dizenin kabul edilebilir olup olmadığı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;
 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 arayüzünde age özelliği bir number, null veya undefined olabilir, bu nedenle varsayılan 18 değerini atamak için nullish coalescing operatörü kullanılır.
• Bu arada, name özelliği yalnızca string değerine izin verir, bu nedenle değer olduğu gibi kullanılır.

Ö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ş dizeleri 'yanlış' olarak değerlendirmez, bu da bu değerleri korumak istediğinizde özellikle kullanışlı hale getirir. 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,
3                              // so the new value is assigned
4
5console.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

if ifadesi kullanılarak şu şekilde yazılabilir:.

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

Üçlü operatör kullanarak yöntem

Alternatif olarak, üçlü (ternary) operatör kullanılarak şu şekilde yazılabilir:.

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"

Nullish coalescing atama operatörünü kullanan öz bir yöntem

Diğer yandan, nullish coalescing atama operatörü kullanılarak bu şekilde yazılabilir:.

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

Görüldüğü gibi, nullish coalescing atama operatörü diğer atama yöntemlerine kıyasla çok daha basit ve okunabilirdir, bu da kod netliğ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 null ve undefined hedeflenir..

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)

• Bu operatör, değer yalnızca null veya undefined olduğunda atama işlemi yapar. Örneğin, boş bir dize (""), 0 veya false gibi değerler hedeflenmez.

Diğer operatörlerle kullanırken dikkatli olun..

 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"

• Nullish coalescing atama operatörü diğer operatörlerle kullanıldığında beklenmedik sonuçlar üretebilir. Bunun ile mantıksal VEYA atama operatörü arasındaki farkı anlamak özellikle önemlidir.

Ö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 ifadelerine veya üçlü operatörlere kıyasla, kod daha öz ve okunabilir hale gelir.

Yukarıdaki makaleyi, YouTube kanalımızda Visual Studio Code'u kullanarak takip edebilirsiniz. Lütfen YouTube kanalını da kontrol edin.

YouTube Video