Diziler (Arrays): map, filter ve reduce Metotları ile Veri İşleme

crazy_coder · Pazar saat 01:40'de

Diziler (Arrays), verileri bir liste halinde tutmamızı sağlar. Eskiden bu listeler üzerinde işlem yapmak için for veya while döngülerini kullanır, değişkenleri manuel olarak yönetirdik. Ancak modern JavaScript (ES6+), bize dizileri manipüle etmek için çok daha deklaratif ve şık yöntemler sunuyor.

1. .map() - Veriyi Dönüştürmek

map metodu, bir dizideki her eleman üzerinde belirli bir işlem yapar ve sonuçlardan oluşan yeni bir dizi döndürür. Orijinal diziniz asla değişmez.

Ne zaman kullanılır? Bir veri listesinin formatını değiştirmek veya her elemanı bir işlemden geçirmek istediğinizde.

JavaScript:

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

// Tüm sayıların karesini alalım
const kareler = sayilar.map(sayi => sayi * sayi);

console.log(kareler); // [1, 4, 9, 16]

2. .filter() - Veriyi Ayıklamak

filter metodu, dizideki elemanlardan belirlediğiniz bir koşula uyanları seçer ve sadece bu elemanlardan oluşan yeni bir dizi oluşturur.

Ne zaman kullanılır? Bir listeden sadece belirli şartları sağlayanları (örneğin: fiyatı 100 TL'den fazla olan ürünler) çekmek istediğinizde.

JavaScript:

const yaslar = [14, 18, 25, 30, 12, 40];

// Sadece 18 yaş ve üstü olanları alalım
const yetiskinler = yaslar.filter(yas => yas >= 18);

console.log(yetiskinler); // [18, 25, 30, 40]

3. .reduce() - Veriyi Tek Bir Sonuca İndirgemek

Bu üçlü arasındaki en "akıllı" ama en çok kafa karıştıran metot budur. reduce, dizideki tüm elemanları birleştirerek tek bir sonuç (sayı, metin, obje veya başka bir dizi) üretir.

Ne zaman kullanılır? Bir sepet toplamı hesaplamak veya bir dizideki verileri gruplamak istediğinizde.

JavaScript:

const sepet = [100, 250, 50, 300];

// Tüm sayıları toplayalım
// 'toplam' biriktiricidir (accumulator), 'fiyat' o anki elemandır.
const toplamTutar = sepet.reduce((toplam, fiyat) => toplam + fiyat, 0);

console.log(toplamTutar); // 700

Pratik Bir Forum Senaryosu: Metotları Zincirlemek

Gerçek dünyada bu metotları peş peşe (chaining) kullanarak harikalar yaratabilirsiniz. Diyelim ki bir e-ticaret siteniz var ve sadece pahalı ürünlerin toplam vergisini hesaplamak istiyorsunuz.

JavaScript:

const urunler = [
{ ad: "Klavye", fiyat: 500, stok: true },
{ ad: "Mouse", fiyat: 200, stok: false },
{ ad: "Monitor", fiyat: 2500, stok: true },
{ ad: "USB Kablo", fiyat: 50, stok: true }
];

const sonuc = urunler
.filter(urun => urun.stok === true)         // 1. Sadece stokta olanları seç
.filter(urun => urun.fiyat > 100)           // 2. Fiyatı 100'den büyük olanları seç
.map(urun => urun.fiyat * 1.20)             // 3. Her birine %20 KDV ekle
.reduce((acc, fiyat) => acc + fiyat, 0);    // 4. Hepsinin toplamını al

console.log("Toplam Ödenecek: " + sonuc + " TL");

Özet Karşılaştırma

Metot	Girdi	Çıktı	Amacı
map	Dizi	Yeni Dizi (Aynı Uzunlukta)	Elemanları dönüştürmek
filter	Dizi	Yeni Dizi (Daha Kısa)	Elemanları ayıklamak
reduce	Dizi	Tek bir değer	Veriyi toplamak/indirgemek

Sonuç

Bu üç metot, JavaScript'te fonksiyonel programlamanın kapılarını açar. for döngülerinden kurtulup bu yapıları kullanmaya başladığınızda, kodunuzun hem daha az hata içerdiğini hem de diğer yazılımcılar tarafından daha kolay anlaşıldığını fark edeceksiniz.

Diziler (Arrays): map, filter ve reduce Metotları ile Veri İşleme

crazy_coder

1. .map() - Veriyi Dönüştürmek​

2. .filter() - Veriyi Ayıklamak​

3. .reduce() - Veriyi Tek Bir Sonuca İndirgemek​

Pratik Bir Forum Senaryosu: Metotları Zincirlemek​

Özet Karşılaştırma​

1. .map() - Veriyi Dönüştürmek

2. .filter() - Veriyi Ayıklamak

3. .reduce() - Veriyi Tek Bir Sonuca İndirgemek

Pratik Bir Forum Senaryosu: Metotları Zincirlemek

Özet Karşılaştırma