Menu

JavaScript Nullish Coalescing (??) Operatörü

?? operatörü varsayılan değeri yalnızca değer null ya da undefined olduğunda devreye sokar — ve bu yüzden çoğu gerçek senaryoda || operatöründen çok daha güvenlidir.

Daha Akıllı Bir Varsayılan Değer

JavaScript'te varsayılan değer atamak için uzun zamandır bilinen bir kestirme yol var: value || fallback. Çoğu zaman işini görür, ancak içinde gizli bir tuzak barındırır — falsy olan her değeri eksikmiş gibi kabul eder. 0, '' ve false gerçek cevap olsalar bile fallback devreye girer.

İşte nullish coalescing operatörü ?? tam da bu sorunu çözer. Yalnızca değer null ya da undefined olduğunda yedek değere düşer:

index.js
Output
Click Run to see the output here.

0 ve '' hayatta kalır. null ile undefined kalmaz. Operatörün tüm olayı bu kadar.

|| Neden Yetmiyor?

İşte ?? operatörünün tam olarak önlemek için tasarlandığı klasik hata:

index.js
Output
Click Run to see the output here.

Kullanıcı ses seviyesini 0 (yani sessiz) yapmak ve takma adı boş bırakmak istedi. Ama || "değer yok" ile "falsy değer" ayrımını yapamadığı için ikisi de sessizce ezildi.

Çözüm, yerine ?? kullanmak:

index.js
Output
Click Run to see the output here.

Artık 0 ve '' değerleri olduğu gibi geçiyor; sadece gerçekten eksik olan alanlara varsayılan değer atanıyor. Çoğu zaman istediğin şey tam olarak budur.

Mantığı Kafanda Oturtalım

?? tek bir soru sorar: sol taraf null veya undefined mı? Başka hiçbir şey onu ilgilendirmez.

Sol değerleft || right sonuculeft ?? right sonucu
nullsağsağ
undefinedsağsağ
0sağsol (0)
''sağsol ('')
falsesağsol (false)
NaNsağsol (NaN)
herhangi bir nesnesolsol

Verilerinde anlamlı falsy değerler varsa ?? kullan. Gerçekten tüm falsy değerleri (kısa stringler, sıfır sayımları vb.) elemek istiyorsan || tercih et — böyle durumlar var, ama insanların sandığı kadar sık karşımıza çıkmaz.

Kısa Devre (Short-Circuit) Davranışı

|| ve && gibi ?? operatörü de kısa devre yapar. Sol taraf nullish değilse sağ taraf hiç çalıştırılmaz:

index.js
Output
Click Run to see the output here.

expensiveDefault() yalnızca bir kez çalışır — sadece b için. Bu davranış, yedek değerin bir fonksiyon çağrısı, ağ isteği ya da gerektiğinde atlamak isteyeceğin herhangi bir işlem olduğunda oldukça işine yarar.

Optional Chaining ile Birlikte Kullanımı

?? ve ?. operatörleri ES2020 ile birlikte hayatımıza girdi ve birbirini tamamlayacak şekilde tasarlandı. Optional chaining, eksik olma ihtimali olan bir yolu adım adım izler ve herhangi bir adım yoksa undefined döner; nullish coalescing de devreye girip makul bir varsayılan değer atar:

index.js
Output
Click Run to see the output here.

Bu ikili olmadan aynı kod, çirkin && zincirlerine ya da try/catch bloklarına dönüşüyor. Bunlarla birlikte güvenli erişim ve mantıklı varsayılan değerler tek satıra sığıyor.

Nullish Atama: ??=

a ??= b ifadesi, b değerini a'ya yalnızca a değeri null veya undefined olduğunda atar. Bu, logical nullish assignment operatörüdür ve kısa devre (short-circuit) mantığıyla çalışır — yani a'nın zaten bir değeri varsa sağ taraf hiç değerlendirilmez.

index.js
Output
Click Run to see the output here.

verbose: false ve retries: 0 değerlerinin olduğu gibi kaldığına dikkat edin — ??= yalnızca gerçekten eksik olanı dolduruyor. Aynı şeyi ||= ile yapsaydık, ikisini de ezip geçerdi.

