Kaan Gedikli

Bir önceki yazımda map metodu üzerinde biraz duracağımı belirtmiştim. Şu sıralar React eğitimime devam etmekteyim ve burada map metodunu oldukça yaygın kullanılıyoruz. Ben de madem bu kadar yaygın kullanacağız, iyice öğreneyim diyerek notlarımı buraya aktarmaya karar verdim.

JavaScript’te map() metodu, bir diziyi döngüye alarak her bir elemanı değiştirerek yeni bir dizi döndüren bir metottur, orijinal diziyi değiştirmez, bunun yerine yeni bir dizi oluşturur. Böyle bir tanım maalesef pek bir şey canlandırmıyor kafamda, örnekleyelim öyleyse.

Örnek 1: Her elemanın değerini iki katına çıkaran bir dizi oluşturma

const sayilar = [1, 2, 3, 4, 5];

const ikiKatSayilar = sayilar.map((sayi) => {
    return sayi * 2;
});

console.log(ikiKatSayilar); 
// Sonuç: [2, 4, 6, 8, 10]

Bu örnekte, map() metodu, sayilar dizisindeki her bir elemanı alır, değerini iki katına çıkarır ve yeni bir dizi olan ikiKatSayilar dizisine ekler.

Örnek 2: İsimlerin başına “Merhaba, ” ekleyen bir dizi oluşturma

const isimler = ["Ahmet", "Mehmet", "Ayşe", "Fatma"];

const selamlar = isimler.map((isim) => {
    return "Merhaba, " + isim;
});

console.log(selamlar);
// Sonuç: ["Merhaba, Ahmet", "Merhaba, Mehmet", "Merhaba, Ayşe", "Merhaba, Fatma"]

Bu örnekte, map() metodu, isimler dizisindeki her bir ismi alır, “Merhaba, ” ile birleştirir ve yeni bir dizi olan selamlar dizisine ekler.

Örnek 3: Bir nesnenin belirli bir özelliğini içeren bir dizi oluşturma

const ogrenciler = [
    { ad: "Ahmet", yas: 20 },
    { ad: "Mehmet", yas: 22 },
    { ad: "Ayşe", yas: 21 }
];

const ogrenciIsimleri = ogrenciler.map((ogrenci) => {
    return ogrenci.ad;
});

console.log(ogrenciIsimleri);
// Sonuç: ["Ahmet", "Mehmet", "Ayşe"]

Bu örnekte, map() metodu, ogrenciler dizisindeki her bir öğrenci nesnesini alır ve sadece ad özelliğini içeren yeni bir dizi olan ogrenciIsimleri dizisine ekler.

Kullandıkça daha da oturacaktır, yazımı oldukça basit ve çok da kullanışlı bir metot. Akılda kalması açısından bolca pratik yapılabilir. Daha fazlası için MDN‘e bakabilirsiniz.