🚀 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 final permissions 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 🚀

Arshia Shahidi | JavaScript'te .reduce() Yönteminin Ustası Olmak