Reduce'u nasıl kullanabiliriz?

Herkese merhaba tekrar, ilk yazımda reduce metodunun nasıl çalıştığını incelemiştik. Şimdi de örneklerle nasıl kullanabileceğimize bakalım.

Öncelikle en çok kullanıldığı alan olan; array içindeki değerleri toplama işlemini reduce'la nasıl yapabileceğimize bakalım.

Bir önceki yazmızdan hatırlayacağımız gibi callback fonksiyonumuzun aldığı değerler accumulator, anlık değer, index ve array'di. İlk değer belirtilmediği için otomatik olarak ilk eleman olan 1 ile başladık.

Burada şu mantıkla düşünebiliriz:

ilk değer(initialValue): 1

accumulator = ilk değer

ilk iterasyon: accumulator = accumulator + 2
accumulator şu an 3'e eşit

ikinci iterasyon: accumulator = accumulator + 3
accumulator şu an 6'ya eşit

Fonksiyon accumulator'ı döndürdüğü için sonuç 6'ya eşit.

const sum = [1, 2, 3].reduce((acc, cur) => acc + cur);

console.log(sum);
// 6

Gelelim biraz daha karmaşık olabilecek örneklerimize:

Öncelikle veri yapımızı buraya bırakacağım unutmayın bütün örneklerde aynı veri yapısını kullanacağınız:

const users = [{
        id: "124124124124",
        name: "Some Person",
        username: "some123",
        insterests: ["hiking", "sports"],
        country: {
            code: "tr",
            name: "Turkey"
        }
    },
    {
        id: "456456",
        name: "John Doe",
        username: "john123",
        insterests: ["sci-fi", "coding"],
        country: {
            code: "us",
            name: "United States"
        }
    },
    {
        id: "56356456",
        name: "Foo Bar",
        username: "foo123",
        insterests: ["board games"],
        country: {
            code: "de",
            name: "Germany"
        }
    },

]

İlk örneğimizde bu array yapısındaki veri yapısını nasıl istediğimiz key - value ikilisini kullanarak objeye çevirebileceğimize bakacağız:

Bu noktada sistem şu şekilde çalışacak:
ilk değerimiz: {} //boş bir obje;
accumulator = {}

ilk iterasyon: accumulator[124124124124] = 'Some Person'
accumulator = {124124124124: 'Some Person'}

ikinci iterasyon: accumulator[456456] = 'John Doe'
accumulator = {124124124124: 'Some Person', 456456: 'John Doe'}

üçüncü iterasyon: accumulator[56356456] = 'Foo Bar'
accumulator = {124124124124: 'Some Person', 456456: 'John Doe', 56356456: 'Foo Bar'}

 const reducedArr = users.reduce((accumulator, currentValue) => {
    accumulator[currentValue.id] = currentValue.name;
    return accumulator;
  }, {});

Diğer örneğimizde ise veri yapısı aynı kalacak şekilde istediğimiz key value eşlerini arrayin içine koyacağız.

Burada da sistem şu şekilde çalışır:

ilk değerimiz: []
accumulator = []

Burada spread syntax kullanılmıştır basitçe anlatmak gerekirse:

const arr = []; const arr2 = [...arr, {name: 'random'}] console.log(arr2) = [{name: 'random'}] şeklinde çalışır.

ilk iterasyon: accumulator = [{name: 'Some Person', id: '124124124124'}]
.
.
.

 const nameById = users.reduce((accumulator, currentValue) => {
    accumulator = [...accumulator, {name: currentValue.name, id: currentValue.id}];
    return accumulator
 }, []) 

Yukarıda oluşturduğumuz arrayi yine aynı mantıkla fakat ilk kullandığımız array için keylerle de oluşturabilirdik:

 const nameById = users.reduce((accumulator, currentValue) => {
    accumulator = [...accumulator, {[currentValue.id]: currentValue.name}];
    return accumulator
 }, []) 

Genel olarak reduce metodunu bu şekilde kullanabilirsiniz.

Daha başka hangi konularda yazı gelmesini istiyorsanız yorumlarda belirtebilirsiniz.