JavaScript Array Map Metodu ve Kullanımı

JavaScript ile bir uygulama geliştirken array değişkenler ile çalışmamız gerekebilir. Bu durumlar için Array Nesnesi içinde çok sayıda metod barındırır. Bunlardan en çok kullanılanlarından bir tanesi de Array map metodudur.

Bu Bölümde Neler Göreceğiz?

Array Map Metodu Nedir? Neden Kullanılır?

Array.prototype.map()

JavaScript Array map, array nesnesinin metodlarından bir tanesidir. Yaptığı işlem, dizinin tüm elemanları üzerinde istenen işlemleri yaparak sonuçta yeni bir dizi döndürmektir. Ne demek istiyoruz? Array map metodu uygulandığı dizinin tüm elemanlarını tek tek gezer ve verilen fonksiyon üzerinde o elemanı kullanarak işlemler yapar. Elde edilen sonuçlardan yeni bir dizi oluşturarak geri dönderir. Orjinal dizi olduğu gibi kalır.

Basit bir bir örnek ile ne demek istediğimizi açıklayalım. Elimizde sayılar adında bir dizimiz olsun.

const sayilar = [1,3,5,7,9];

Bu dizinin tüm elemanlarının karesini alarak, bunlardan yeni bir dizi oluşturalım.

const sayilar = [1,3,5,7,9];
const sayilarinKareleri = sayilar.map(sayi => sayi * sayi); 
console.log(sayilarinKareleri);
// Ekrana 1, 9, 25, 49, 91 sonuçları basılır.

İşlemi sırası ile incelersek, önce sayilar adında bir dizi oluşturduk. Sonra sayilar.map(sayi => sayi * sayi) ile sayilar dizisindeki tüm elemanlar üzerinde işlem uyguladık ve sonuçlarını ekrana bastırdır. Array map metodu önce diziden 1 sayısını alacak sayi değişkenine atayacak, sonra sayi * sayi işlemi ile sayının karesi alınacak ve return edilecek. Sonrasında tüm bu işlemler kalan tüm sayılar için (3, 5, 7 ve 9) tek tek uygulanacak ve return edilen değerlerden bir dizi oluşturularak geri dönderilecektir.

Arrow fonkisyonlara aşina olmayanlar için

sayilar.map(sayi => sayi * sayi);

ile

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

aynıdır. İlk kullanımda return işlemini yazmamıza gerek yoktur. Yorumlayıcı orada bir return varmış gibi davranır.

Map Metodunu Kullanırken Nelere Dikkat Edilmeli?

JavaScript array map metodunu kullanırken dikkat etmemiz gereken hususlar şunlardır.

• Her dizi elemanını çağrılarak bir fonksiyona girdi olarak verilir ve elde edilen sonuçlardan yeni bir dizi oluşturulur.
• Callback fonksiyonu her dizi elemanı için bir defa çağrılır.
• Boş dizi elemanları için işlem yapılmaz.
• Orjinal dizi üzerinde işlem yapılmaz.

JavaScript Array Map Metodunun Söz Dizimi / Sytax Yapısı

Map metodunu kullanırken farklı söz dizimleri şeklinde kullanabiliriz. Bunları şu şekilde gösterebiliriz.

// Arrow function
map((element) => { /* … */ })
map((element, index) => { /* … */ })
map((element, index, array) => { /* … */ })

// Callback function
map(callbackFn)
map(callbackFn, thisArg)

// Inline callback function
map(function(element) { /* … */ })
map(function(element, index) { /* … */ })
map(function(element, index, array){ /* … */ })
map(function(element, index, array) { /* … */ }, thisArg)

Map Fonksiyonun Parametreleri

Array map metodunu kulanırken aşağıdaki parametreler ile kullanabiliriz.

• callbackFn, dizi üzerinde işlem yapacak callback fonksiyonunu belirtir. Bu fonksiyonu inline olarak da tanımlayabiliriz.
• element, o an işlem yapılacak dizi elemanı.
• index, işlem yapılan dizi elemanının dizideki indeksi.
• array, işlem yapılan dizi.
• thisArg, callback fonksiyonunda kullanılacak this değeri.

Kullanacağımız callback fonksiyonunun yapısına göre bu parametrelerden istediğimizi kullanabiliriz.

Array Map Kullanımına Örnekler

Şimdi bir kaç kullanım ile array map metodunu daha iyi anlamaya çalışalım.

JavaScript Array Map İsimlerden Yeni Dizi Oluşturalım

İlk yapacağımız örnekte, elimizde olan isimler dizisindeki isimleri büyük harfe çevirerek yeni bir dizi oluşturalım.

const isimler = ['Ahmet', 'Halil', 'Recep'];
const bIsimler = isimler.map(isim => isim.toUpperCase());
console.log(bIsimler);
// Ekrana
// ['AHMET', 'HALIL', 'RECEP']
// yazdırır.

Dizideki Renklerin İlk Harflerinden Yeni Dizi Oluşturalım

Şimdi renkler adında bir dizimiz olsun ve bu dizide bulunan renk adlarının baş harflerini alıp büyük harfe çevirerek yeni bir dizi oluşturalım.

const renkler = ['beyaz','kırmızı','yeşil','mor','turuncu'];

const ilkHarfleriAl = (kelime) => {
    let harf = kelime.charAt(0);
    harf = harf.toUpperCase();
    return harf;
};

const harfler = renkler.map(renk => ilkHarfleriAl(renk));
console.log(harfler);
// Ekrana
// ['B', 'K', 'Y', 'M', 'T']
// yazdırır

Dizideki İsim ve Soyisimlerden Tam İsim Oluşturalım

Şimdi yeni bir uygulama yapalım ve musteriler dizideki isim ve soy isimleri birleştirerek isimler olarak yeni bir dizi oluşturalım.

const musteriler = [
    { isim: 'Ahmet', soyad: 'Demir', yas: 49},
    { isim: 'Hasan', soyad: 'Yalçın', yas: 45},
    { isim: 'Nuri', soyad: 'Koşan', yas: 39},
]

const tamIsimYap = (musteri) => {
    let tamIsim = `${musteri.isim} ${musteri.soyad}`;
    return tamIsim;
}

const isimler = musteriler.map(musteri => tamIsimYap(musteri));
console.log(isimler);

// Ekrana
// ['Ahmet Demir', 'Hasan Yalçın', 'Nuri Koşan']
// yazdırır.

Daha kısa olarak yazmak istersek bu işlemi

const isimler = musteriler.map(musteri => `${musteri.isim} ${musteri.soyad});

şeklinde yazabiliriz.

Son Sözler

Diziler üzerinde işlem yaparken, eğer tüm dizi elemanları üzerinde işlem yapacak ve sonucunda yeni bir dizi oluşturarak, asıl diziyi olduğu gibi bırakacaksak, Array map metodu tam aradığımız metod. Eğer yeni bir diziye ihtiyacımız yoksa bu metod yerine forEach metodunu kullanabiliriz.

Soracağınız sorular veya ekleyecekleriniz varsa yorumlardan bize ulaşabilirsiniz.