"Enter"a basıp içeriğe geçin

Javascript Map Metodu

Merhabalar,

Birkaç aydır Twitter’da takip ettiğim genç bir geliştirici vardı, Lydia Hallie. Bu arkadaş bugün bir video paylaşmış, izledim ve çok hoşuma gitti. Daha önce Javascript’te sadece filter metodunu kullanmıştım. Bugün map ve reduce ile de tanışmış oldum ve sizlere bu öğrendiklerimi aktarmak istedim.

Bu metodların hepsini birer yazıda anlatmayı düşünüyorum. Bu ilk yazıda da sadece map metodundan bahsedeceğim.

Başlamadan önce Lydia’nın videosunu da şuraya bırakmak istiyorum.

Bazı durumlarda elimizdeki dizileri manipüle etmemiz gerekebiliyor. Bu durumda map metodu imdadımıza koşuyor.

Senaryomuz şöyle olsun: Elimizde bir dizi var ve bu dizinin içerisindeki bütün elemanların 8 fazlasını elde etmek istiyoruz.

Öncelikle map metodu olmasaydı ne yapardık diye düşünebiliriz. For döngüsü kurup bütün elemanları teker teker değiştirmemiz gerecekti. Aslında bu kodu yazması o kadar zahmetli değil ama neden map varken böyle bir şey yapılır ki? Map zaten bizim yerimize bunu yapıyor.

Konuyu daha iyi kavramanız için görsellerle biraz desteklemek istiyorum.

Görselden de anlayacağımız gibi map tam olarak şunu yapıyor: Dizi alıyor, her bir elemanını belirli işlemlere tabi tutuyor ve bu işlemler sonucunda oluşan yeni diziyi döndürüyor.

Şimdi hemen kod örneğimizi verelim ve olayı daha iyi anlayalım.

var numbers = [15, 24, 53, 8, 16, 2, 35];
var addedNumbers = numbers.map(function(number) {
  return number += 8;
});
console.log(addedNumbers);

Şunu bilmemiz gerekiyor: Map metodu kesinlikle mevcut dizi üzerinde işlem yapmaz. Bu yüzden geriye bir dizi döndürür. Kodumuzu incelerseniz addedNumbers adında bir değişken oluşturduk ve map metodunun sonucunu bu dizi içerisine aktardık.

Şimdi incelemeye devam edelim. numbers.map dedikten sonra map metoduna parametre olarak bir fonksiyon verdik ve bu fonksiyon number adında bir parametre aldı. Buradaki parametremiz bizim o anda üzerinde işlem yaptığımız dizi elemanını temsil ediyor.

Fonksiyonun içerisine baktığımızda return number += 8 ifadesini görüyoruz. Burada dikkat etmeniz gereken bir şey var. Eğer siz herhangi bir değer return etmezseniz bu durumda geriye bir undefined dönüyor. Ayrıca burada illa ki number değişkenini kullanmak zorunda da değilsiniz. Herhangi bir değer de döndürebilirsiniz. Örneğin return “test” gibi bir ifade yazarsanız yeni dizideki bütün elemanların değeri test olacaktır.

Dosyamızı index.js olarak kaydedelim. Terminalimizi açıp çalışma dizinimize gelelim ve node index.js komutuyla kodlarımızı çalıştıralım. Karşınıza şöyle bir sonuç gelmesi gerekiyor.

[23, 32, 61, 16, 24, 10, 43 ]

Eğer bu şekilde bir sonuç aldıysanız her şeyi doğru yapmışsınız demektir.

Map metodu hakkında bahsetmemiz gereken şeyler bu kadar ama benim bahsetmek istediğim bir ufak mesele daha var. Ecmascript 6 ile gelen fonksiyonlar için daha kısa bir yazım yöntemi var. Bunlara Arrow Functions deniyor. MDN’de bununla alakalı oldukça güzel örnekler ve açıklama mevcut. Linkini şöyle bırakayım:

https://developer.mozilla.org/tr/docs/Web/JavaScript/Reference/Functions/Arrow_functions

Şimdi aynı örnek üzerinden gidelim ama bu sefer ok fonksiyonları (arrow functions) kullanalım. Şu anda yazacağımız kodları yukarıdaki örneğimizin devamına ekleyebiliriz.

var addedNumbers2 = numbers.map((number) => { return number + 8; }); console.log(addedNumbers2);

Hemen biraz açıklama yapalım. Burada map dedikten sonra içerisine (number) şeklinde bir ifade yazdık. Bir önceki örneğimizle karşılaştırdığımızda buradaki bu değerin parametremiz olduğunu rahatlıkla anlayabiliriz. Parametrelerimizi parantez içerisinde belirttikten sonra bir adet ok (=>) çiziyoruz ve hemen sonrasında küme parantezlerimizi açıyoruz. Daha sonra içerisine eski örneğimizde yaptığımız şekilde kodlarımızı yazıyoruz.

Temel kullanım bu şekilde, şimdi olayı biraz daha güzelleştirelim. Gördüğünüz üzere burada sadece bir tane parametremiz var. Tek parametremizin olduğu durumlarda bu parametreyi parantez içerisine almamız gerekmiyor. Ayrıca burada tek bir tane expression yazdığımız için bu ifademizi de küme parantezleri içerisine almamız gerekmiyor. Yukarıdaki kullanım yerine şu ifadeyi de kullanabilirsiniz:

var addedNumbers2 = numbers.map(number => number + 8); console.log(addedNumbers2);

Böylece ifademizi iyice kısaltmış olduk ve tek satıra indirmiş olduk. Arrow functions hakkında daha fazla detay görmek isterseniz yukarıda verdiğim MDN linkine tıklayabilirsiniz. Çok daha fazla özelliği var ancak bu yazının konusu bu olmadığı için bunlardan bahsetmeyeceğim.

Bitirmeden önce isteyenler için ufak bir ödev bırakmak istiyorum. Map metodunu kullanarak dizi içerisindeki tek sayıları kendisinden büyük ilk çift sayıya, çift sayıları da kendisinden küçük ilk tek sayıya çeviren bir program yazın. Bunu yazdıktan sonra kodlarınızı Github’a yükleyerek linkini yorum olarak paylaşabilirsiniz. Böylece hem hatalarınız varsa diğer insanlar bunu düzeltebilir, hem de farklı insanların sorunları nasıl çözdüğünü görebilirsiniz.

Konuyla alakalı aklınıza takılan bir şey olursa yorum yoluyla sorabilirsiniz.

İyi çalışmalar dilerim…

İlk Yorumu Siz Yapın

Bir cevap yazın

E-posta hesabınız yayımlanmayacak. Gerekli alanlar * ile işaretlenmişlerdir