Foreach, Map, Filter, Reduce
Foreach ,map,filter,reduce fonksiyonları arraylerde(diziler) kullanılan fonksiyonlardır. Kullanıldığı array’in orjinalinde değişkliğe sebep olmadıkları için immutable(mutasyona uğratmayan) fonksiyonlardır. Her biri, çalışırken içinde bir fonksiyon çalıştırır. Bu ayrı fonksiyona ise call back function denir.
Bir liste üzerinden örnek yaparak tüm fonksiyonların çalışmasını inceleyelim.
const list = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
Filter
Örneğin bu listedeki çift sayıları bulmak istersem filter metodunu kullnacağım.
const filtered = list.filter(item => {
if (item % 2 === 0) return item;
});
filter metodu list içindeki tüm elemanları tek tek dönüp ikiye bölünebilenleri filtered isimli listeye atar.
Kodun sonucunda
filtered = [2, 4, 6, 8, 10] olur.
list =[1, 2, 3, 4, 5, 6, 7, 8, 9, 10] list değişime uğramaz ve aynı şekilde kalmaya devam eder. filter metodu immutable bir fonksiyon olduğu için ilk arrayimiz değişime uğramadı.(immutable)
Reduce
Reduce fonksiyonu 4 parametre alan bir callback functionını parametre olarak alır. Bu 4 parametre şunlardır accumulator, currentValue, currentIndex, array. CurrentIndex ve array parametrelerini vermek zorunda değiliz. Reduce fonksiyonu aldığı callback fonksiyonunu her eleman için icra ederek döngünün sonunda tek bir sonuç değeri döner.
Örneğin bu listedeki sayıların toplamını bulmak istersem reduce kullanabilirim.
syntax olarak aşağıdaki şekilde yazılır. Kodun sonucunda
sonucReduce = 55 olur ve
list = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10] şeklinde kalır değişime uğramaz.(immutable)
const sonucReduce = list.reduce(function(acc, curr, currentIndex, array) {
return acc + curr;
},0 );
mantık olarak nasıl çalıştığını inceleyelim.
accumulator değerini 0 dan başlattık. ilk çevrimde 0+1 =1 oldu ,2.çevrimde 1+2 (arrayin 2.elemanı olan değer) =3 ,3.çevrimde 3+3(arrayin 3.elemanı olan değer ) =6 ,4. çevrimde 6+4(arrayin 4. elemanı) vs… Şeklinde tüm elemanlar için iterasyon devam ediyor.
Peki accumulatore 0 değil de 10 verseydik nasıl olacaktı ?
syntax’ı aşağıdaki şekilde olacaktı ve accumulator = 10 dan başlayacaktı.
const sonucReduce1 = list.reduce((acc, curr) => (item = acc + curr), 10);
sonucReduce1 = 65 olur ve list isimli listemizde bir değişiklik olmaz.
Farklı bir kullanıma örnek olması için 3 farklı fonksiyonu art arda çalıştırıp tek bir sonuç döndürelim. double , percent ve stringify isimli metodlarımı , verdiğim bir sayı için sırasıyla çalışarak tek bir değer üretsin istiyorsam, reduce fonksiyonunu aşağıdaki gibi kullanabilirim.
Aşağıdaki örnekte accumulator parametresine 12 verdiğimde önce 12 *2=24 ardından 24/100=0,24 sonuc =0.24% olarak hesaplanır.
Foreach
Bir listedeki tüm elemanları dönüp her eleman üzerinde aynı işlemleri tekrar etmek istiyorsam foreach kullanabilirim. Reduce ile yaptığım listedeki tüm elemanların toplamını bulma işlemini foreach ile de yapabilirim.Aşağıdaki örnekte her elamanın 2 katının 5 fazlasını alıp , listedeki tüm elemanları topluyoruz.
let islemlerSonucu = 0;
list.forEach(item => {
islemlerSonucu = islemlerSonucu + (item * 2 + 5);
});
islemlerSonucu = 160 bu işlem de listeyi mutasyona uğratmaz
list = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10] şeklinde kalır.
Öyle bir durum oluştu ki servis çağırımı yapan async function çağırmanız gerekti foreach döngüsünden diyelim.O zaman da syntax aşağıdaki gibi oluyor.
list.forEach(async item => {
const title = await fetchUsers(item);
console.log(“Foreach” + item + “-” + title);
});
Map
Map fonksiyonu kendi eleman sayısıyla aynı eleman sayısına sahip bir array döner.
list = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]; yine aynı listemizi inceliyoruz.
listedeki elemanların her birinin kaça bölünebildiklerinin bilgisini bulmak istiyorum. Burada hem ikiye hem üçe bölünebilme , 2'nin de asal olması… vs gibi detaylara takılmayalım. Basitçe değerlendirelim.
const kacaBolunurListesi = list.map(item => {
if (item === 1) return “Bir”;
else if (item % 2 === 0) return “ikiye”;
else if (item % 3 === 0) return “üçe”;
else if (item % 5 === 0) return “beşe”;
else return “Asal”;
});
Döngünün sonunda
kacaBolunurListesi =[“Bir”, “ikiye”, “üçe”, “ikiye”, “beşe”, “ikiye”, “Asal”, “ikiye”, “üçe”, “ikiye”]
list = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
list isimli listem yine mutasyona uğramadı. Map işleminden sonra kacaBolunurListesi , list ile aynı eleman sayısına sahip her elemanın kaça bölündüğü bilgisini barındıran yeni bir liste oldu.
map döngüsünde async fonksiyon çağırmanız gerekti diyelim ki,o zaman söz dizimi aşağıdaki gibi olmalı.
list.map(async item => {
const title = await fetchUsers(item);
console.log(“Map” + item + “-” + title);
});
Bugünlük bu kadar.
Happy Reacting =)
