Javascript’te “reduce()” Metodu Kullanımı

JavaScript’te reduce() metodu, bir dizi (array) üzerinde bir işlem gerçekleştirmek ve bu işlemler sonucunda tek bir çıktı üretmek için kullanılır.

Javascript’te “reduce()” Metodu

Kelime anlamı “azaltmak” ya da “küçültmek” olan reduce() metodu, JavaScript’te diziyi tek bir değere indirgemek için kullanılır. Bu metod, dizi elemanlarını sırasıyla işleyerek, bu elemanları belirli bir işleme tabi tutar ve sonuçta elde ettiği tek değeri döndürür.

Bu dönüşüm, toplama, çıkarma, çarpma gibi matematiksel işlemler olabileceği gibi, daha karmaşık veri dönüşümleri de olabilir. Dört parametre alabilen metodumuzun söz dizimi (syntax) genel olarak aşağıdaki gibidir:

arr.reduce(function(accumulator, currentValue, index, arr) {
// bir şeyler yap
}, initialValue)

arr.reduce(function(accumulator, currentValue, index, arr) {

// bir şeyler yap

}, initialValue)

function(accumulator, currentValue, index, arr): Bu bir “callback” fonksiyonudur ve dört parametre alır:
- accumulator: (Zorunlu) Şu ana kadar elde edilen birikmiş değerdir. İlk çağrıldığında initialValue olarak verilen değer bu parametreye atanır. Eğer initialValue belirtilmemişse, dizinin ilk elemanı bu değer olarak atanır.
- currentValue: (Zorunlu) Geçerli elemanın değeri.
- index: (Opsiyonel) Geçerli elemanın dizin değeri.
- arr: (Opsiyonel) reduce() metodu tarafından işlenen orijinal dizi.
initialValue: (Opsiyonel) Bu parametre, accumulator‘un ilk değerini belirler. Eğer bu değer belirtilmezse, accumulator için dizinin ilk elemanı kullanılır ve işlem ikinci elemandan başlar. Belirtilirse, işlem ilk elemandan başlar ve accumulator bu değerle başlatılır.

let numbers = [1, 2, 3, 4, 5];
let sum = numbers.reduce(function(accumulator, currentValue) {
return accumulator + currentValue;
}, 0); // 0 burada initialValue yani başlangıç değeri
console.log(sum);  // Çıktı: 15

let numbers = [1, 2, 3, 4, 5];

let sum = numbers.reduce(function(accumulator, currentValue) {

return accumulator + currentValue;

}, 0); // 0 burada initialValue yani başlangıç değeri

console.log(sum); // Çıktı: 15

Yukarıdaki örneğimizde, accumulator başlangıçta initialValue olan 0 değerine sahiptir. Dizi üzerinde gezinildiğinde, her adımda currentValue mevcut eleman değerini alır ve accumulator‘a eklenir. İşlem tamamlandığında ise, tüm sayıların toplamı olan 15 değeri sum değişkenine atanır.

JavaScript’te “reduce()” metodu, bir dizideki değerler üzerinde bir işlem yapmak ve bu işlemler sonucunda tek bir çıktı üretmek istediğinizde kullanılır demiştik. Bazı tipik kullanım durumları aşağıda verilmiştir:

Dört işlem: Dizi elemanlarını toplamak veya çarpmak gibi işlemler için reduce() metodunu kullanabilirsiniz.
Dizileri birleştirme: reduce() metodu, birden fazla dizi veya dizi elemanlarını tek bir diziye veya başka bir veri yapısına birleştirmek için de kullanılabilir.
Nesne dönüşümü: reduce() metodu bir dizi elemanlarını tek bir nesneye dönüştürmek için de kullanılabilir. Bu genellikle bir dizi elemanlarını belirli bir şekilde gruplamak veya anahtar değer çiftlerine dönüştürmek istediğinizde yararlıdır.
Frekans hesaplama: Bir dizideki belirli bir elemanın kaç kez göründüğünü bulmak için kullanılabilir.

// 4 işlem
const numbers = [1, 2, 3, 4, 5];
const sum = numbers.reduce((accumulator, currentValue) => accumulator + currentValue, 0);
console.log(sum); // Output: 15
// Dizi birleştirme
const arrays = [[1, 2], [3, 4], [5, 6]];
const combined = arrays.reduce((accumulator, currentValue) => accumulator.concat(currentValue), []);
console.log(combined); // Output: [1, 2, 3, 4, 5, 6]
// Nesne dönüşümü
const pets = ["dog", "cat", "dog", "cat", "fish", "dog", "cat"];
const petCounts = pets.reduce((obj, pet) => {
if (!obj[pet]) {
obj[pet] = 1;
} else {
obj[pet]++;
}
return obj;
}, {});
console.log(petCounts); // Output: { dog: 3, cat: 3, fish: 1 }
// Frekans hesaplama
const letters = ["a", "b", "a", "c", "b", "a", "d"];
const frequency = letters.reduce((count, letter) => {
count[letter] = (count[letter] || 0) + 1;
return count;
}, {});
console.log(frequency); // Output: { a: 3, b: 2, c: 1, d: 1 }

