Kodcu Murat Youtube Kanalına Abone Olmayı Unutma

Javascript Pipeline Operator Nedir, Nasıl Kullanılır?

Javascript Pipeline Operator, Babel 7.15 ile javascript dünyasına giriş yaptı. Bu yeni ve güzel özellik ile bazı işlemlerimizi tek satırda, ardı ardına işlemler yapabilmek için kullanabileceğiz.

Giriş

Javascript Pipeline Operator Nedir(|>), Nasıl ve Neden Kullanılır?
Javascript Pipeline Operator

Bu makalede Javascript Pipeline Operator için kullanacağımız örnek kod şu şekilde olacaktır.

Pipeline Öncesi Kullanım Örneği

Şimdi ise üstteki 3 fonksiyonu iç içe kullanıp sonucu görelim ve sonrasında Pipeline Operator özelliğine doğru yol almaya devam edelim.

Pipeline İle Kullanım Örneği

Şimdi üstteki kodun Pipeline Operators ile yazılmış haline göz atalım ve yeni özelliği keşfedelim.

Üstteki kodu şöyle özetleyebiliriz;

  • Her yeni “|>” operatörü kullanımında bir önceki ifadeden ortaya çıkan sonucun sağ taraftaki yeni ifadeye “%” karakteri üzerinden taşınması sağlanır. Böylelikle sıralı olarak en solda yer alan sayi değişkeni değerini “|>” operatörü sayesinde altiyaBol fonksiyonuna “%” karakteri üzerinden değerini aktarır. Sırasıyla sağa doğru bu değer aktarma işlemi devam eder ve son olarak “|>” operatörü kalmadığında en sağdaki ifadenin sonucuna göre bir değer elde edilir. Buradaki değer bir önceki kod bloğunda gördüğümüz “3” değerinin aynısıdır.

Üstteki kod bloğu Pipeline operatörünü anlamada faydalı olmadıysa alttaki örneği incelemenizi tavsiye ederim.

  • Üstteki kodda gördüğünüz gibi urlParametreleri değişkeninde yer alan nesne özelliklerinin her gibi url’de kullanılmak üzere “key=value” haline dönüştürülüp bir array nesnesi oluşturuluyor.
  • Oluşturulan array değeri bir sağında yer alan “%.join(“&”)” ifadesine “|>” pipeline operatörü sayesinde aktarılır. Her bir array elemanının arasında “&” karakteri konularak array içindeki tüm elemanlar string ifade içerisinde birleştirilmiş olur.
  • Son “`?{%}`” ifade de ise string ifade başına “?” karakteri eklenerek oluşturulan değer urlSonucu değişkenine aktarılır.

Kurulum

Local olarak kullanmak isterseniz alttaki adımları birebir uygulayıp deneyebilirsiniz ya da hali hazırda babel 7.15 ve üstü olan bir projenizde kullanmak isterseniz 2.adımda pipeline operator plugin’ini kurmalı ve 3. adımda yer alan .babelrc dosyası içerisinde ilgili tanımlarınızı yapmalısınız.

  1. Eğer sıfırdan bu özelliği test etmek adına bir proje oluşturmak istiyorsanız npm init komutunu çalıştırın.
npm init

2. Projenize babel’in son sürümünü ve pipeline operator plugin’ini kurmak için alttaki komutu çalıştırın.

npm install @babel/cli @babel/core @babel/plugin-proposal-pipeline-operator

3. .babelrc dosyasına pipeline operator plugin’i için alttaki gibi tanımlarınızı yapınız.

4. package.json içerisinde scripts bloklarınız arasında alttaki tanımınızı yapınız. Babel main.js kodunuzu derleyip nihai javascript sonucunu output.js olarak üretecektir o yüzden main.js dosyanız yoksa oluşturmalısınız ve main.js içerisinde üstte verdiğimiz 2 örneği ya da kendi pipeline operator örneklerinizi oluşturarak test edebilirsiniz.

5. Alttaki gibi npm start diyerek projenizi çalıştırın ve sonucu görün.

npm start

Sonuç

Ben açıkçası bu operatör sayesinde tek satırda bir çok işlemimizin halledilebileceğini düşünüyorum. Kullandığımız geliştirme ortamlarındaki babel sürümlerimiz 7.15’i yakaladığında sıklıkla kod bloklarında yerini alacaktır.


📚 Kaynaklar


📚 Javascript Pipeline Operator İle Benzer Makaleler


✍  Lütfen Javascript Pipeline Operator makalesi ile alakalı solumlu-olumsuz tüm görüşlerinizi bana yorum yada mail yolu ile iletmeyi ihmal etmeyin.

🔗  Sosyal medya kanallarından Javascript Pipeline Operator makalesini paylaşarak destek olursanız çok sevinirim.

👋  Bir sonraki makalede görüşmek dileğiyle.

5/5 - (5 votes)