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.
||
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.
??
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.
İ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.