JavaScript’te “map()” Metodu Kullanımı

JavaScript’te “map()” metodu, bir dizi üzerinde her bir elemanı kullanan bir fonksiyonu çalıştırır ve sonuçları yeni bir diziye kaydeder.

JavaScript’te “map()” Metodu

Metodumuz “map” adını matematiksel bir kavram olan “mapping” (eşlemek) ifadesinden almaktadır. Matematikte bu kavram, bir “tanım kümesi” içerisinde yer alan her bir elemanı, belirli bir kural ya da işlem sonucunda “değer kümesi” içerisinde bir elemana eşlemek anlamına gelir. Diğer bir deyişle, bir elemanın başka bir elemana nasıl dönüştürüleceğini tanımlayan bir fonksiyonu ifade eder.

İşte bu, tam da map() metodunun JavaScript’teki yaptığı şeydir: bir dizi elemanını alır, her birine belirli bir işlem uygular ve sonuçları yeni bir diziye eşler.

Metodumuzun söz dizimi (syntax) aşağıdaki gibidir:

array.map(function(currentValue, index, arr) {
     // dönecek değerle ilgili kod
}, thisValue);

• array: İşlem yapılacak dizi.
• function: Her eleman üzerinde çalışacak fonksiyon. Bu fonksiyon aşağıdaki parametrelere sahiptir:
  • currentValue (gerekli): Dizinin şu anki elemanı.
  • index (isteğe bağlı): Dizinin şu anki elemanının indeksi.
  • arr (isteğe bağlı): map() metodunun çağrıldığı dizi.
  • thisValue (isteğe bağlı): Fonksiyonun içinde this olarak kullanılacak değer.

Aşağıdaki örneği inceleyelim:

let numbers = [1, 2, 3, 4, 5];

let square = numbers.map(function(num) {
  return num * num;
});

console.log(square); // [1, 4, 9, 16, 25]

Yukarıdaki kodumuzda map metodu, numbers dizisinin her bir elemanını (tanım kümesi) alıp belirli bir işlem (num * num) uygulayarak onları kendi kareleriyle eşler ve bu karelerden oluşan yeni bir dizi (değer kümesi) oluşturur.

Tüm parametreleri kullandığımız bir başka örnek verelim:

let numbers = [10, 20, 30, 40, 50];

let newArray = numbers.map(function(currentValue, index, array) {
  let sum = currentValue + index + array.length;
  return sum;
});

console.log(newArray); // [15, 26, 37, 48, 59]

Yukarıdaki örneğimizde, currentValue (dizinin şu anki elemanı), index (dizinin şu anki elemanının indeksi), ve array.length (dizinin uzunluğu) toplanıyor ve bu toplam newArray değişkenine atanmıştır.

thisValue parametresi, fonksiyon içinde kullanılacak olan this değerini ayarlamak için map metoduna opsiyonel olarak verilir. Fonksiyon içerisinde kullanılan this değerini, genellikle dışarıdan bir obje referansı alarak set edebiliriz.

Örnek olarak şöyle bir durumu ele alalım: Bir objemiz olsun ve bu obje içerisinde bir değer barındırsın. map fonksiyonu içerisinde bu değeri kullanmak istiyoruz:

let obj = {
    multiplier: 2
};

let numbers = [1, 2, 3, 4, 5];

let doubled = numbers.map(function(currentValue, index, arr) {
    return currentValue * this.multiplier;
}, obj);

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

Bu örnekte, obj isimli bir nesnemiz var ve bu nesne içerisinde multiplier adında bir özellik bulunuyor. map fonksiyonunun içerisinde bu multiplier değerini kullanabilmek için thisValue olarak obj‘yi veriyoruz. Böylece fonksiyon içerisinde this kullanıldığında, bu obj nesnesini referans alıyor ve onun multiplier özelliğine erişebiliyoruz.

Belirtmek isterim ki, JavaScript’te map() metodu orijinal diziyi değiştirmez. Bunun yerine, işlem sonucunda tamamen yeni bir dizi oluşturur ve onu döndürür.

JavaScript’te map() metodunu pekala “ok” (arrow) fonksiyonu kullanarak da yazabiliriz. Bu durumda söz dizimi aşağıdaki gibi olur:

// Normal fonksiyon tanımı ile
array.map(function(currentValue, index, arr) {
     // dönecek değerle ilgili kod
}, thisValue);


// Ok (arrow) fonksiyonu ile
array.map((currentValue, index, arr) => {
     // dönecek değerle ilgili kod
});

Aşağıdaki örneği inceleyelim:

let numbers = [1, 2, 3, 4, 5];

let square = numbers.map((num) => num * num);

console.log(square); // [1, 4, 9, 16, 25]

Ok fonksiyonları this bağlamını kendi kapsamından değil, içinde bulundukları kapsamdan (enclosing scope) alırlar. Bu nedenle, ok fonksiyonunun bulunduğu kapsamdaki this değerine referans verir.