Web geliştirme JavaScript map () Fonksiyonu Nedir? Kullanımı ve Örneklerle Anlatım

map() Fonksiyonu Nedir?​

Temel Sözdizimi​

const yeniDizi = orijinalDizi.map(function(mevcutDeger, indeks, dizi) {
  // Dönüşüm işlemi
  return yeniDeger;
});

• mevcutDeger: Dizideki mevcut eleman
• indeks (opsiyonel): Elemanın indeksi
• dizi (opsiyonel): Orijinal dizi

Örneklerle map() Kullanımı​

Örnek 1: Sayıları 2 Katına Çıkarma​

const sayilar = [1, 2, 3, 4, 5];
const ikiKat = sayilar.map(function(sayi) {
  return sayi * 2;
});

console.log(ikiKat); // [2, 4, 6, 8, 10]

Örnek 2: Arrow Function ile Kullanım​

const sayilar = [1, 2, 3];
const kareler = sayilar.map(sayi => sayi * sayi);

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

Örnek 3: Nesne Dizilerini Dönüştürme​

const kisiler = [
  { ad: "Ahmet", yas: 25 },
  { ad: "Mehmet", yas: 30 },
  { ad: "Ayşe", yas: 28 }
];

const isimler = kisiler.map(kisi => kisi.ad);

console.log(isimler); // ["Ahmet", "Mehmet", "Ayşe"]

map() Fonksiyonunun Avantajları​

1. Kod Okunabilirliği: Geleneksel for döngülerine göre daha temiz ve anlaşılır bir yapı sunar.
2. Fonksiyonel Programlama: Fonksiyonel programlama yaklaşımına uygundur.
3. Yeni Dizi Oluşturma: Orijinal diziyi değiştirmez, bu da veri bütünlüğünü korur.
4. Zincirleme Kullanım: Diğer dizi fonksiyonlarıyla (filter, reduce gibi) zincirleme kullanılabilir.

Dikkat Edilmesi Gerekenler​

1. map() her zaman yeni bir dizi döndürür.
2. Geri çağırma fonksiyonunda return ifadesi unutulmamalıdır, yoksa yeni dizi undefined değerlerle dolar.
3. Büyük veri setlerinde performans etkisi olabilir.

Gerçek Dünya Uygulaması: API Yanıtını İşleme​

// API'den gelen veri
const apiYaniti = [
  { id: 1, name: "Ürün A", price: 100 },
  { id: 2, name: "Ürün B", price: 200 },
  { id: 3, name: "Ürün C", price: 150 }
];

// Sadece ihtiyacımız olan verileri çekme
const urunListesi = apiYaniti.map(urun => ({
  id: urun.id,
  name: urun.name,
  fiyat: `${urun.price} TL`
}));

console.log(urunListesi);
/*
[
  { id: 1, name: "Ürün A", fiyat: "100 TL" },
  { id: 2, name: "Ürün B", fiyat: "200 TL" },
  { id: 3, name: "Ürün C", fiyat: "150 TL" }
]
*/

Sonuç​

Alıştırmalar​

1. Bir dizi string'i büyük harfe çeviren bir map() işlemi yazın.
2. Bir nesne dizisindeki belirli bir özelliği çıkararak yeni bir dizi oluşturun.
3. map() ve filter() fonksiyonlarını birlikte kullanarak belirli bir koşulu sağlayan elemanları dönüştürün.