JS Diziler ve Objeler: Map, Filter, Reduce — Kısa Giriş

JavaScript'te dizilerle çalışırken map, filter ve reduce metodları, javascript başlangıç kodları alanında en sık kullanılan araçlardandır. Bu yöntemler fonksiyonel programlama yaklaşımını destekleyerek diziler üzerinde dönüşüm, altküme seçme veya değer biriktirme gibi işlemleri okunabilir ve ifade edilebilir biçimde yapmanıza olanak sağlar. Aşağıda her bir metodun ne yaptığı, nasıl kullanıldığı ve pratik örnekleri ile birlikte object destructuring ve immutable (değişmez) yöntemlere dair ipuçları yer alıyor.

Map: Diziyi dönüştürmek

map(), mevcut dizinin her elemanına bir dönüşüm uygulayıp aynı uzunlukta yeni bir dizi döndürür. Orijinal dizi değiştirilmez; dönüşüm fonksiyonunun döndürdüğü değerler yeni dizide yer alır. Daha fazla bilgi için resmi referanslara bakabilirsiniz: W3Schools — map().

Kullanım örnekleri:

// Basit sayıların iki katını almak

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

const doubled = numbers.map(n => n * 2); // [2, 4, 6, 8]

// Obje dizisinden sadece isimleri almak (destructuring ile)

const users = [{name: 'Ali', age: 25}, {name: 'Ayşe', age: 30}];

const names = users.map(({ name }) => name); // ['Ali', 'Ayşe']

map() genelde dönüştürme (transform) işlemlerinde tercih edilir. Eğer dönüşümün ardından eleman sayısını değiştirmek isterseniz filter veya reduce ile kombinasyon yapabilirsiniz.

Filter: Koşula göre eleman seçmek

filter(), orijinal dizinin elemanlarından verilen koşulu sağlayanları seçerek yeni bir dizi döndürür. Yine orijinal dizi değiştirilmez. Detaylı referans: W3Schools — filter().

Örnekler:

const numbers = [5, 12, 8, 130, 44];

const big = numbers.filter(n => n >= 10); // [12, 130, 44]

const people = [{name: 'Mehmet', age: 17}, {name: 'Zeynep', age: 22}];

const adults = people.filter(p => p.age >= 18); // [{name: 'Zeynep', age: 22}]

filter(), koşula göre eleman seçerken çok okunabilir bir yapı sunar. Sık kullanılan bir desen, map ile dönüşüm yapıp filter ile uygunları seçmektir.

Reduce: Birleştirmek, biriktirmek, gruplamak

reduce(), dizinin tüm elemanlarını tek bir değere indirgemek için kullanılır. Bir akümülatör (accumulator) ve her adımda çalıştırılan callback fonksiyon ile işler. Başlangıç değeri verilebilir. Daha ayrıntılı kullanım için: W3Schools — reduce().

Basit toplama örneği:

const nums = [1, 2, 3, 4];

const sum = nums.reduce((acc, val) => acc + val, 0); // 10

reduce() ile daha karmaşık dönüşümler de yapılabilir; örneğin grup oluşturma (groupBy) veya sayma işlemleri:

// Şehir bazlı gruplayıp her gruba kişileri eklemek

const people = [

{name: 'A', city: 'Istanbul'},

{name: 'B', city: 'Ankara'},

{name: 'C', city: 'Istanbul'}

];

const byCity = people.reduce((acc, person) => {

const key = person.city;

if (!acc[key]) acc[key] = [];

acc[key].push(person);

return acc;

}, {});

// byCity = { Istanbul: [{...}, {...}], Ankara: [{...}] }

reduce() doğru kullanıldığında çok güçlüdür; ancak karmaşık callback'ler okunabilirliği azaltabilir. Okunabilirlik önemliyse adımları küçük fonksiyonlara bölmek faydalıdır.

Object destructuring ile daha temiz kod

ES6 ile gelen destructuring (ayrıştırma) sözdizimi, objelerden veya dizilerden belli parçaları almak için kullanışlıdır. Destructuring ile map veya diğer metodlar içinde kod daha okunur hale gelir.

const user = {name: 'Merve', age: 28, city: 'Izmir'};

const { name, city } = user; // name = 'Merve', city = 'Izmir'

Özellikle map içindeki callback parametresinde destructuring sık kullanılır:
const emails = users.map(({ email }) => email);

Ayrıca, dizi benzeri yapıları diziye çevirmek için Array.from() gibi yardımcı metodlar işinize yarar.

Array mutasyonu vs immutable işlemler

Bir diziyi doğrudan değiştirmek (mutasyon) veya orijinal diziyi koruyup yeni bir kopya oluşturmak (immutable yaklaşım) arasında seçim yaparken uygulamanın ihtiyaçları ve kodun yan etkisiz olması önem taşır. Bazı array metodları orijinal diziyi değiştirir (örneğin push, pop, splice, sort, reverse), bazıları ise yeni bir dizi döndürür (map, filter gibi).

// Mutasyon yapan örnek

const arr = [1,2];

arr.push(3); // arr artık [1,2,3] — orijinal dizi değişti

// Immutable yaklaşım (yeni dizi oluşturma)

const newArr = [...arr, 3]; // arr değişmedi, newArr yeni dizidir

Immutable işlemler özellikle React gibi durum yönetiminde yan etkileri azaltmak için tercih edilir. Ayrıca kontrol ve hata ayıklama sürecini kolaylaştırır.

Pratik ipuçları ve performans notları

  • Okunabilirlik öncelikli: map/filter/reduce fonksiyonel ve deklaratif olduğundan kodu daha kısa ve açıklayıcı yapar.
  • Ardışık zincirleme: map ve filter birlikte sık kullanılır. Ancak çok büyük dizilerde her adım yeni dizi oluşturacağı için bellek/performans etkisi olabilir; bu durumda reduce veya klasik döngüler tercih edilebilir.
  • Yan etkilerden kaçının: callback içinde global değişkenleri değiştirmek veya obje içini mutasyonla değiştirmek beklenmeyen sonuçlara yol açabilir.
  • Arama ve kontrol: Bir değerin dizide olup olmadığını kontrol etmek için Array.prototype.includes() kullanılabilir.

Hızlı kontrol listesi (checklist)

  • Diziyi dönüştürmek istiyorsanız map kullanın.
  • Koşula göre eleman seçimi için filter uygundur.
  • Tek bir değere indirgeme veya grup/sayma için reduce tercih edin.
  • Orijinal dizinin değişmesini istemiyorsanız push/splice yerine spread, concat veya map/filter gibi immutability dostu yöntemleri kullanın.
  • Destructuring ile parametreleri sadeleştirin ve okunabilirliği artırın.

Özet

map, filter ve reduce, JavaScript dizileriyle çalışırken sık kullanılan ve güçlü üç metoddur. Her biri farklı amaçlar için tasarlanmıştır: map dönüşüm, filter seçim, reduce birleştirme sağlar. Object destructuring ve immutable yaklaşımlar ile birleştiğinde kodunuz daha temiz ve yönetilebilir olur. Daha fazla teknik detay için W3Schools ve MDN dokümantasyonuna göz atabilirsiniz.

Referanslar: W3Schools map/filter/reduce sayfaları ve MDN Array.from ile Array.includes sayfaları kullanıldı.