Bu makale, JavaScript’in map() ve filter() metodlarının, tek başına ve birlikte kullanıldığında, verimli dizi işleme için nasıl etkili bir şekilde kullanılacağını göstermektedir. Güçlerini ve çok yönlülüklerini veri manipülasyonunda gösteren pratik örnekleri inceleyeceğiz.
İçerik Tablosu
- JavaScript Map
- JavaScript Filter
- Map ve Filter’ı Birleştirme
- Gerçek Dünya Örneği: E-ticaret Ürün Filtreleme
- Sonuç
JavaScript Map
map() metodu, bir dizideki her bir öğe üzerinde yineleme yapan ve sağlanan bir geri çağırım fonksiyonunu uygulayan daha yüksek dereceli bir fonksiyondur. Bu fonksiyon her öğeyi dönüştürür ve map() dönüştürülmüş değerleri içeren yeni bir dizi döndürür. Orijinal dizi değişmeden kalır.
const numbers = [1, 2, 3, 4, 5];
const doubledNumbers = numbers.map(number => number * 2); // [2, 4, 6, 8, 10]
console.log(doubledNumbers);
console.log(numbers); // Orijinal dizi değişmeden kalır
JavaScript Filter
filter() metodu da bir dizi üzerinde yineleme yapar. Ancak, öğeleri dönüştürmek yerine, bir geri çağırım fonksiyonu tarafından tanımlanan bir koşula bağlı olarak öğeleri seçici olarak içerir. Geri çağırım fonksiyonunun öğeyi dahil etmek için true, hariç tutmak için false döndürmesi gerekir. filter(), yalnızca koşulu karşılayan öğeleri içeren yeni bir dizi döndürür.
const numbers = [1, 2, 3, 4, 5, 6];
const evenNumbers = numbers.filter(number => number % 2 === 0); // [2, 4, 6]
console.log(evenNumbers);
Map ve Filter’ı Birleştirme
map() ve filter()‘ın gerçek gücü, birleştirildiklerinde ortaya çıkar. Bu, karmaşık veri manipülasyonlarını gerçekleştirmek için özlü ve verimli bir yol sağlar. Dizinin daraltılması için genellikle önce filter() uygulanır, ardından kalan öğeleri dönüştürmek için map() uygulanır.
const numbers = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
const evenSquared = numbers
.filter(number => number % 2 === 0)
.map(number => number * number); // [4, 16, 36, 64, 100]
console.log(evenSquared);
Gerçek Dünya Örneği: E-ticaret Ürün Filtreleme
Bir e-ticaret uygulaması düşünelim. Ürün nesnelerinden oluşan bir dizimiz var:
const products = [
{ name: "Gömlek", price: 25, inStock: true, category: "giyim" },
{ name: "Pantolon", price: 40, inStock: false, category: "giyim" },
{ name: "Ayakkabı", price: 75, inStock: true, category: "ayakkabı" },
{ name: "Şapka", price: 15, inStock: true, category: "aksesuar" },
{ name: "Ceket", price: 60, inStock: true, category: "giyim" }
];
Stokta olan giyim ürünlerinin yalnızca adlarını görüntülemek istiyoruz. Bunu filter() ve map() kullanarak zarif bir şekilde başarabiliriz:
const inStockClothingNames = products
.filter(product => product.inStock && product.category === "giyim")
.map(product => product.name);
console.log(inStockClothingNames); // ['Gömlek', 'Ceket']
Sonuç
map() ve filter()‘ı birleştirmek, JavaScript’te dizi manipülasyonu için güçlü ve okunabilir bir yaklaşım sunar. Bu fonksiyonel stil, daha temiz kod oluşturmayı, ayrıntılı döngülere olan ihtiyacı azaltmayı ve sürdürülebilirliği iyileştirmeyi sağlar. Her iki metodun da orijinal verilerin değişmezliğini koruyarak yeni diziler döndürdüğünü unutmayın.