farkmt2official 1
farkmt2official
mannaxxx 1
mannaxxx
Bvural41 1
Bvural41
Agora Metin2 1
Agora Metin2
berkmenoo 1
berkmenoo
Hikaye Ekle

[NODE JS] Array Metodları: map, filter, reduce

nodejs.png


[NODE JS] Array Metodları: map, filter, reduce​


Selam arkadaşlar. Bugün JavaScript'in en güçlü array metodlarını konuşacağız: map, filter ve reduce. Bu üç metodu iyi öğrenirseniz for döngüsü yazmaya neredeyse hiç ihtiyacınız kalmaz. Ben günlük kodlamada bu metodları sürekli kullanıyorum ve onlarsız bir gün bile geçmez diyebilirim.

Array.map() - Dönüştürme​


map metodu her eleman üzerinde bir fonksiyon çalıştırır ve sonuçlardan yeni bir array oluşturur. Orijinal array değişmez. Bu immutability prensibinin temelidir ve modern JavaScript'te çok önemli.

Ben map'i en çok API'den gelen verileri frontend'in istediği formata dönüştürmek için kullanıyorum. Mesela veritabanından gelen ham kullanıcı verisini, frontend'e gönderilecek temiz bir formata çevirmek. Gerçekten günde en az on kez map kullanıyorum.

JavaScript:
// === ARRAY.MAP() ===

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

// Temel kullanım
const kareler = sayilar.map(n => n * n);
console.log('Kareler:', kareler); // [1, 4, 9, 16, 25]

const ikiKati = sayilar.map(n => n * 2);
console.log('İki katı:', ikiKati); // [2, 4, 6, 8, 10]

// Obje dönüşümü - En sık kullanılan senaryo
const kullanicilarDB = [
    { id: 1, ad: 'Ahmet', soyad: 'Yılmaz', email: 'ahmet@test.com', sifre: 'hash123', aktif: true },
    { id: 2, ad: 'Ayşe', soyad: 'Kaya', email: 'ayse@test.com', sifre: 'hash456', aktif: true },
    { id: 3, ad: 'Mehmet', soyad: 'Demir', email: 'mehmet@test.com', sifre: 'hash789', aktif: false }
];

// API response için dönüşüm (şifreyi çıkar, tam isim ekle)
const kullanicilarAPI = kullanicilarDB.map(({ id, ad, soyad, email, aktif }) => ({
    id,
    tamIsim: `${ad} ${soyad}`,
    email,
    durum: aktif ? 'Aktif' : 'Pasif'
}));
console.log('API Response:', JSON.stringify(kullanicilarAPI, null, 2));

// Index parametresi
const sirali = ['elma', 'armut', 'muz'].map((meyve, index) => ({
    sira: index + 1,
    meyve,
    buyukHarf: meyve.toUpperCase()
}));
console.log('Sıralı:', sirali);

// Fiyat formatlama
const urunler = [
    { isim: 'Laptop', fiyat: 25000 },
    { isim: 'Telefon', fiyat: 15000 },
    { isim: 'Tablet', fiyat: 8000 }
];

const formatli = urunler.map(u => ({
    ...u,
    fiyatStr: `${u.fiyat.toLocaleString('tr-TR')} TL`,
    kdvli: Math.round(u.fiyat * 1.20),
    kdvliStr: `${Math.round(u.fiyat * 1.20).toLocaleString('tr-TR')} TL`
}));
console.log('Formatlı:', JSON.stringify(formatli, null, 2));

Array.filter() - Filtreleme​


filter metodu bir koşulu sağlayan elemanlardan yeni bir array oluşturur. Orijinal array'e dokunmaz. Veritabanı sorgusu yazmadan önce in-memory filtreleme yapmak, kullanıcı arayüzünde arama sonuçlarını daraltmak gibi birçok senaryoda kullanılır.

Tecrübeme göre filter ve map birlikte zincirleme kullanıldığında çok güçlü oluyor. Önce filtrele, sonra dönüştür. Bu pattern'i her yerde görürsünüz.

JavaScript:
// === ARRAY.FİLTER() ===

const ogrenciler = [
    { isim: 'Ali', not: 85, bolum: 'Bilgisayar', sinif: 3 },
    { isim: 'Veli', not: 45, bolum: 'Elektrik', sinif: 2 },
    { isim: 'Ayşe', not: 92, bolum: 'Bilgisayar', sinif: 4 },
    { isim: 'Fatma', not: 67, bolum: 'Makine', sinif: 1 },
    { isim: 'Can', not: 78, bolum: 'Bilgisayar', sinif: 3 },
    { isim: 'Deniz', not: 38, bolum: 'Elektrik', sinif: 2 },
    { isim: 'Buse', not: 95, bolum: 'Bilgisayar', sinif: 4 }
];

