Web Geliştirmede JavaScript'te `map()`, `filter()` ve `reduce()` ile Veri Dönüşüm Sanatı 
Selam dostlar!
Uzun süredir forumda backend ağırlıklı paylaşımlar yapıyordum, bugün biraz frontend tarafına, özellikle de JavaScript'in belki de en güçlü ve en sık karıştırılan üçlüsüne değinmek istiyorum. Yeni başlayan arkadaşların genelde `for` döngülerinden kurtulamadığını görüyorum. Halbuki `map`, `filter` ve `reduce` metodları, kodunuzu daha okunabilir, bakımı kolay ve fonksiyonel hale getirmenin anahtarı. Gelin bu sihirli araçları birlikte inceleyelim.
Neden `for` Döngüsü Değil de Bu Metotlar?
Öncelikle şunu netleştirelim: `for` döngüsü kötü değil! Ancak modern JavaScript'te, bir diziyi dönüştürmek, filtrelemek veya tek bir değere indirgemek istediğimizde bu üç metot çok daha şık ve amaca yönelik çözümler sunar. Avantajları:
1. `map()`: "Dönüştürücü"
`map()` metodu, bir dizinin her bir elemanını alır, üzerinde bir işlem yapar ve yeni bir dizi olarak döndürür. Orijinal dizi asla değişmez!
Gerçek hayattan bir örnek: API'den gelen kullanıcı listesinde sadece isimleri almak istiyorsunuz.
2. `filter()`: "Eleme Ustası"
`filter()` metodu, belirlediğiniz bir koşula göre diziyi elemenizi sağlar. Koşulu sağlayan elemanlar yeni bir diziye konulur.
Pratik örnek: Sepetteki belirli bir fiyatın üzerindeki ürünleri listelemek.
3. `reduce()`: "Hesap Makinesi"
Bu, belki de en güçlü ama en korkulan metot. `reduce()`, bir diziyi tek bir değere indirger. Bu değer sayı, dizi, obje... her şey olabilir! İki temel parametre alır: bir akümülatör (acc) ve mevcut dizi elemanı `(curr)`.
`reduce()` sadece toplama için değil, çok yönlüdür! Örneğin, bir diziyi nesneye dönüştürmek:
Büyük Sihir: Zincirleme (Chaining)
İşte bu üçlünün asıl gücü burada ortaya çıkıyor! Metotlar yeni dizi döndürdüğü için, sonucu bir sonraki metoda besleyebilirsiniz.
Bu kadar temiz ve anlaşılır bir kod zinciri yazmak, iç içe geçmiş `for` döngüleriyle mümkün değil.
Hangi Durumda Hangisini Kullanmalı?
Umarım bu rehber, bu güçlü araçları anlamanıza ve projelerinizde güvenle kullanmanıza yardımcı olur.
Başlangıçta biraz alışmak zor gelebilir, ancak bir kere alıştığınızda bir daha `for` döngüsü yazmadan duramayacaksınız (her zaman değil tabii 
).
Denemek en iyi öğrenme yoludur. Kendi küçük projelerinizde bu metotlarla oynayın. Sorularınız olursa yorumlarda bekliyorum. Bir sonraki yazıda görüşmek üzere, kodlamaya devam!
Selam dostlar!
Uzun süredir forumda backend ağırlıklı paylaşımlar yapıyordum, bugün biraz frontend tarafına, özellikle de JavaScript'in belki de en güçlü ve en sık karıştırılan üçlüsüne değinmek istiyorum. Yeni başlayan arkadaşların genelde `for` döngülerinden kurtulamadığını görüyorum. Halbuki `map`, `filter` ve `reduce` metodları, kodunuzu daha okunabilir, bakımı kolay ve fonksiyonel hale getirmenin anahtarı. Gelin bu sihirli araçları birlikte inceleyelim.Neden `for` Döngüsü Değil de Bu Metotlar?
Öncelikle şunu netleştirelim: `for` döngüsü kötü değil! Ancak modern JavaScript'te, bir diziyi dönüştürmek, filtrelemek veya tek bir değere indirgemek istediğimizde bu üç metot çok daha şık ve amaca yönelik çözümler sunar. Avantajları:
- Daha az kod, daha çok anlam.
- Yan etkileri (side effects) azaltır, saf fonksiyonlar yazmayı teşvik eder.
- Zincirleme (chaining) yaparak birden fazla işlemi arka arkaya kolayca gerçekleştirebilirsiniz.
1. `map()`: "Dönüştürücü"
`map()` metodu, bir dizinin her bir elemanını alır, üzerinde bir işlem yapar ve yeni bir dizi olarak döndürür. Orijinal dizi asla değişmez!
Kod:
const sayilar = [1, 2, 3, 4, 5];
// Her bir sayının karesini alalım (for döngüsü ile)
const karelerFor = [];
for (let i = 0; i < sayilar.length; i++) {
karelerFor.push(sayilar[i] * sayilar[i]);
}
// Aynı işlemi map ile yapalım
const karelerMap = sayilar.map(sayi => sayi * sayi);
console.log(karelerMap); // [1, 4, 9, 16, 25]
console.log(sayilar); // [1, 2, 3, 4, 5] (orijinal dizi bozulmadı!)Gerçek hayattan bir örnek: API'den gelen kullanıcı listesinde sadece isimleri almak istiyorsunuz.
Kod:
const kullanicilar = [
{ id: 1, ad: "Ahmet", yas: 30 },
{ id: 2, ad: "Mehmet", yas: 25 },
];
const isimler = kullanicilar.map(kullanici => kullanici.ad);
console.log(isimler); // ["Ahmet", "Mehmet"]2. `filter()`: "Eleme Ustası"
`filter()` metodu, belirlediğiniz bir koşula göre diziyi elemenizi sağlar. Koşulu sağlayan elemanlar yeni bir diziye konulur.
Kod:
const sayilar = [10, 15, 23, 4, 7, 18];
// 10'dan büyük sayıları filtreleyelim
const buyukSayilar = sayilar.filter(sayi => sayi > 10);
console.log(buyukSayilar); // [15, 23, 18]Pratik örnek: Sepetteki belirli bir fiyatın üzerindeki ürünleri listelemek.
Kod:
const sepet = [
{ urun: "Laptop", fiyat: 15000 },
{ urun: "Mouse", fiyat: 250 },
{ urun: "Klavye", fiyat: 500 },
{ urun: "Monitör", fiyat: 4500 },
];
const pahaliUrunler = sepet.filter(urun => urun.fiyat > 1000);
console.log(pahaliUrunler);
// [{ urun: "Laptop", fiyat: 15000 }, { urun: "Monitör", fiyat: 4500 }]3. `reduce()`: "Hesap Makinesi"
Bu, belki de en güçlü ama en korkulan metot. `reduce()`, bir diziyi tek bir değere indirger. Bu değer sayı, dizi, obje... her şey olabilir! İki temel parametre alır: bir akümülatör (acc) ve mevcut dizi elemanı `(curr)`.
Kod:
const sayilar = [1, 2, 3, 4, 5];
// Dizideki tüm sayıların toplamını bulalım
const toplam = sayilar.reduce((acc, curr) => {
return acc + curr;
}, 0); // 0, başlangıç değeri (acc ilk bu oluyor)
console.log(toplam); // 15`reduce()` sadece toplama için değil, çok yönlüdür! Örneğin, bir diziyi nesneye dönüştürmek:
Kod:
const urunler = ["Laptop", "Mouse", "Klavye"];
// Her ürün için stok durumu 10 olan bir nesne oluşturalım.
const stokDurumu = urunler.reduce((acc, urun) => {
acc[urun] = 10;
return acc;
}, {});
console.log(stokDurumu);
// { Laptop: 10, Mouse: 10, Klavye: 10 }Büyük Sihir: Zincirleme (Chaining)
İşte bu üçlünün asıl gücü burada ortaya çıkıyor! Metotlar yeni dizi döndürdüğü için, sonucu bir sonraki metoda besleyebilirsiniz.
Kod:
const veri = [15, 3, 22, 8, 17, 4, 30];
// 10'dan büyük sayıları bul, ikiyle çarp ve hepsini topla.
const sonuc = veri
.filter(sayi => sayi > 10) // [15, 22, 17, 30]
.map(sayi => sayi * 2) // [30, 44, 34, 60]
.reduce((acc, curr) => acc + curr, 0); // 168
console.log("Sonuç:", sonuc); // Sonuç: 168Bu kadar temiz ve anlaşılır bir kod zinciri yazmak, iç içe geçmiş `for` döngüleriyle mümkün değil.
Hangi Durumda Hangisini Kullanmalı?
- `map()`: "Bu dizinin her elemanını değiştirip yeni bir dizi istiyorum" dediğinizde.
- `filter()`: "Bu diziden sadece bazı elemanları seçip yeni bir dizi istiyorum" dediğinizde.
- `reduce()`: "Bu diziyi alıp ondan tek bir şey (sayı, dizi, nesne) çıkarmak istiyorum" dediğinizde.
Umarım bu rehber, bu güçlü araçları anlamanıza ve projelerinizde güvenle kullanmanıza yardımcı olur.
Başlangıçta biraz alışmak zor gelebilir, ancak bir kere alıştığınızda bir daha `for` döngüsü yazmadan duramayacaksınız (her zaman değil tabii ).Denemek en iyi öğrenme yoludur. Kendi küçük projelerinizde bu metotlarla oynayın. Sorularınız olursa yorumlarda bekliyorum. Bir sonraki yazıda görüşmek üzere, kodlamaya devam!