JavaScript ES6+ İpuçları #1: Nullish Coalescing Operatörü ile Doğru Varsayılan Değer Atama

JavaScript Nullish Coalescing Operator

TC39 üyelerinden Laurie Barth, CodeMash 2020’deki Human Readable JavaScript konuşmasında “Nullish coalescing operator” isimli yeni bir operatör tanıttı.

Operatör sıkı JavaScript takipçileri için pek yeni sayılmaz aslında. Fikir olarak ortaya atılmasının ve geliştirilmeye başlamasının iki seneden fazla mazisi var. Fakat geçtiğimiz ocak ayı sonunda TC39 öneri sürecinde Stage 3’ten Stage 4’e geçiş yaptığı, yani standartlaşmaya hazır olduğu için yeni diyebiliriz.

Neden böyle bir operatöre ihtiyaç olduğuna hızlıca bakalım. Diyelim ki bir sayı üzerinde matematiksel işlem yapıyoruz. Fakat herhangi bir nedenden dolayı beklediğimiz sayı gelmediği takdirde de varsayılan bir değer ile işleme devam etmek istiyoruz. Normal şartlarda OR (||) operatörüyle bunu kolayca yapabiliyoruz.

function add10(number) {
  return (number || 5) + 10; 
}
add10(20) // 30
add10() // 15

Fakat ya 0 değeri işleme girerse?

add10(0) // 15

Bu defa OR operatörünün sağ tarafı (right-hand side) işletilecek ve varsayılan olarak belirlediğimiz 5 değeri hesaplamaya dahil edilerek hatalı bir sonuca ulaşılacaktır. Bunun nedeni 0, '', "", `` gibi ifadelerin mantıksal olarak falsy -yani boolean olarak false kabul edilen- ifadeler olmasıdır.

İlk bakışta masum görünen ama uygun şartların sağlandığı bir kullanım senaryosunda ciddi sorunlara neden olacak bu hatanın önüne geçmek için kodumuza bir koşul ekleyerek beklediğimiz değerin gerçekten tanımsız olup olmadığını kontrol edebiliriz.

function add10(number) {
  if(number === undefined)
    number = 5;
  return number + 10; 
}
add10(0) // 10
add10(20) // 30
add10() // 15

Fakat bu yöntem de özellikle karmaşık kod blokları içerisinde hem sürekli kendini tekrar edecek hem de okunabilirliği azaltacağı için bir grup geliştirici Nullish coalescing operatörünü alternatif bir çözüm olarak geliştirmeye başladılar. Kodu ilk hâline alarak yeni operatörü (??) ekleyelim.

function add10(number) {
  return (number ?? 5) + 10; 
}
add10(0) // 10
add10(20) // 30
add10() // 15

Görüleceği üzere bu defa istediğimiz sonucu aldık. Yeni operatör yalnızca undefined ve null değerleri için operatörün sağ tarafını işletti. Aksi takdirde fonksiyona parametre olarak geçilen değeri (left-hand side) hesaplamaya dahil etti.

Operatör henüz tüm tarayıcılar için stabil durumda değil fakat geliştirmesi sürüyor. O zamana kadar elbette Babel ile dönüşüm sağlayarak kullanma imkânımız var. Önümüzdeki senelerde sıkça kullanacağımızı düşündüğüm operatörün tarayıcı motorlarına göre güncel test sonuçlarına ise şuradan göz gezdirmek mümkün.

Hâlihazırda ES6 ile birlikte fonksiyon parametrelerine varsayılan değerler atayabiliyoruz. Ben daha kolay anlaşılması adına örneğimi yine bir fonksiyon kullanımı üzerinden verdim.

Kaynaklar

https://github.com/tc39/proposal-nullish-coalescing
https://blog.tildeloop.com/posts/javascript-nullish-coalescing-operator
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Nullish_coalescing_operator

JavaScript ES6+ serisindeki bir sonraki yazı: JavaScript ES6+ İpuçları #2: Optional Chaining Operatörü ile Pratik Zincirleme