Javascript Map, Filter ve Reduce Dizi Metotlarının React Uygulamalarında Kullanımı

Aşağıdaki Map,Filter ve Reduce metotlarını özetleyici fotoğrafı. Gördüğümde çok beğendiğimi itiraf etmeliyim. Aslında kahvaltı öğününde çoğu zaman pratiklik açısından sandviç tercih eden birisi olarak farkında olmadan her gün şahit olduğum bir olaydı. Bende bu dizi metotlarını daha iyi anlamak için bu süreci uygulamaya dökmek istedim ve ‘Dijital Sandviç Asistanı’ isimli React uygulaması böyle ortaya çıktı.

Credit — https://thenewstack.io

Uygulamanın detaylarına inmeden önce bu metotların React geliştiricileri için ne gibi avantajlar sağladığını anlatmak ve bu metotları teorik olarak incelemenizi istiyorum.

Fonksiyonel Programlama Nedir ?

Fonksiyonel programlama bir programlama paradigması olarak bilgisayar programlarının yapısının inşa edilmesinde kullanılan bir stildir. Bilgisayar hesaplamalarına matematik fonksiyonlarının değerlendirildiği gibi muamele ederek durum(state) değişimi ve veri mutasyonundan kaçınır.

https://en.wikipedia.org/wiki/Functional_programming

Fonksiyonel programlama yukarıda tanımdan da anlaşılacağı gibi işlemleri matematiksel hesaplamalara benzer şekilde ele almayı temel alır. Bu sayede sistemleri daha sürdürebilir kılacak değişmez(immutabile) ve yan etkilerden arınmış bir hale getirir. Saf(pure) fonksiyonlar ile aynı girdiler daima aynı sonuçları ürettiğinden süreçler izlenebilir ve öngörülebilir.

Map, Filter ve Reduce’da fonksiyonel programlama paradigmasının hayata geçirilmesinde oldukça kullanışlı metotlardır. Diziler içerisinde elemanlar kolaylıkla yinelemeye(iteration) tabi tutularak dönüşüm ve hesaplama işlemleri gerçekleştirilebilir. Ve bu yapılanlar sonucunda tamamen yeni bir dizi ya da sonuç oluşur.

.map( )

İşleme tabi tuttuğumuz dizinin tüm elemanlarını dolaşarak uyguladığımız fonksiyona uygun olarak tamamen yeni bir dizi elde etmemize yardımcı olur.

let yeni_dizi = arr.map(function callback(element, index, array) {
return //yeni_dizi için değer döner.
}[, thisArg])

Metot için tek gerekli parametre ‘element’tir. Genellikle bu ‘element’e çeşitli işlemler uygulanarak yeni bir değer elde edilmeye çalışılır.

.filter ( )

‘Filter’ metodu dizi elemanlarını şartlı bir duruma tabi tutarak şartı sağlayan elemanları tamamen yeni bir dizi içinde tutarak şartı sağlamayanları filtrelemeye tabi tutmamızı sağlar.

let yeni_dizi = arr.filter(function callback(element, index, array) {
return // doğru veya yanlış
}[, thisArg])

‘Map’ metoduna benzer bir söz dizimine sahiptir ancak koşulun doğru ya da yanlış olarak değerlendirmesine göre işlemleri yürütür.

.reduce( )

İşleme tabi tuttuğu dizi elemanlarını azaltarak(ing. reduce) tek bir değer elde etmemizi sağlar.

dizi.reduce(callback[, ilkdeğer])

‘callback’ fonksiyonu dizinin her bir elemanı için bir kez çağrılır. Bu fonksiyon dört parametre barındırır. Çoğunlukla ilk iki parametre kullanılır.

• ‘accumulator(biriktirici)’ — önceki basamaktan dönen değer
• ‘currentValue(mevcut değer)’ — dizideki güncel değer
• ‘index(indis)’ —mevcut elemanın indisi
• ‘array(dizi)’ — ‘reduce’ metodunun uygulandığı dizi
• ilkdeğer argümanı isteğe bağlı olarak kullanılır. Eğer uygulanırsa ‘accumulator’ de tutulan ilk değer olur.

Fonksiyonel programlama paradigmasına uyumlu olarak çalışan bu dizi metotlarını teorik olarak incelemiş olduk. Ayrıca bu metotların birbirleri ile zincirleme halinde ya da birbirilerinin yerine kullanıbileceğini de belirtmek isterim.

Şimdi de sırada uygulamamız içerisinde bu metotları nasıl kullandığımızı gösterme vakti.

‘Dijital Sandviç Asistanı’ uygulaması ne yapar ?

Uygulama kahvaltılık sandviçler için kullanılabilecek malzemeleri listeler. Kullanıcı bu malzemelerden istediklerini seçer. Sonrasında ekmek tercihini yapar. En son olarak sandviç hazırlanır ve toplam fiyat belirtilir.

1. ‘.map( )’ dizi metodu ile malzemeler ve ekmekler listelendi.

.map( )

2. ‘.filter( )’ metodu ile seçilmiş malzemeler yeni bir dizi haline getirildi.

.filter( )

3. ‘.reduce( )’ metodu kullanılarak seçilmiş malzeme ve ekmeğin fiyatı tek bir toplam fiyata dönüştürülmüştür.

.reduce( )

Sonuç

Fonksiyonel programlama paradigması içerisinde oldukça kullanışlı olan üç adet metot hem teorik hem de uygulama özelinde görülmüş oldu. Yazının çıkış noktası olan fotoğrafta olduğu gibi zihnimizde kavram olarak canlandırdığımız bu yöntemler uygulama ile gerçekleşti. ‘Yaparak öğren’ mantalitesine sahip biri olarak daha iyi yazılım geliştirmenin daha çok pratik ile mümkün olduğunu vurgulayarak sizleri de bu yönde geliştirme yapmaya davet ediyorum.

Uygulamayı görüntülemek isteyenler için;

Sandwich

Daha fazla örnek görmek ve geliştirme yapmak için uygulama Github bağlantısı;

EyupOzmen/SandwichApp