enesdmc

TechnologiesRepositoriesComponentsAIBlogEnglishGame

JavaScript’te değer ataması yaparken kullanılan iki önemli operatör ?? (Nullish Coalescing) ve || (Logical OR)’dur. Her iki operatör de alternatif değer sağlama amacı taşır, ancak kullanıldıkları durumlar ve değerlendirme şekilleri birbirinden farklıdır. Bu yazıda, bu iki operatörün nasıl çalıştığını, hangi durumlarda kullanılabileceğini ve aralarındaki farkları detaylıca inceleyeceğiz.

|| (Logical OR) Operatörü

|| operatörü, iki değeri değerlendirirken soldan sağa doğru ilerler ve ilk truthy değeri döndürür. Eğer tüm değerler falsy ise, sonuncu değer döner. JavaScript’te falsy kabul edilen değerler şunlardır:

• false
• 0
• "" (boş string)
• null
• undefined
• NaN

Bir örnekle inceleyelim:

const name = ""
const defaultName = "Guest"
const username = name || defaultName
 
console.log(username) // "Guest"

Bu örnekte, name değişkeni boş bir string olduğu için || operatörü, sağdaki defaultName değerini döndürür. Çünkü boş string ("") falsy bir değerdir.

Daha karmaşık bir örnek:

const config = {
  theme: "",
  language: null,
  notifications: false
}
 
const userTheme = config.theme || "dark"
const userLanguage = config.language || "en"
const userNotifications = config.notifications || true
 
console.log(userTheme)       // "dark"
console.log(userLanguage)    // "en"
console.log(userNotifications) // true

Burada config ayarlarında theme, language ve notifications için varsayılan değerler atanıyor. Ancak, || operatörü false, null, 0 ve "" gibi değerleri de falsy kabul ettiği için bu değerler varsayılanlarla değiştirilecektir. Bu da bazı durumlarda beklenmeyen sonuçlar doğurabilir.

?? (Nullish Coalescing) Operatörü

?? operatörü, yalnızca null ve undefined değerlerini kontrol eder. Eğer sol taraftaki değer null veya undefined ise, sağdaki değeri döner. Diğer falsy değerleri (örneğin 0, false, "") ise geçerli kabul eder ve onları döndürür.

const name = ""
const defaultName = "Guest"
const username = name ?? defaultName
 
console.log(username) // ""

Bu örnekte, name değişkeni boş bir string olsa bile ?? operatörü sağdaki değeri döndürmez. Çünkü boş string, null veya undefined değildir. Dolayısıyla name değeri döner.

Daha İleri Seviye Bir Örnek:

const config = {
  theme: "",
  language: null,
  notifications: false
}
 
const userTheme = config.theme ?? "dark"
const userLanguage = config.language ?? "en"
const userNotifications = config.notifications ?? true
 
console.log(userTheme)       // ""
console.log(userLanguage)    // "en"
console.log(userNotifications) // false

Bu örnekte, ?? operatörü sadece null ve undefined değerlerini dikkate aldığı için, theme boş bir string olsa bile bu değer kullanılır. Bu sayede kullanıcı tarafından özellikle boş bırakılmış değerler geçerli kalır.

|| ve ?? Operatörlerinin Farkları

İki operatör arasındaki temel fark, hangi değerlerin falsy veya nullish olarak değerlendirildiğidir:

• || operatörü, falsy kabul edilen her değeri (örn. 0, "", false, null, undefined) göz ardı eder ve sağdaki alternatifi döner.

• ?? operatörü ise sadece null ve undefined değerlerini göz ardı eder; diğer falsy değerleri geçerli kabul eder.

Bu fark, belirli değerlerin korunması gerektiği durumlarda önemli hale gelir:

const count = 0
 
const defaultCountWithOR = count || 5
const defaultCountWithNullish = count ?? 5
 
console.log(defaultCountWithOR)       // 5
console.log(defaultCountWithNullish)  // 0

Bu örnekte, count değeri 0 olduğunda || operatörü bu değeri falsy kabul eder ve sağdaki 5 değerini döner. Ancak ?? operatörü, 0’ı geçerli bir değer olarak kabul eder ve onu döner. Eğer 0’ı geçerli bir sonuç olarak kabul etmek istiyorsanız, ?? daha doğru bir seçim olacaktır.