JavaScript’te map() Metodu

eminbasbayan

4 dk okuma

🔍 Büyütmek için tıklayın

İçindekiler

Bu yazıda neler var?

Programlamada sıkça karşılaştığımız durumlardan biri, elimizdeki verileri farklı bir forma sokmak istememizdir. JavaScript’te dizi (array) ile çalışırken, bir dizinin her bir elemanını alıp değiştirmek, üzerinde işlem yapmak ve bunlardan yeni bir dizi oluşturmak oldukça yaygın bir ihtiyaçtır. Bu gibi durumlar için JavaScript bize çok kullanışlı bir araç sunar: map() metodu.

Bu makalede, map() metodunun nasıl çalıştığını, ne işe yaradığını ve neden tercih edilmesi gerektiğini sade ve anlaşılır bir dille açıklayacağız. Ayrıca farklı örnekler üzerinden konuyu pekiştireceğiz.

`map()` Metodu Nedir?

map() metodu, bir dizi üzerinde çalışır ve her bir eleman için verilen bir fonksiyonu çalıştırarak yeni bir dizi oluşturur. Bu fonksiyonun her çalışmasından dönen değerler, yeni dizinin elemanlarını oluşturur.

Önemli bir detay: map() metodu orijinal diziyi değiştirmez. Yani üzerinde çalıştığı dizi olduğu gibi kalır, sadece dönüş değerlerinden oluşan yeni bir dizi üretir.

Kullanım Şekli

const yeniDizi = orijinalDizi.map(function(eleman) {
  return islenmisDeger;
});

Veya kısa yazım (arrow function) ile:

const yeniDizi = orijinalDizi.map(eleman => islenmisDeger);

Basit Bir Örnek: Sıcaklık Dönüştürme

Diyelim elimizde santigrat cinsinden sıcaklıkları tutan bir dizi var:

const santigratlar = [0, 20, 30, 100];

Bunları Fahrenheit’a çevirmek istiyoruz. Formülümüz:

Fahrenheit = (Santigrat × 9/5) + 32

İşte map() ile bunu kolayca yapabiliriz:

const fahrenheitlar = santigratlar.map(sicaklik => (sicaklik * 9/5) + 32);

Sonuç:

console.log(fahrenheitlar); // [32, 68, 86, 212]

Orijinal santigratlar dizisi değişmedi, ama her eleman dönüştürülerek yeni bir dizi üretildi.

Metin Üzerinde Kullanım: Öğrenci İsimlerini Biçimlendirme

Elimizde öğrencilerin küçük harflerle yazılmış isimleri olsun:

const isimler = ["ayşe", "mehmet", "cemre", "burak"];

Tüm isimlerin ilk harfini büyük yapmak istiyoruz. Bunu map() ile şu şekilde yapabiliriz:

const duzenliIsimler = isimler.map(isim =>
  isim.charAt(0).toUpperCase() + isim.slice(1)
);

Sonuç:

console.log(duzenliIsimler); // ["Ayşe", "Mehmet", "Cemre", "Burak"]

Her bir isme aynı işlem uygulandı ve dönüştürülmüş değerlerden yeni bir liste elde edildi.

Nesne Dizileriyle Kullanım: Ürün İsimlerini Alma

Gerçek hayatta genellikle diziler sadece sayı veya metin içermez. Genellikle dizi içindeki her eleman bir nesnedir. Örneğin:

const urunler = [
  { isim: "Laptop", fiyat: 15000 },
  { isim: "Telefon", fiyat: 10000 },
  { isim: "Tablet", fiyat: 8000 }
];

Sadece ürün isimlerinden oluşan bir liste yapmak istiyoruz:

const urunIsimleri = urunler.map(urun => urun.isim);

Sonuç:

console.log(urunIsimleri); // ["Laptop", "Telefon", "Tablet"]

Yani her nesne içinden sadece isim alanı alınıp yeni bir dizi oluşturuldu.

Başka Bir Nesne Örneği: Fiyatlara KDV Ekleme

Elimizde yine bir ürün listesi olsun:

const sepet = [
  { ad: "Kitap", fiyat: 120 },
  { ad: "Defter", fiyat: 30 },
  { ad: "Kalem", fiyat: 15 }
];

Her ürünün fiyatına %18 KDV ekleyip, yeni fiyatları içeren bir dizi oluşturalım:

const kdvliFiyatlar = sepet.map(urun => ({
  ad: urun.ad,
  fiyat: (urun.fiyat * 1.18).toFixed(2)
}));

Sonuç:

console.log(kdvliFiyatlar);
/*
[
  { ad: "Kitap", fiyat: "141.60" },
  { ad: "Defter", fiyat: "35.40" },
  { ad: "Kalem", fiyat: "17.70" }
]
*/

Hem veri dönüştürüldü, hem de orijinal yapıya zarar verilmeden yeni bir yapı oluşturuldu.

`map()` ile `forEach` Arasındaki Fark

Bazı öğrenciler forEach ile map() arasındaki farkı karıştırabiliyor. Şöyle düşün:

forEach → sadece işlem yapar ama sonuçları geri döndürmez.
map → her elemanı işler ve geri dönenleri bir dizide toplar.

Örnekle açıklayalım:

const sayilar = [1, 2, 3];

const sonuc1 = sayilar.forEach(sayi => sayi * 2);
console.log(sonuc1); // undefined

const sonuc2 = sayilar.map(sayi => sayi * 2);
console.log(sonuc2); // [2, 4, 6]

forEach ile işlem yapılır ama sonuç alınmaz. map ise hem işlem yapar hem sonuç üretir.

Nerelerde Kullanılır?

Bir dizideki her elemanı farklı bir forma çevirmek istiyorsan,
Dizi içinden sadece belirli alanları almak istiyorsan,
Sayısal dönüşümler, metin biçimlendirme, nesne güncelleme gibi işlemler yapacaksan

map() senin en büyük yardımcın olacaktır.

Sonuç

JavaScript’te map() metodu, dizi elemanlarını dönüştürmek için kullanılan güçlü ve pratik bir yöntemdir. Geliştirici olarak kodunu sade, okunabilir ve işlevsel hale getirmen için çok önemli bir araçtır. Özellikle büyük veri listeleriyle çalışırken, tek satırlık map() ifadeleriyle çok karmaşık işlemleri kolayca gerçekleştirebilirsin.

Yeter ki şu temel soruyu unutma: