Javascript: Map, Reduce ve Filter – Bölüm 1

389

İlk olarak 2011 yılında karşımıza çıkan “map”, “filter”, “reduce” metotları, diziler ile işlem yaparken daha performanslı , daha okunabilir kodlar yazmamıza olanak veriyor.

Dört bölümlük yazı dizimde, bu kahramanların (Avengers) öykülerinden bahsedeceğim. Birinci bölüm map(), ikinci bölüm filter() ve üçüncü bölüm reduce() hakkında olacak. Finali ise kahramanlarımızın kesişen hayatlarından bahsedeceğim. Lafı fazla uzatmadan başlayalım.

map(): Son Dizi Bükücü

Temsili: Map Methodu
Görselden de anlaşılacağı gibi map() bir diziyi alıp başka bir diziye dönüştürüyor.

Javascript dokümanında ise map() şu şekilde tanımlanıyor.

“Dizinin her bir elemanı için; parametre olarak verilen (callback) fonksiyonu çağırır ve fonksiyonda belirtilen işlemlere göre yeni bir dizi(array) oluşturur.”

 

Söz Dizimi:
var new_array = arr.map(function callback(currentValue[, index[, array]]) {
// Return element for new_array
}[, thisArg])

Parametreler:

  • callback: Dizinin her bir elemanı için çağrılacak olan fonksiyondur. Üç parametre alır. Fonksiyonun ilk parametresi olan currentValue dizinin o anda işlem yapılan elemanı, ikinci parametresi olan index dizinin o anda işlem yapılan elemanın indeksi ve üçüncü parametresi olan array ise map tarafında çağrılan dizidir. currentValue parametresi zorunlu olarak callback fonksiyonuna verilmeli, diğer parametreler isteğe bağlı olarak; verilebilir yada verilmeyebilir.
  • thisArg: callback fonksiyonu çalıştırılırken kullanacağı this değeridir.

map() konusunda örneklere geçmeden önce yukarıda anlatılan parametrelerin map() içinde hangi değerleri aldığına 4 farklı örnek bakalım.

Hatırlatma: Aşağıdaki ilk dört örnekte gösterilen thisArg parametresinin kullanım mantığı thisArg parametresini alan tüm fonksiyonlarda da aynıdır.

Örnek-1: “kullaniciAdi” değişkeni thisArg olarak atanıyor. Denemek için burayı tıklayınız

 

Örnek-2: thisArg parametresine herhangi bir değer atanmıyor. Denemek için burayı tıklayınız

 

Örnek-3: thisArg parametresine yeni bir obje atanıyor. Denemek için burayı tıklayınız

Örnek-4: thisArg parametresine array atanıyor. Denemek için burayı tıklayınız

 


Uzun bir girişten sonra konumuza dönüp, map()’in gücünü ve yeteneklerini örneklerle görelim.

Örnek-1: Eleman sayısı 10000 olan ve 0 ile 10000 arasında rastgele sayılardan oluşan bir dizi oluşturup; dizi içinde tek sayı olan elamanın yerine ‘tek’, çift sayı olan elemanın yerine ‘çift’ yazalım. ([5,46,13] →[‘tek’, ‘çift’, ‘tek’]). Aynı işlemi ‘for’ döngüsü ile yapıp hız testi yapalım. Denemek için burayı tıklayın

 

 

Bundan sonraki örneklerde aşağıdaki kisiler dizisi kullanılacaktır ve “for” kullanılmayacaktır.

Örnek-2: Kişiler dizisinde 30 yaşın üzerinde olan kişilerin puanlarına 10 puan ekleyelim. Denemek için burayı tıklayınız

Örnek-3: Kişiler dizisinden sadece adi ve soyadından oluşan yeni bir dizi oluşturalım. Denemek için burayı tıklayınız

Örnek-4: Kişiler dizisinde cinsiyet bilgisine göre tekil liste oluşturalım. Denemek için burayı tıklayınız

Örnek-5{ ‘a’: 1, ‘b’: 2, ‘c’: 3 } nesnesinin tüm elemanlarını 5 ile çarpalım. Dikkat ilgili nesne bir dizi değil. Denemek için burayı tıklayınız

Örnek-6: {k1: “say”, k2: “my”, k3: “name(!)”} nesnesinden cümle yapalım. Dikkat ilgili nesne bir dizi değil. Denemek için burayı tıklayınız

Örnek-7: “Say My Name(!)” kelimesini dizi yapalım. Denemek için burayı tıklayınız.

Örnek-8: Dizinin sadece belirli elemanlarını parametre olarak geçme. Denemek için burayı tıklayınızmap()’in içinden “key2” kullanılırsa kod hata alacaktır.

Örnek-9: Key, Value bilgisi verilen bir diziden yeni bir dizi yapalım. Denemek için burayı tıklayınızkaynak

Örnek-10: [1, 4, 9] sayıların karekökünü alalım. Denemek için burayı tıklayınızkaynak

map()çok güçlü bir metot. Kullandıkça seveceksiniz. Bir sonraki bölümde filter() ile tanışacağız. Sonraki bölümde görüşmek üzere.

Kaynaklar:

Yorum yaz

Email adresiniz yayınlanmayacaktır.