🚀 JavaScript'te .reduce()
Yöntemini Anlamak (Adım Adım)
🧠 .reduce()
nedir?
.reduce()
bir diziyi tek bir değere dönüştürmeni sağlayan bir metottur — bu bir sayı, nesne, dizi veya string olabilir.
Her elemanı teker teker dolaşır ve bir reducer (birleştirici) fonksiyonu kullanarak hepsini birleştirir.
🎒 Bunu şöyle hayal et:
Elinde bir sürü uzay oyuncağı var ve bunları tek bir kutuya koymak istiyorsun.
Ama sadece atmak yerine, onları özel bir şekilde birleştiriyorsun..reduce()
tam olarak bunu yapar.
🛠 Söz Dizimi (Syntax)
array.reduce<ReturnType>(
(accumulator, currentValue, currentIndex, array) => {
// burada mantık olur...
return newAccumulator;
},
initialValue // sonucu başlatan değer
);
accumulator
: biriktirilen, oluşan sonuçcurrentValue
: şu anki dizi elemanıinitialValue
: başlangıç değeri
✨ Örnek 1: Sayıları Toplamak
const numbers = [10, 20, 30];
// let acc = $1 // (sadece açıklama için, gerçek koda gerek yok)
// Adım 1: acc = 0 + 10 → 10
// Adım 2: acc = 10 + 20 → 30
// Adım 3: acc = 30 + 30 → 60
const total = numbers.reduce((acc, curr) => acc + curr, 0);
console.log(total); // 60
✨ Örnek 2: Emojileri Saymak
const fruits = ["🍎", "🍌", "🍎"];
// let acc = $1 // (sadece açıklama için, gerçek koda gerek yok)
// Adım 1: "🍎" → acc = { "🍎": 1 }
// Adım 2: "🍌" → acc = { "🍎": 1, "🍌": 1 }
// Adım 3: "🍎" tekrar → acc = { "🍎": 2, "🍌": 1 }
const count = fruits.reduce((acc, fruit) => {
acc[fruit] = (acc[fruit] || 0) + 1;
return acc;
}, {});
console.log(count); // { "🍎": 2, "🍌": 1 }
✨ Örnek 3: Dizileri Düzleştirmek
const nested = [[1, 2], [3, 4], [5, 6]];
// let acc = $1 // (sadece açıklama için, gerçek koda gerek yok)
// Adım 1: acc = [1, 2]
// Adım 2: acc = [1, 2, 3, 4]
// Adım 3: acc = [1, 2, 3, 4, 5, 6]
const flat = nested.reduce((acc, curr) => acc.concat(curr), []);
console.log(flat); // [1, 2, 3, 4, 5, 6]
🛠 Gerçek Projede Kullanım Örneği
Gerçek bir projede, .reduce()
metodunu kullanıcıya ait rollerin ve izinlerin birleştirilmesi için kullandım. Veritabanından gelen birden fazla satırdan, tek bir kullanıcı nesnesi ve onun benzersiz izin listesini oluşturmak gerekiyordu.
const user = result.reduce((acc, curr) => {
if (!acc.id) return {
...curr,
permissions: new Set(curr.permissions)
};
if (!curr.permissions) return acc;
for (const p of curr.permissions) {
acc.permissions.add(p);
}
return acc;
}, {} as Omit<typeof result[number], 'permissions'> & { permissions: Set<string> });
const finalUser = {
...user,
permissions: Array.from(user.permissions),
};
Bu örnekte:
result
dizisindeki her satır bir kullanıcıya ait olabilir.- Amaç: aynı kullanıcıya ait satırları birleştirip tüm izinleri tek bir
Set
içinde toplamak. - Sonuçta
Set
yapısı sayesinde tekrar eden izinler filtrelenmiş olur.
Bu tür durumlarda .reduce()
çok işe yarar: parçaları toplayıp özel bir yapıya dönüştürmek.
In a real project, I used .reduce()
to combine multiple rows from a database into a single user object, and gather all their unique permissions into one set.
const user = result.reduce((acc, curr) => {
if (!acc.id) return {
...curr,
permissions: new Set(curr.permissions)
};
if (!curr.permissions) return acc;
for (const p of curr.permissions) {
acc.permissions.add(p);
}
return acc;
}, {} as Omit<typeof result[number], 'permissions'> & { permissions: Set<string> });
const finalUser = {
...user,
permissions: Array.from(user.permissions),
};
In this example:
- The
result
array contains rows for the same user (from a SQL JOIN). - We use
.reduce()
to merge them into one object. - The
Set
ensures the finalpermissions
list has no duplicates.
This is where .reduce()
really shines: combining structured data into a new shape.
✅ En İyi Uygulamalar
- Her zaman bir
initialValue
ver. - Reducer fonksiyonun saf (pure) olsun — dış değişkenleri değiştirme.
.reduce()
'ü sadece tek bir sonuç elde etmek istediğinde kullan.
❌ Ne Zaman .reduce()
Kullanma
Şu durumlarda daha basit yöntemleri (örneğin .map()
, .filter()
, for...of
) kullan:
- Tek bir değer elde etmek istemiyorsan
- Mantığın çok karmaşıksa
🧑🚀 Özet
.reduce()
diziyi döner ve tek bir sonuç üretir.- Hangi şekilde birleştirileceğini sen belirlersin.
- Toplam, sayım, gruplama veya dönüştürme için çok faydalıdır.
- Kodun daha açık hale geliyorsa kullan, daha karmaşık hale geliyorsa değil.
Artık .reduce()
'ü bir yazılım astronotu gibi anlıyorsun 🚀