JavaScript’te reduce() metodu, array içerisindeki verileri işleyerek tek bir sonuç elde etmek için kullanılır. Bu sonuç bir sayı, string, object veya farklı bir veri tipi olabilir.
Modern JavaScript geliştirme süreçlerinde reduce() metodu özellikle veri dönüştürme, toplama, gruplama ve raporlama işlemlerinde sık kullanılmaktadır.
İlk bakışta map() veya filter() metodlarına göre daha karmaşık görünse de mantığı anlaşıldığında oldukça güçlü ve kullanışlı bir araçtır.
Bu yazıda JavaScript reduce() metodunu detaylı örneklerle inceleyeceğiz.
reduce() Metodu Nedir?
reduce() metodu, array içerisindeki tüm elemanları tek tek işleyerek tek bir sonuç üretir.
Temel kullanım:
array.reduce(
(accumulator, currentValue) => {
return accumulator;
},
initialValue
);
Buradaki mantık oldukça basittir. Her iterasyonda mevcut değer işlenir ve sonuç accumulator içerisinde saklanır.
reduce() Parametreleri
reduce() callback fonksiyonu aşağıdaki parametreleri alabilir.
array.reduce(
(
accumulator,
currentValue,
currentIndex,
array
) => {},
initialValue
);
- accumulator → Biriken sonuç
- currentValue → İşlenen mevcut eleman
- currentIndex → Mevcut elemanın index değeri
- array → İşlem yapılan array
- initialValue → Başlangıç değeri
Sayıları Toplama
reduce() metodunun en yaygın kullanım alanlarından biri sayı toplamaktır.
const numbers = [1, 2, 3, 4, 5];
const total = numbers.reduce(
(sum, number) => sum + number,
0
);
console.log(total);
Çıktı:
15
reduce() Nasıl Çalışır?
Yukarıdaki örneğin adım adım çalışma mantığı şöyledir:
| Adım | sum | number | Sonuç |
|---|---|---|---|
| 1 | 0 | 1 | 1 |
| 2 | 1 | 2 | 3 |
| 3 | 3 | 3 | 6 |
| 4 | 6 | 4 | 10 |
| 5 | 10 | 5 | 15 |
Son iterasyon tamamlandığında sonuç 15 olarak döner.
Ortalama Hesaplama
reduce() kullanarak bir sayı dizisinin ortalaması hesaplanabilir.
const numbers = [10, 20, 30];
const total = numbers.reduce(
(sum, number) => sum + number,
0
);
const average = total / numbers.length;
console.log(average);
Çıktı:
20
Object Dizilerinde Toplama
Gerçek projelerde reduce() genellikle object dizileri üzerinde kullanılmaktadır.
const products = [
{ name: "Laptop", price: 1000 },
{ name: "Mouse", price: 50 },
{ name: "Monitor", price: 300 }
];
const totalPrice = products.reduce(
(sum, product) => sum + product.price,
0
);
console.log(totalPrice);
Çıktı:
1350
Array’i Object’e Dönüştürme
API verileri ile çalışırken array verilerini object yapısına dönüştürmek oldukça yaygın bir işlemdir.
const users = [
{ id: 1, name: "Ahmet" },
{ id: 2, name: "Mehmet" }
];
const result = users.reduce(
(obj, user) => {
obj[user.id] = user;
return obj;
},
{}
);
console.log(result);
En Büyük Sayıyı Bulma
const numbers = [5, 12, 8, 20];
const max = numbers.reduce(
(largest, number) =>
number > largest ? number : largest
);
console.log(max);
Çıktı:
20
Verileri Gruplama
reduce() ile veriler belirli alanlara göre gruplanabilir.
const users = [
{ name: "Ahmet", city: "Istanbul" },
{ name: "Mehmet", city: "Ankara" },
{ name: "Ayşe", city: "Istanbul" }
];
const grouped = users.reduce(
(result, user) => {
if (!result[user.city]) {
result[user.city] = [];
}
result[user.city].push(user);
return result;
},
{}
);
console.log(grouped);
Kelime Frekansı Hesaplama
Bir dizide hangi elemandan kaç tane olduğunu bulmak için reduce() kullanılabilir.
const words = [
"javascript",
"nodejs",
"javascript",
"react"
];
const frequency = words.reduce(
(result, word) => {
result[word] = (result[word] || 0) + 1;
return result;
},
{}
);
console.log(frequency);
reduce() ve map() Arasındaki Fark
| Metod | Sonuç |
|---|---|
| map() | Yeni bir array oluşturur |
| reduce() | Tek bir sonuç üretir |
Eğer amaç her elemanı dönüştürmek ise map(), tek bir sonuç üretmek ise reduce() tercih edilmelidir.
Yaygın Hatalar
initialValue Vermemek
Başlangıç değeri verilmediğinde bazı durumlarda beklenmeyen sonuçlar oluşabilir.
const numbers = [];
numbers.reduce(
(sum, number) => sum + number
);
Boş array üzerinde bu kullanım hata verebilir.
Callback İçerisinde Return Unutmak
const numbers = [1, 2, 3];
numbers.reduce((sum, number) => {
sum + number;
}, 0);
Bu örnekte return olmadığı için sonuç beklenildiği gibi çalışmayacaktır.
Kullanım Alanları
- Toplam hesaplama
- Ortalama alma
- Veri gruplama
- Raporlama işlemleri
- Array’i object’e dönüştürme
- İstatistik hesaplamaları
- API verilerini işleme
Sonuç
JavaScript reduce() metodu, array verilerini tek bir sonuç haline getirmek için kullanılan oldukça güçlü bir metottur.
İlk başlarda karmaşık görünse de özellikle API işlemleri, raporlama sistemleri ve veri dönüştürme senaryolarında büyük kolaylık sağlar.
reduce() metodunu iyi öğrenmek modern JavaScript geliştirme süreçlerinde önemli bir avantaj sağlayacaktır.
Sık Sorulan Sorular (SSS)
reduce() ne işe yarar?
reduce() metodu, bir array içerisindeki tüm elemanları işleyerek tek bir sonuç üretmek için kullanılır. Bu sonuç sayı, string, object veya farklı bir veri tipi olabilir.
reduce() orijinal array’i değiştirir mi?
Hayır. reduce() metodu yeni bir sonuç döndürür ve orijinal array üzerinde herhangi bir değişiklik yapmaz.
reduce() ile toplama işlemi yapılabilir mi?
Evet. reduce() en sık toplam hesaplama işlemlerinde kullanılmaktadır.
reduce() ile object oluşturulabilir mi?
Evet. Array verileri reduce() kullanılarak object yapısına dönüştürülebilir.
reduce() ile gruplama yapılabilir mi?
Evet. Özellikle API verilerini şehir, kategori veya farklı alanlara göre gruplamak için reduce() oldukça sık kullanılmaktadır.
reduce() callback fonksiyonunda hangi parametreler bulunur?
accumulator, currentValue, currentIndex ve array parametreleri kullanılabilir. Ayrıca başlangıç değeri olarak initialValue tanımlanabilir.
reduce() ile map() arasındaki fark nedir?
map() her eleman için yeni bir array oluştururken, reduce() tüm elemanları işleyerek tek bir sonuç üretir.
reduce() kullanırken initialValue vermek zorunlu mudur?
Zorunlu değildir ancak özellikle boş array senaryolarında hata almamak için initialValue kullanılması tavsiye edilir.
Eğer map ile ilgili yazıyı okumak isterseniz aşağıdaki makaleyi inceleyebilirsiniz.
Link: https://www.mustafahamit.com/javascript-map-kullanimi/