// Geçen öğrenciler (not >= 50)
const gecenler = ogrenciler.filter(o => o.not >= 50);
console.log('Geçenler:', gecenler.map(o => o.isim));

// Kalanlar
const kalanlar = ogrenciler.filter(o => o.not < 50);
console.log('Kalanlar:', kalanlar.map(o => o.isim));

// Bölüme göre filtreleme
const bilgisayarci = ogrenciler.filter(o => o.bolum === 'Bilgisayar');
console.log('Bilgisayarcılar:', bilgisayarci.map(o => `${o.isim} (${o.not})`));

// Birden fazla koşul
const basarili = ogrenciler.filter(o =>
    o.bolum === 'Bilgisayar' && o.not >= 80 && o.sinif >= 3
);
console.log('Başarılı BM öğrencileri:', basarili.map(o => o.isim));

// Zincirleme: filter + map
const onurListesi = ogrenciler
    .filter(o => o.not >= 85)
    .map(o => `${o.isim} - ${o.bolum} (${o.not})`)
    .sort();
console.log('Onur listesi:', onurListesi);

// Benzersiz değerler (filter ile)
const rakamlar = [1, 2, 2, 3, 3, 3, 4, 5, 5];
const benzersiz = rakamlar.filter((val, idx, arr) => arr.indexOf(val) === idx);
console.log('Benzersiz:', benzersiz);

Array.reduce() - İndirgeme​


reduce en güçlü ve en çok kafa karıştıran array metodudur. Bir array'i tek bir değere indirger: sayı, string, obje, hatta başka bir array olabilir. Aslında map ve filter'ın ikisini de reduce ile yazabilirsiniz ama okunabilirlik açısından ayrı ayrı kullanmak daha iyi.

Yeni başlayanlar bunu çok yanlış yapıyor, reduce'u anlamadan kopyala yapıştır yapıyorlar. Accumulator ve currentValue parametrelerini iyi kavramak şart. Ben de ilk başta zorlanmıştım ama birkaç pratikten sonra oturdu.

JavaScript:
// === ARRAY.REDUCE() ===

const siparisler = [
    { urun: 'Laptop', fiyat: 25000, adet: 1, kategori: 'Elektronik' },
    { urun: 'Mouse', fiyat: 500, adet: 2, kategori: 'Elektronik' },
    { urun: 'Kitap', fiyat: 75, adet: 3, kategori: 'Kırtasiye' },
    { urun: 'Kalem', fiyat: 25, adet: 10, kategori: 'Kırtasiye' },
    { urun: 'Monitör', fiyat: 8000, adet: 1, kategori: 'Elektronik' },
    { urun: 'Defter', fiyat: 40, adet: 5, kategori: 'Kırtasiye' }
];

// Toplam tutar
const toplamTutar = siparisler.reduce((toplam, s) => toplam + (s.fiyat * s.adet), 0);
console.log(`Toplam: ${toplamTutar.toLocaleString('tr-TR')} TL`);

// Kategoriye göre gruplama
const kategoriler = siparisler.reduce((grup, s) => {
    if (!grup[s.kategori]) {
        grup[s.kategori] = [];
    }
    grup[s.kategori].push(s.urun);
    return grup;
}, {});
console.log('Kategoriler:', kategoriler);

// Kategoriye göre toplam tutar
const kategoriToplam = siparisler.reduce((toplam, s) => {
    const key = s.kategori;
    toplam[key] = (toplam[key] || 0) + (s.fiyat * s.adet);
    return toplam;
}, {});
console.log('Kategori toplamları:', kategoriToplam);

// En pahalı ürün
const enPahali = siparisler.reduce((max, s) =>
    s.fiyat > max.fiyat ? s : max
);
console.log('En pahalı:', enPahali.urun);

// Kelime sayacı
const metin = 'bir iki bir üç bir iki dört bir beş iki';
const kelimeSayac = metin.split(' ').reduce((sayac, kelime) => {
    sayac[kelime] = (sayac[kelime] || 0) + 1;
    return sayac;
}, {});
console.log('Kelime sayıları:', kelimeSayac);

// Pipeline oluşturma (reduce ile fonksiyon zincirleme)
const islemler = [
    n => n * 2,     // iki katı
    n => n + 10,    // 10 ekle
    n => n / 3,     // 3'e böl
    n => Math.round(n) // yuvarla
];

const sonuc = islemler.reduce((deger, fn) => fn(deger), 15);
console.log('Pipeline sonucu:', sonuc); // ((15*2)+10)/3 = 13.33 -> 13

Bu üç metodu iyi öğrenirseniz kodunuz çok daha temiz ve fonksiyonel olur. Zincirleme kullanım gerçekten güçlü: filtrele, dönüştür, indirge. Bu pattern'i her yerde kullanabilirsiniz. Kolay gelsin.
 

Şu an konuyu görüntüleyenler (Toplam : 0, Üye: 0, Misafir: 0)

Geri
Üst