JavaScript ES6+ İpuçları #4: Pipeline Operatörü ile Çıktıları Yönlendirmek

Tuğsan Ünlü
3 min readSep 19, 2020

--

Pipeline operatörü

JavaScript ES6+ serisindeki bir önceki yazı: JavaScript ES6+ İpuçları #3: Record ve Tuple ile Native Değişmezlik Sağlamak

Vakit buldukça JavaScript TC39 önerileri üzerine okuyor ve yazıyorum. Daha önce Nullish Coalescing ile Optional Chaining operatörleri ve referans veri tipleri için değişmezlik sağlayan Record-Tuple yapılarını yazmıştım. Bu defa da fonksiyonlarımızın çıktılarını bir başka fonksiyona girdi olarak vermek istediğimizde işimizi epeyce kolaylaştıracak Pipeline operatöründen bahsedeceğim.

Pipeline operatörü birçok dilde mevcut. Unixish işletim sistemi kullanıcılarının da komut çıktılarını farklı komutlara yönlendirmek için sıklıkla kullandığı bir operatör. JavaScript’deki kullanımı (|>) Unixish sistemlerdeki pipeline (|) ve çıktı yönlendirme (>) operatörlerinin kombinasyonu gibi düşünülebilir. TC39 öneri sürecinde henüz Stage 1'de. Yani standart olarak kullanmaya başlamamız için epey yolu var. Fakat pratikliği ve muadili kullanımlara göre sağladığı okunabilirlik göz önünde bulundurulduğunda ileride çok sık başvuracağımızı düşünüyorum.

Nasıl kullanıldığına bir örnekle bakalım. Önce basit bir senaryo kurgulayalım. Elimizde bir kullanıcının ad ve soyad bilgisi olsun. Bu bilginin tamamını değil, maskeleyerek yalnızca bir kısmını diğer kullanıcılara göstermek istiyoruz diyelim. Özetle elimizdeki metin üzerinde arka arkaya birtakım manipülasyon işlemleri yapmamız gerekecek. Hemen yardımcı metin fonksiyonlarımızı yazalım.

Metin fonksiyonları

Üstteki fonksiyonlar sayesinde elimizdeki metnin başındaki ve sonundaki boşlukları silecek, yalnızca ilk iki karakterini kullanacak, küçük harfe dönüştürecek ve tamamı on karakter olana kadar “*” ile dolduracağız. Bu işlemleri hem alışageldiğimiz klasik yöntemle hem de pipeline operatörü (|>) marifetiyle ile yapalım.

Parametre almayan fonksiyonlarla pipeline operatör kullanımı

İlk yani klasik kullanımda içeriden dışarıya doğru bir sıralama yaptık. trim fonksiyonuyla boşluklarını sildiğimiz metni, ilk iki karakteri kesilmek üzere substring fonksiyonuna parametre olarak geçtik. Bu böyle en dıştaki fill fonksiyonuna kadar devam etti.

İkinci kullanımda ise tıpkı düşünürkenki gibi bir sırayla kodumuzu yazdık. Sol taraftaki fonksiyondan aldığımız işlenmiş metni sağ taraftaki fonksiyona gönderdik. Günün sonunda her iki yöntemle de “fo********” çıktısını görmüş olduk.

Şu anda fonksiyonlar içerisinde elle yazdığım, “0”, “2”, “*” gibi magic string olarak tabir ettiğimiz değerler var. Bunları da ilgili fonksiyonlara dışarıdan parametre olarak geçelim ve klasik yöntemle işlerin nasıl biraz daha zorlaştığını görelim. İlk olarak fonksiyonları güncelleyelim.

Güncellenmiş metin fonksiyonları

Akabinde bu değerleri fonksiyonlara parametre olarak geçerek yeniden maskeleme işlemini yapalım.

Parametre alan fonksiyonlarla pipeline operatör kullanımı

Görüldüğü gibi yine aynı sonucu aldık. Fakat klasik yöntemle yazılan koda baktığımızda hangi fonksiyonun hangi parametreyi aldığını gözle kestirebilmek neredeyse imkânsız hâle geldi. Kaldı ki iç içe kullanılan fonksiyon sayısı bu kadarla sınırlı olmayabilir veya fonksiyon isimleri bir bakışta anlaşılır olmayabilir. Bunlar olası bir iyileştirme veya debug sürecini uzatırken kodu da açıkça hataya teşne bir duruma getirebiliyor.

Bu örnekteki pipeline operatörün kullanımına baktığımızda ise ilgili fonksiyonlara ilk parametre olarak sol tarafındaki fonksiyondan aldığı değeri, daha sonra da gerekli diğer parametreleri bir arrow function yardımıyla geçildiğini görebiliriz. İlkine göre oldukça basit ve okunabilir duruyor.

Yukarıda da bahsettiğim gibi pipeline operatörü önerisi henüz yolun çok başında. Bu yüzden tarayıcılarda veya Node.js/Deno üzerinde doğrudan kullanamıyoruz. TypeScript’in web sitesi üzerinde bir oyun alanı var. Meraklısı kullanımını oradan inceleyebilir. Ayrıca Babel yapılandırmasına eklenerek de denenebilir.

Kaynaklar

https://github.com/tc39/proposal-pipeline-operator
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Pipeline_operator
https://tc39.es/proposal-pipeline-operator/
https://www.typescriptlang.org/play?ts=4.0.0-pr-38305-2#code/

JavaScript ES6+ serisindeki bir sonraki yazı: JavaScript ES6+ İpuçları #5: Mantıksal Operatörlerle Atama İfadesini Birlikte Kullanmak

--

--

Tuğsan Ünlü
Tuğsan Ünlü

Written by Tuğsan Ünlü

Application Architect, Technical Product Owner @Akbank — tugsanunlu.com

No responses yet