// 4 işlem

const numbers = [1, 2, 3, 4, 5];

const sum = numbers.reduce((accumulator, currentValue) => accumulator + currentValue, 0);

console.log(sum); // Output: 15

// Dizi birleştirme

const arrays = [[1, 2], [3, 4], [5, 6]];

const combined = arrays.reduce((accumulator, currentValue) => accumulator.concat(currentValue), []);

console.log(combined); // Output: [1, 2, 3, 4, 5, 6]

// Nesne dönüşümü

const pets = ["dog", "cat", "dog", "cat", "fish", "dog", "cat"];

const petCounts = pets.reduce((obj, pet) => {

if (!obj[pet]) {

obj[pet] = 1;

} else {

obj[pet]++;

}

return obj;

}, {});

console.log(petCounts); // Output: { dog: 3, cat: 3, fish: 1 }

// Frekans hesaplama

const letters = ["a", "b", "a", "c", "b", "a", "d"];

const frequency = letters.reduce((count, letter) => {

count[letter] = (count[letter] || 0) + 1;

return count;

}, {});

console.log(frequency); // Output: { a: 3, b: 2, c: 1, d: 1 }

“Arrow” Fonksiyonu ile “reduce()” Metodu

JavaScript’te “reduce()” metodu, “arrow” (ok) fonksiyonu ile kullanıldığında daha sade ve anlaşılır bir söz dizimi olur. Bakınız:

arr.reduce((accumulator, currentValue, index, arr) =>{
// bir şeyler yap
}, initialValue)

arr.reduce((accumulator, currentValue, index, arr) =>{

// bir şeyler yap

}, initialValue)

Arrow fonksiyonları, this kelimesinin kapsamını değiştirmemesi gibi bazı özellikleri nedeniyle bazı durumlarda daha avantajlıdır. Aşağıdaki örneği inceleyiniz:

let numbers = [1, 2, 3, 4, 5];
let sum = numbers.reduce((accumulator, currentValue) => {
return accumulator + currentValue;
}, 0); // 0 burada initialValue yani başlangıç değeri
console.log(sum);  // Çıktı: 15

let numbers = [1, 2, 3, 4, 5];

let sum = numbers.reduce((accumulator, currentValue) => {

return accumulator + currentValue;

}, 0); // 0 burada initialValue yani başlangıç değeri

console.log(sum); // Çıktı: 15

Yukarıdaki örnekte, reduce() metodu numbers dizisindeki tüm sayıları toplar. İlk parametre olan (accumulator, currentValue) => accumulator + currentValue toplama işlemini belirtir. İkinci parametre 0 ise accumulator‘un ilk değeridir ve bu değeri dizi indeksi ile alakalı olmadığını belirtmek isterim. İlk değer, 0 yerine eğer 100 verilseydi çıktı 115 olurdu.

“reduce()” Metodunu Kullanırken Nelere Dikkat Etmeliyiz?

JavaScript’te “reduce()” metodunu kullanırken aklınızda bulundurmanız gereken bazı temel noktalar bulunmaktadır. Bunlar:

Başlangıç Değeri (initialValue): reduce() metoduna verilen başlangıç değeri (initialValue) opsiyoneldir, ancak kullanılması önerilir. Eğer bu değer belirtilmezse, dizinin ilk öğesi başlangıç değeri olarak kabul edilir ve işlem ikinci öğeden başlar. Bu, bazen beklenmedik sonuçlara yol açabilir.
Boş Diziler: reduce() metodunu boş bir dizi üzerinde başlangıç değeri olmadan çağırırsanız bir TypeError hatası alırsınız.
Tek Elemanlı Diziler: Başlangıç değeri belirtilmeden, sadece bir öğesi olan bir dizi üzerinde reduce() çağrısı yapılırsa, bu tek öğe sonuç olarak döner ve geri çağırma işlevi (callback) çağrılmaz.
Geri Çağırma İşlevi: Geri çağırma işlevi (callback) dört parametre alır: accumulator, currentValue, index ve array. Bu işlevde belirtilen dönüşüm işlemini yaparak bir sonuç döndürmelisiniz.
Orjinal Dizi Değişmez: reduce() metodu orijinal diziyi değiştirmez. Bunun yerine, belirtilen işlevi kullanarak oluşturulan yeni bir değeri döndürür.
İşlem Sırası: reduce() metodu, dizi öğelerini soltan sağa işler. Eğer sağdan sola işlemek isterseniz reduceRight() metodunu kullanabilirsiniz.
Performans: reduce() metodu ile karmaşık işlemler yapıyorsanız, performans kaybı yaşarsınız. Özellikle büyük diziler üzerinde çalışırken bu durumu göz önünde bulundurmalısınız.

Sonuç olarak, JavaScript’te “reduce()” metodu bir dizi üzerinde karmaşık işlemler yapmayı mümkün kılar. Ancak, bu işlevin kullanımının her durumda en iyi çözüm olmayabileceğini unutmayın. Bazı durumlardaki amaca uygunluk ve okunabilirlik için map(), filter() gibi diğer dizi işleme metotlarını kullanmak isteyebilirsiniz.