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ş
Bu makalede Javascript Pipeline Operator için kullanacağımız örnek kod şu şekilde olacaktır.
Pipeline Öncesi Kullanım Örneği
1 2 3 4 5 6 7 8 9 10 11 12 13 14 | // Sayıya bir ekler let birEkle = function(x) { return x + 1; } // Sayıyı iki ile çarpar let ikiyeCarp = function(x) { return x * 2; } // Sayıyı altıya böler let altiyaBol = function(x) { return x / 6; } |
Ş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.
1 2 3 4 | let sayi = 6; let hesap = birEkle(ikiyeCarp(altiyaBol(sayi))); console.log(hesap); // Sonuç: 3. |
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.
1 2 3 4 | let sayi = 6; let hesap = sayi |> altiyaBol(%) |> ikiyeCarp(%) |> birEkle(%); console.log(hesap); // Sonuç: 3. |
Ü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
sayideğişkeni değerini “|>” operatörü sayesindealtiyaBolfonksiyonuna “%” 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.
1 2 3 4 5 6 7 8 9 10 11 | let urlParametereleri = { 'x' : '10245', 'id': 'eojff-efekv-ef0kw', 'yazar' : 'murat-oner', 'ozellik' : false } let urlSonucu = Object.keys(urlParametereleri).map((key) => `${key}=${urlParametereleri[key]}`) |> %.join('&') |> `?${%}`; // Sonuç: ?x=10245&id=eojff-efekv-ef0kw&yazar=murat-oner&ozellik=false console.log(urlSonucu); |
- Üstteki kodda gördüğünüz gibi
urlParametrelerideğ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
urlSonucudeğ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.
- 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.
2. Projenize babel’in son sürümünü ve pipeline operator plugin’ini kurmak için alttaki komutu çalıştırın.
3. .babelrc dosyasına pipeline operator plugin’i için alttaki gibi tanımlarınızı yapınız.
1 2 3 4 5 6 7 8 9 10 11 | { "plugins": [ [ "@ babel/plugin-proposal-pipeline-operator", { "proposal" : "minimal" } ] ] } |
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.
1 2 3 4 5 | { "scripts": { "start" : "babel main.js --out-file output.js && node output.js" } } |
5. Alttaki gibi npm start diyerek projenizi çalıştırın ve sonucu görün.
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
- Javascript Switch Case Nedir, Örnekli Nasıl Kullanılır?
- Javascript Türkçe Sıralama Yöntemleri
- Javascript Media Query Nedir ve Nasıl Kullanılır?
- Javascript Char Codes(Key Codes) Nedir?
- Javascript “Opsiyonel Zincirleme – Optional Chaining” Operatörü Nedir?
- Javascript fetch api nedir, nasıl kullanılır? Http İşlemleri!
- Javascript Class Nedir? Nasıl Tanımlanır ve Kullanılır?
- Javascript Şifre Göster/Gizle Yapımı
✍ 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.
1 Response
[…] Javascript Pipeline Operator Nedir, Nasıl Kullanılır? […]