JavaScript ES6+ İpuçları #5: Mantıksal Operatörlerle Atama İfadesini Birlikte Kullanmak
JavaScript ES6+ serisindeki bir önceki yazı: JavaScript ES6+ İpuçları #4: Pipeline Operatörü ile Çıktıları Yönlendirmek
Pandeminin başından bu yana ayda iki blog yazısı yazmaya gayret gösteriyordum. Fakat geçtiğimiz ay birtakım yoğunluklardan dolayı ikinci yazıyı yazamadım ve hâliyle bir aya yakın ara vermiş oldum yazmaya. O süreçte gözüme kestirdiğim bir TC39 önerisinden bahsedeceğim bugün.
Önerinin ismi logical assignment (mantıksal atama). Geçtiğimiz günlerde TC39 sürecinde 4. seviyeye çıkarak resmi bir JavaScript özelliği olmaya hak kazandı. Küçük ama oldukça pratik bir özellik. İsmi yaptığı işi açıkça anlatıyor ama yine basit bir günlük yaşam senaryosu üzerinden önceki kullanım alternatiflerini de ele alarak örneklendireceğim.
Diyelim elimizde bir kullanıcı servisi var. Bu servisten aldığımız isim bilgisiyle uygulama arayüzünde kullanıcıya hitap ediyoruz. Fakat ad bilgisi mevcut olmayan misafir kullanıcılara farklı şekilde hitap etmek istiyoruz. Bunun kontrolünü birkaç şekilde yapabiliriz.
İsim değerinin mevcut olup olmadığını kontrol edip mevcut değilse varsayılan değerimizi kullanabiliriz.
Ternary (şartlı/üçlü) operatörünü kullanarak aynı ifadeyi daha basit şekilde yazabiliriz.
Mantıksal veya (or) operatörünü kullanarak isim değeri tanımsızsa onun yerine yine varsayılan değerimizin kullanılmasını sağlayabiliriz.
Üstteki tüm kullanımlar bizi aynı kapıya çıkarıyor. Günün sonunda hepsinin ortak noktası belli bir şarta göre isim değişkenine yeni bir atamak veya atamamak oluyor.
Kontrol etmek istediğimiz tek bir alan olduğunda pratikte hepsini kullanabiliriz fakat bu alanların sayısı arttığında ya arka arkaya birbirine benzeyen if blokları yazacağız ya da template literals içerisinde mantıksal kontroller yaparak uygulama arayüzünde istediğimiz değerin gözükmesini sağlayacağız. Fakat bunun dezavantajı bu kontroller yalnızca kullanıldığı yer için geçerli olacak. Nihayetinde isim bilgisini tutan değişkenimizin değeri değişmeyeceği için uygulamanın farklı bir benzer bir ihtiyaç olduğunda aynı kontrolleri tekrar tekrar yazmak zorunda kalacağız.
Logical assigment operatörü bu noktada işimizi kolaylaştırıyor. JavaScript’deki mantıksal operatörlerle (or, and, nullish gibi) atama ifadesini birlikte kullanmaya imkân tanıyor. Üstteki örneği logical assigment özelliğini kullanarak yapalım.
Görüldüğü gibi aynı sonucu hem daha okunabilir hem daha kısa hem de uygulamanın diğer yerlerinde de isim değişkeni üzerinde herhangi bir değişiklik yapmaya ihtiyaç kalmadan kullanılabilecek şekilde almış olduk.
Henüz çok yeni bir özellik olduğundan tarayıcıların JavaScript motorları ve Node.js, Deno gibi diğer JavaScript çalıştırma ortamları stabil olarak desteklemiyor olabilir. Şuradaki oyun alanından veya ilgili Babel eklentisi kullanılarak logical assigment özelliğini denemek mümkün.
Kaynaklar
https://github.com/tc39/proposal-logical-assignment
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Logical_OR_assignment
https://babeljs.io/docs/en/babel-plugin-proposal-logical-assignment-operators
JavaScript ES6+ serisindeki bir sonraki yazı: JavaScript ES6+ İpuçları #6: Numeric Seperator Kullanmak
