ES6 | Map-Filter-Reduce #5

ES6 serisini oluştururken belli bir sıralamayı takip etmek , örneklerde kullanılan her ifadeyi daha önce anlatmadığım konulardan seçmemek için özen gösterdim. Bugün de bu serinin en can alıcı konularından biri olan array helper method’lara başlayacağız. Öncelikle anlatacağım konular başlıktanda anlaşılabileceği gibi map( ),filter( ) ve reduce( ) olacak. Girişi daha da uzatmadan artık gelişmeye başlayalım.
Map( )
MDN’de map( ) şu şekilde tanımlanıyor. Dizinin her elemanı için, parametre olarak verilen fonksiyonu çağırır ve oluşan sonuçlarla da yeni bir dizi oluşturur. Örneklerle bu tanımın anlaşılmasını kolaylaştıralım.

Örnekler yapmaya önce üzerinde çalışabileceğimiz bir array oluşturarak başladık.Şimdi array üzerinde map( ) örneklerini gösterebiliriz.

Yukarıdaki örneklerin ilkinde görüldüğü üzere map( ) ile companies array’nden sadece name’leri yazdırarak yeni bir array oluşturulmuş oldu. İkinci örnekte ise name,start,end bir arada belli bir formatta yazıldı. Bu arada companies array’nde hiçbir değişiklik olmadı.Companies array’nden yararlanılarak companyNames ve companyNamesAndYears array’leri oluşturuldu. Ayrıca ikinci örnekteki kullanım için serinin şu yazısınıda okumanızı tavsiye ederim. Daha önceki arrow functions yazısında bahsettiğim gibi örneklerde arrow function kullanılmıştır. Onu da şuraya iliştireyim.
Filter( )
Filter( ) içerisine array’in herbir elemanı için içerisine yazılan fonksiyonu çağırır ve bu fonksiyona uygun olanları (şartı sağlayanları) yeni bir array olarak geri döndürür. Şimdi companies array’nde uygulanan filter( ) örneğini inceleyelim.

Yukarıdaki örnekte 10 yıldan fazla süredir aktif olan company’lerin getirilmesi için filter( ) metodundan yararlanılmıştır. Filter ( ) metoduna gönderilen şartı sağlayanlar moreTenYearsActive array’nde gösterilmiştir.

Diğer filter( ) örneğinde olduğu gibi burada da items array’ne uygulanmıştır ve şart olarak price≥200 gönderilmiştir. Bu şartı sağlayanlar filteredItems array’nde gösterilmiştir.
Reduce( )
Reduce( ) fonksiyonu 2 parametre alır; ilk parametre işlemin yapılacağı bir fonksiyon (reducer fonksiyonu), diğer parametre ise ilk(başlangıç) değeridir.
Reduce( ) fonksiyonu, array’in her bir elemanı kadar reducer fonksiyonunu çağırır. Bu işlemin sonucunu kümülatif(birbiri üzerine eklenerek artan)olarak hesaplar. Yapılan her işlemin sonucu bir sonraki fonksiyon çağırımına ilk parametre olarak aktarılır. Bunu bir görsel ile pekiştirelim.

Yukarıdaki görsel de reduce( ) uygulanan array = [1,2,3,4] ‘dur. Eğer reduce() fonksiyonuna ilk değer(başlangıç) verilmezse, fonksiyon ilk elemandan başlayarak hesaplamaya devam eder. 1 ‘in üzerine 2 eklenip, bir sonraki adımda 3 üzerine sıradaki eleman olan 3 eklenmiştir.Bir sonraki adımda 6 üzerine bir sonraki eleman olan 4 eklenmiştir ve sonuç 10 olarak bulunmuştur. Şimdi de bu işlemlerin kod tarafında nasıl gerçekleştiğine ve daha değişik örneklere bakalım.

Reducer fonksiyonu tanımlanmış ve reduce( ) fonksiyonuna başlangıç değeri olmadan parametre olarak verilmiştir.

Yukarıdaki örnekte firstValue olarak boş bir object tanımlanıyor. Yani gelen değerler object’nin içine atılacak. Her bir eleman için eğer daha önceden object içinde yoksa değeri 1, var ise daha önceki değerinin üzerine 1 eklenerek result bulunuyor.
Son olarak map( ),filter( ) ve reduce( ) fonksiyonları birbirleri ardına bağlanarakta kullanılabilirler. Bu ifadeyi de bir örnekle açıklayalım.

Örnekte görüldüğü üzere numbers array önce herbir elemanı 2 katına çıkarılarak yeni bir array oluşturulmuş,oluşan bu array içinden filter( ) içindeki şartı sağlayan değerlerde reduce( ) fonksiyonunda başlangıç değeri 0(sıfır) olucak şekilde toplanarak sonuç bulunmuştur.
Böylelikle ES6'da sıklıkla kullanılan map( ),filter( ) ve reduce( ) fonksiyonlarını örneklerle beraber anlatmıştık olduk. Array üzerine uygulanmak isteyen birçok işlemde bu fonksiyonlara başvurulabilir. Bu yenilikleri geliştirme süreçlerimize dahil edebilmenin umuduyla bir sonraki yazıda görüşmek üzere :)
Serinin devamı ve yenilikleri öğrenmek için takipte kalın..
