Javascript'te map ve reduce metodlarının kullanımı

Herkese selamlar,
Bugün tüm projelerde çok sık kullanılan iki fonksiyondan bahsedeceğim. Dizi elemanlarını erişip elemanlarla işlemler yapıp veri üretmemizi kolaylaştıran fonksiyonlardır. Nasıl kullanıldığını, aralarında ne gibi farklılıklar olduğunu bu yazımda anlatacağım.

map()
Dizideki her eleman için yazılan fonksiyonu uygulayıp geriye yeni bir dizi döndüren metotdur.
Hızlıca bir örnek vermek gerekirse;

const arr = [1, 2, 3, 4];

const newArr = arr.map((x) => x * 2);

console.log(newArr);

Kodun çıktısında [ 2, 4, 6, 8 ] dizisini görürüz. Burada olan şey map fonksiyonu ile arr dizisindeki her eleman için (x)=> x * 2 fonksiyonu uygulanır ve newArr dizisine atanır. x burada arr dizisinin her bir elemanını ifade eden parametredir.

Bu noktada farklı bir örnekle side effect(yan etki) durumlarını inceleyebiliriz.

const products = [{ name: "sports car" }, { name: "laptop" }, { name: "phone" }];

products.map((product) => {
  product.price = 100;
});

console.log(products);

products üzerine map() fonksiyonu uyguladık fakat yeni bir değişkene atamadık. Ama products dizisini logladığımızda içeriğinin değiştiğini görebiliriz.

[
  { name: 'sports car', price: 100 },
  { name: 'laptop', price: 100 },
  { name: 'phone', price: 100 }
]

Burada products dizisi içindeki elemanların obje yani referans tipte oldukları için map fonksiyonu her elemanın referansını alıp işlem yapıyor. Bu ayrıca bir side effect'e neden oluyor.

Yukarıdaki gibi bir kullanım yerine forEach metodu daha doğru bir tercih olur. Hem yeni bir değer döndürmez hem dizi içeriğini sideeffect yaratarak değiştirmiş oluruz.

Şu örnekte ise dizi içindeki elemanlar primitive(ilkel) tip olduğu için diziyi logladığımızda herhangi bir değişiklik gözlemlemeyiz :

const arr = [1, 2, 3, 4];

arr.map((val) => val * 2);

console.log(arr);

[ 1, 2, 3, 4 ]

Ancak newArr = arr.map((val) => val * 2); yaparsak newArr içerisinde yeni değerleri görebiliriz.

reduce()
Bu metodun temel amacı dizi içindeki değerleri tek bir değere indirgemek olarak söylenebilir. Zaten kelime anlamı olarak reduce "indirmek, azaltmak, kısmak" anlamına gelir.
Metod bir callback fonksiyonu ve opsiyonel olarak initialvalue değeri alır.

Aşağıdaki örnekte dizi içindeki elemanların toplamını veren bir reduce metodu uygulamasını inceleyelim:

const array = [10, 11, 12, 13, 14];

function reducer(accumulator, currentValue, index) {
  const total = accumulator + currentValue;
  console.log(`accumulator: ${accumulator}, currentValue: ${currentValue}, index: ${index}, total: ${total}`);
  return total;
}

array.reduce(reducer);

Çıktı:

accumulator: 10, currentValue: 11, index: 1, total: 21
accumulator: 21, currentValue: 12, index: 2, total: 33
accumulator: 33, currentValue: 13, index: 3, total: 46
accumulator: 46, currentValue: 14, index: 4, total: 60

accumulator ara sonuç veya biriktirici diyebiliriz. Her iterasyondan sonra çıkan sonuç accumulator'e atanır. Örnekte bir başlangıç değeri olmadığı için accumulator array[0] olur.
currentValue o an ki iterasyonda işlenen elemandır. Initialvalue değeri yoksa array[1] tersi durumda array[0] olur.
index ise currentValue değerinin dizideki konumu olur.

Eğer initialValue değeri array.reduce(reducer, 10) şeklinde verilirse aynı örnek için çıktı şu şekilde olur:

accumulator: 10, currentValue: 10, index: 0, total: 20
accumulator: 20, currentValue: 11, index: 1, total: 31
accumulator: 31, currentValue: 12, index: 2, total: 43
accumulator: 43, currentValue: 13, index: 3, total: 56
accumulator: 56, currentValue: 14, index: 4, total: 70

accumulator initialValue değerini, currentValue array[0] ve index 0 değerlerini aldığına dikkat edelim.

Bir başka örnekte gerçek dünyaya daha yakın bir senaryoda reduce metodu şu şekilde kullanılabilir:

const cart = [
  { product: "Laptop", price: 15000, quantity: 1 },
  { product: "Mouse", price: 500, quantity: 2 },
  { product: "Keyboard", price: 1200, quantity: 1 }
];

const total = cart.reduce((acc, item) => {
  return acc + item.price * item.quantity;
}, 0);

console.log(total); // --> 17200