Öncelik ve parantez kuralı

?? operatörü, parantez kullanmadan || veya && ile aynı ifadede yer almayı bilinçli olarak reddeder. Aşağıdaki kod SyntaxError fırlatır:

const x = a || b ?? c;   // SyntaxError

Dil tasarımcıları, öncelik sırasının yeterince kafa karıştırıcı olduğuna karar vermiş ve bunu netleştirmeni zorunlu kılmışlar. Parantez eklediğinde sorun kalmıyor:

index.js
Output
Click Run to see the output here.

Farklı gruplamalar, farklı sonuçlar doğurur. Parantezler süs değil; hem kodu sonradan okuyacak kişiye hem de parser'a ne demek istediğinizi anlatır.

Varsayılan Parametre ile Aynı Şey Değil

Fonksiyon imzasındaki varsayılan parametrelerin kendine has bir kuralı vardır: yalnızca argüman undefined olduğunda devreye girerler, null olduğunda değil. Bu, null ve undefined değerlerini aynı kefeye koyan ?? operatöründen ince ama önemli bir farktır.

index.js
Output
Click Run to see the output here.

Eğer null değerinin de varsayılan değeri tetiklemesini istiyorsan, fonksiyonun içinde ?? kullanabilirsin:

index.js
Output
Click Run to see the output here.

Küçük bir ayrım ama bir API size "değer atanmamış" anlamında null döndürdüğünde kolayca tuzağa düşebilirsiniz.

?? Operatörünü Ne Zaman Kullanmalı?

Aksini gerektiren özel bir durumunuz yoksa varsayılan operatörünüz ?? olsun. Çünkü verinin gerçek dünyadaki davranışına en çok uyan o: 0, '' ve false çoğu zaman korunması gereken gerçek değerlerdir; yalnızca gerçekten eksik olan veri bir yedek değeri hak eder. || operatörünü ise herhangi bir falsy değerin yerine varsayılan atamak istediğiniz durumlara saklayın.

Sırada: Sınıflar

Nesneler ve diziler konusu burada bitiyor — artık veri yapılarını güvenli biçimde kurup içinde gezinmek için gereken araçlara sahipsiniz. Bir sonraki bölümde davranışı organize etmeye geçiyoruz: sınıflar, kalıtım ve bunların altında yatan prototip sistemi.

Sıkça Sorulan Sorular

JavaScript'te nullish coalescing operatörü nedir?

?? operatörü, sol taraftaki değer yalnızca null veya undefined olduğunda sağ taraftaki değeri döndürür. Diğer tüm durumlarda sol taraftaki değeri olduğu gibi bırakır. value ?? fallback kalıbı, 0 ya da '' gibi falsy ama geçerli değerleri yanlışlıkla ezmeden varsayılan atamanın en temiz yoludur.

?? ile || arasındaki fark nedir?

|| operatörü tüm falsy değerlerde — yani 0, '', false, NaN, null, undefined — yedek değere geçer. ?? ise sadece null ve undefined için devreye girer. Eğer verinizde 0 veya boş string geçerli bir değerse ?? kullanmalısınız. Gerçekten tüm falsy değerleri reddetmek istiyorsanız || hâlâ doğru tercihtir.

Nullish coalescing'i optional chaining ile birlikte kullanabilir miyim?

Evet, hatta bu ikisi en çok birlikte kullanılan kombinasyondur. user?.settings?.theme ?? 'light' ifadesi zinciri güvenle dolaşır, aradaki herhangi bir değer eksikse undefined üretir ve ardından 'light' varsayılanını devreye alır. Zaten ?? ve ?. ES2020 ile tam olarak bu kullanım için birlikte geldi.

??= operatörü ne işe yarar?

a ??= b ifadesi, a şu an null veya undefined ise b değerini a'ya atar. Bu logical nullish assignment operatörüdür — a = a ?? b ifadesinin kısa yazımıdır, ama kısa devre yapar: a'nın zaten bir değeri varsa sağ taraf hiç değerlendirilmez. Özellikle options nesnelerinde eksik alanları doldururken çok işe yarar.

Coddy ile kodlamayı öğren

BAŞLA