JavaScript Array Map Kullanımı

Merhabalar. Bu yazımda JavaScript'te array yani diziler için kullanılan map fonksiyonundan bahsedeceğim. Array Map fonksiyonu, kendisine parametre olarak gönderilen dizinin her bir elemanını belirlenen bir işleme tabi tutup, yeni bir dizi meydana getirir. Örneğin; elimizdeki dizinin tüm elemanlarının beş katını almak istediğimiz zaman kullanabiliriz. 

Burada belirtmem gereken önemli bir husus var; Array Map fonksiyonu, kendisine parametre olarak gönderilen diziye herhangi bir müdahalede bulunmaz. O dizinin her elemanını belli bir işleme tabi tutarak yeni bir dizi meydana getirir.

Öncelikle Array Map fonksiyonunun kullanımına bir göz atalım.

array.map( function(value, index, arr), this)

Bu yazımda geçen ifadele göz atalım;

• array : Üzerinde işlem yapılacak olan diziyi belirtir. Bu dizinin her bir elemanı map fonksiyonu içinde belirleyeceğimiz işleme tabi tutulacaktır. 
• value : O anda üzerinde işlem yapılan dizi değerini belirtir. 
• arr : Üzerinde işlem yapılan diziye erişim için kullanılır.
• this : Opsiyoneldir. this değişkenine iletilecek olan değeri belirtir. 

Örnek 1: İlk örneğimizi yukarıda bahsettiğim olay üzerinden gerçekleştirelim. Bir dizinin tüm elemanlarını 5 ile çarpan fonksiyonu yazalım. 

var sayilar = [1, 4, 5, 8, 10];

var yeniDizi = sayilar.map(function(deger){
    return deger * 5;
})

console.log(yeniDizi.toString());    // Çıktı : 5,20,25,40,50

Örnekte, sayilar dizisinde 1,4,5,8,10 değerleri vardı. Oluşturduğum Array Map ile yeniDizi dizisini, sayilar dizisinin elemanlarının 5 katı ile elde ettim. Yani console.log() ifadesi ekrana 5,20,25,40,50 değerlerini yazdıracaktır. Yeri gelmişken hatırlatayım, toString fonksiyonu, dizi elemanlarını araya virgül koyarak döndürür. 

Örnek 2: Elimizde, işçilerin aldıkları maaşlara ait bir dizi olsun. Maaşı 2500 TL'nin üzerinde olanlarınkine %5, altında olanlarınkine de %10 zam yapan bir array map oluşturalım.

var maaslar = [ 2750, 3250, 2400, 2200, 2600, 4000, 2100 ];
var yeniMaaslar = maaslar.map(function(deger){
    if(deger > 2500)
        return deger * 1.05;
    else
        return deger * 1.10;
});

console.log( yeniMaaslar.toString() );

// Çıktısı : 2887.5,3412.5,2640,2420,2730,4200,2310

Örnekte de görüldüğü üzere, Array Map fonksiyonu içinde dilediğiniz JavaScript işlemini yapabilirsiniz. Ancak herhangi bir değeri return etmeyi unutmayın. Buraya da küçük bir not düşelim; bir sayıyı 1.05 ile çarpmak aslında o sayıya kendisinin yüzde 5'i kadarını eklemek demektir. Tabi aynı durum 1.10 ile çarpmak için de geçerlidir. 

Örnek 3: Şu ana kadar yaptığımız örneklerde parametrelerden sadece dizi değeri döndüreni kullandık. Bu örneğimizde index kullanımına da değinelim. Aşağıdaki örnekte, bazı sayıların karesi, bazılarının ise küpünün alınması istenmiştir.

Karesi istenen sayıların indekslerine bir bakalım. Biliyorsunuz, dizilerin indeks numaraları 0'dan başları. Bu  yüzden karesi istenen sayıların indeksleri: 0, 2 ve 4'tür.

Küpü istenen sayıların indeksleri ise 1,3 ve 5'tir. Aslında soru diyor ki; indeksi çift olan sayıların karesini, tek olan sayıların da küpünü al. Problemi tespit etmek çözmenin yarısıdır derler, gerçekten de öyle. O zaman çözüme geçelim.

var sayilar = [2, 4, 5, 7, 8, 9];
var yeni = sayilar.map(function(deger,indeks){
    if(indeks % 2 == 0)
        return Math.pow(deger,2);
    else
        return Math.pow(deger,3);
});

console.log(yeni.toString());

// Çıktısı : 4,64,25,343,64,729

Konunun daha iyi anlaşılabilmesi için hep matematiksel işlemler üzerinden örnekler verdik ama dilediğiniz işlemleri Array Map ile yapmanız mümkün. 

Soru, görüş ve önerilerinizi yorum olarak belirtebilirsiniz. Hayırlı çalışmalar dilerim.