enesdmc
➜ All Blogs

JavaScript’te ?? ve || Operatörlerinin Farkı

Oct 18
·
2024

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:

Bir örnekle inceleyelim:

|| Operatörü Kullanımı
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:

|| Operatörü Kullanımı
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.

?? Operatörü Kullanımı
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:

?? Operatörü Kullanımı
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:

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

?? ve || Operatörlerinin Farkı
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.