Web Geliştirmede JavaScript Array Metotları ile Daha Az Kod, Daha Çok İş 
Selam dostlar! Uzun süredir forumda takılıyorum ve sık sık gördüğüm bir durum var: JavaScript'te döngüler içinde boğulmuş, karmaşık ve tekrarlayan kodlar. Özellikle de dizilerle (array) çalışırken. Bugün sizlerle, işleri inanılmaz kolaylaştıran, kodunuzu temizleyen ve bakımını bir zevk haline getiren Array Metotlarından bahsedeceğim. Eski `for` döngülerinize veda etmeye hazır olun!
Neden Array Metotları?
Eskiden bir diziyi dönüp, her eleman üzerinde işlem yapmak için hep `for` döngüsü yazardık. Bu kötü değil ama:
En Çok Kullanılan 3 Sihirbaz: map, filter, reduce
1. map() - Dönüştürücü
Bir dizinin her elemanını alır, üzerinde bir işlem yapar ve yeni bir dizi olarak döndürür. Orijinal dizi asla değişmez!
2. filter() - Eleme Ustası
Bir diziyi belirli bir koşula göre filtreler ve koşulu sağlayan elemanlardan oluşan yeni bir dizi döndürür.
3. reduce() - Toplayıcı ve İndirgeyici
Bir diziyi tek bir değere indirger. En güçlü ama bir o kadar da kafa karıştırıcı olabilir. Temel mantık: Bir "akümülatör" (toplayıcı) değeri tutar ve her eleman için ona bir şeyler katar.
Bonus Tur: Diğer Faydalı Metotlar
Zincirleme (Chaining) Gücü
İşte bu metotların asıl sihri burada başlıyor! Çünkü bunlar yeni dizi döndürdüğü için, ard arda kullanabiliriz.
Bir örnekle açıklayalım: Bir ürün listemiz var. Önce fiyatı 100 TL'den yüksek olanları filtreleyelim, sonra bu filtrelenmiş ürünlerin sadece isimlerini alalım, ve en sonunda bu isimleri büyük harfe çevirelim.
Tek satırda ne kadar çok işi hallettik, değil mi? Bu kodu `for` döngüleriyle yazmaya çalışsanız hem daha uzun hem de daha karışık olurdu.
Son Sözler
Bu metotlara alışmak biraz zaman alabilir, özellikle `reduce`. Ama bir kere alıştınız mı, bir daha geri dönmek istemeyeceksiniz. Kodunuz daha okunabilir, daha test edilebilir ve daha modern olacak.
İlk başta küçük projelerinizde deneyin. Mesela basit bir alışveriş listesi uygulaması yapın ve tüm işlemleri bu metotlarla gerçekleştirin. Zamanla içinize işleyecek.
Unutmayın, amacımız daha az kod yazmak, daha çok iş yapmak.
Herkese hatasız kodlar dilerim! Takıldığınız bir yer olursa yorumlarda buluşalım.
Selam dostlar! Uzun süredir forumda takılıyorum ve sık sık gördüğüm bir durum var: JavaScript'te döngüler içinde boğulmuş, karmaşık ve tekrarlayan kodlar. Özellikle de dizilerle (array) çalışırken. Bugün sizlerle, işleri inanılmaz kolaylaştıran, kodunuzu temizleyen ve bakımını bir zevk haline getiren Array Metotlarından bahsedeceğim. Eski `for` döngülerinize veda etmeye hazır olun!
Neden Array Metotları?
Eskiden bir diziyi dönüp, her eleman üzerinde işlem yapmak için hep `for` döngüsü yazardık. Bu kötü değil ama:
- Daha fazla satır kod yazmamıza neden olur.
- Hata yapma ihtimalimiz artar (sonsuz döngü, index hatası gibi).
- Kodu okumak ve anlamak daha zordur.
- Fonksiyonel programlama yaklaşımına uymaz.
En Çok Kullanılan 3 Sihirbaz: map, filter, reduce
1. map() - Dönüştürücü
Bir dizinin her 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];
const kareleri = sayilar.map(sayi => sayi * sayi);
console.log(kareleri); // [1, 4, 9, 16]
console.log(sayilar); // [1, 2, 3, 4] (orijinal değişmedi!)
// Gerçek hayattan örnek: API'den gelen kullanıcı listesinden sadece isimleri almak.
const kullanicilar = [{ id: 1, ad: "Ali" }, { id: 2, ad: "Zeynep" }];
const isimler = kullanicilar.map(kullanici => kullanici.ad);
console.log(isimler); // ["Ali", "Zeynep"]2. filter() - Eleme Ustası
Bir diziyi belirli bir koşula göre filtreler ve koşulu sağlayan elemanlardan oluşan yeni bir dizi döndürür.
Kod:
const sayilar = [10, 15, 23, 4, 7, 30];
const buyukSayilar = sayilar.filter(sayi => sayi > 10);
console.log(buyukSayilar); // [15, 23, 30]
// Gerçek hayattan örnek: Sepetteki aktif ürünleri listelemek.
const sepetUrunleri = [
{ id: 1, ad: "Laptop", aktif: true },
{ id: 2, ad: "Mouse", aktif: false },
{ id: 3, ad: "Klavye", aktif: true }
];
const aktifUrunler = sepetUrunleri.filter(urun => urun.aktif);
console.log(aktifUrunler); // Sadece Laptop ve Klavye nesneleri3. reduce() - Toplayıcı ve İndirgeyici
Bir diziyi tek bir değere indirger. En güçlü ama bir o kadar da kafa karıştırıcı olabilir. Temel mantık: Bir "akümülatör" (toplayıcı) değeri tutar ve her eleman için ona bir şeyler katar.
Kod:
const sayilar = [1, 2, 3, 4];
const toplam = sayilar.reduce((accumulator, suankiSayi) => {
return accumulator + suankiSayi;
}, 0); // 0, accumulator'ün başlangıç değeri
console.log(toplam); // 10
// Gerçek hayattan örnek: Sepet toplam tutarını hesaplamak.
const sepet = [
{ ad: "Kitap", fiyat: 50 },
{ ad: "Defter", fiyat: 25 },
{ ad: "Kalem", fiyat: 5 }
];
const toplamTutar = sepet.reduce((toplam, urun) => toplam + urun.fiyat, 0);
console.log(toplamTutar); // 80Bonus Tur: Diğer Faydalı Metotlar
- find(): Koşulu sağlayan ilk elemanı döndürür. `filter` gibi dizi değil, elemanın kendisini verir.
- some(): Dizide koşulu sağlayan en az bir eleman varsa `true` döndürür.
- every(): Dizideki tüm elemanlar koşulu sağlıyorsa `true` döndürür.
- forEach(): Her eleman için bir iş yapar ama yeni bir dizi döndürmez. Yan etkiler (DOM manipülasyonu gibi) için kullanışlıdır.
Zincirleme (Chaining) Gücü
İşte bu metotların asıl sihri burada başlıyor! Çünkü bunlar yeni dizi döndürdüğü için, ard arda kullanabiliriz.
Bir örnekle açıklayalım: Bir ürün listemiz var. Önce fiyatı 100 TL'den yüksek olanları filtreleyelim, sonra bu filtrelenmiş ürünlerin sadece isimlerini alalım, ve en sonunda bu isimleri büyük harfe çevirelim.
Kod:
const urunler = [
{ ad: "Monitör", fiyat: 2500 },
{ ad: "Klavye", fiyat: 350 },
{ ad: "Mouse", fiyat: 150 },
{ ad: "Kulaklık", fiyat: 800 }
];
const sonuc = urunler
.filter(urun => urun.fiyat > 100) // Fiyatı 100'den büyük olanlar
.map(urun => urun.ad) // Sadece isimlerini al
.map(isim => isim.toUpperCase()); // İsimleri BÜYÜK HARF yap
console.log(sonuc); // ["MONİTÖR", "KLAVYE", "MOUSE", "KULAKLIK"]Son Sözler
Bu metotlara alışmak biraz zaman alabilir, özellikle `reduce`. Ama bir kere alıştınız mı, bir daha geri dönmek istemeyeceksiniz. Kodunuz daha okunabilir, daha test edilebilir ve daha modern olacak.
İlk başta küçük projelerinizde deneyin. Mesela basit bir alışveriş listesi uygulaması yapın ve tüm işlemleri bu metotlarla gerçekleştirin. Zamanla içinize işleyecek.
Unutmayın, amacımız daha az kod yazmak, daha çok iş yapmak.
Herkese hatasız kodlar dilerim! Takıldığınız bir yer olursa yorumlarda buluşalım.