Günümüz programcılığında yazılan kodların miktarı katlanarak artarken; kısa, öz ve başkaları tarafından bakıldığında kolaylıkla anlaşılabilecek kod yazabilmekte aynı oranda önem kazanmaktadır.
Birçok programlama dilinde birbirinin yerine kullanılabilen metotlar ve fonksiyonlar bulunmaktadır. Ancak her birinin kendine göre artısı ve eksisi olduğundan, bir programcının nerede hangisini kullanacağına karar vermesi önem arzetmektedir.
Benzer bir durum Javascript’te Array metotları için de geçerlidir. Eğer bu dili kullanırken Array’ler ile sıkça çalışıyorsak Map, Filter ve Reduce metotlarına aşina olmamız gerekir. Aslında önceleri bu üç fonksiyonla yapılabilen her şey For döngüleri ile yapılıyordu. Fakat artık bu metotları kullanarak aynı işlemleri daha kısa kodlar yazarak gerçekleştirmemiz mümkün.
Bu yazımda sizlere Map, Filter ve Reduce metotlarının nasıl çalıştığını örneklerle açıklayacak, aynı işlemleri For döngülerini kullanarak nasıl yapacağımızı gösterecek ve tüm bunları yaparken nelere dikkat etmemiz gerektiğini anlatacağım. Hazırsanız hadi başlayalım…
ARRAY’LERİ İSTEDİĞİNİZ GİBİ DEĞİŞTİRİN: MAP
Array’lerle çalışırken bazen içerideki her elementi bir fonksiyonla değiştirmek isteriz. İşte Map tam da bu işe yarar. Kullanımı son derece kolaydır. Herhangi bir Array ile birlikte kullanabilirsiniz.
Görüldüğü gibi Map metodu argüman olarak bir callback fonksiyonu ve onun içine de üç parametre kabul eder. Hadi şimdi bir örnek ile nasıl kullanıldığına daha yakından bakalım.
Üç adet meyvenin ve fiyatlarının yazılı olduğu bir Array’imiz olsun olsun:
Amacımız bu Array’de fiyatları iki katına çıkararak meyve isimlerinden kurtulmak olsun. Yani yeni Array’imizde sadece artan fiyatların olmasını istiyor olalım.
Yukarıdaki yazım şeklinden şunu anlamaktayız. Meyveler Array’ini al, bu Array’in her bir meyvesi için fonksiyonda belirttiğim işlemi yap ve yeni değerlerle yeni bir Array oluştur. Dikkat ettiyseniz fonksiyon içindeki index ve array parametrelerini kullanmadım. Amacım işlemi sade ve anlaşılır tutmak. Siz isterseniz bu parametreleri de kullanarak daha karmaşık bir fonksiyon tanımlayabilirsiniz.
Map metodunun sonucunu atadığımız artanFiyatlar değişkenini çağırdığımız zaman sonuç şöyle olur:
Yukarıdaki yazım şeklinde callback fonksiyon yerine arrow fonksiyon kullanarak daha kısa ve sade bir yazım şekli elde edebiliriz.
Aynı şekilde artanFiyatlar değişkenini çağırdığımızda sonuç değişmeyecektir.
Bu noktada Map metodunun kullanımı ile ilgili bir kaç uyarı yapmadan önce aynı işlemi For döngüsüyle yapsaydık nasıl olurdu. Gelin önce buna bir göz atalım.
Görüldüğü gibi For döngülerinde sonuç kendiliğinden Array dönmediğinden ilk olarak boş bir Array tanımlayıp işlem yaptığımız her bir elementi içeride bu Array’a eklemek durumunda kaldık. Ancak yapılan işlemler aynı kapıya çıktığından sonuç değişmeyecektir.
Bir tarafta tek satırlık bir yöntem, diğer tarafta en az iki-üç satırlık içeriğini kendimizin mantıksal olarak doldurduğu başka bir yöntem. Karar sizin…
UYARI!!!
· Map içerisine koyduğumuz callback fonksiyonunda return yapmamız gerekir. Eğer bunu yapmazsak sonuç undefined’lar ile dolu bir Array olacaktır.
· Bu durum son derece tehlikelidir. Çünkü Javascript gerçek manada bir hata vermez. Ortaya çıkan “silent mistake” dediğimiz ve yakalaması zor olan bir hatadır.
· Bu durumdan kaçınmak için çoğunlukla arrow fonksiyon kullanmak, callback kullandığımız zaman ise return etmeyi unutmamamız gerekir.
ARRAY’LERDEN İSTENMEYEN ELEMENTLERİ ELEYİN: FILTER
“Adıyla müsemma” bir metottur. Array’in içindeki istenmeyen elementleri filtrelememize ve kalan elementlerle yeni bir Array oluşturmamıza yarar.
Filter metodu da Map metodu gibi argüman olarak bir callback fonksiyonu ve onun içine de üç parametre kabul eder. Yukarıdaki meyveler Array’ini kullanarak Filter metodunun nasıl kullanıldığına daha yakından bakalım.
Amacımız bu Array’de fiyatları 10 TL ve üzeri olan meyvelerden kurtulmak olsun. Yani yeni Array’imizde sadece fiyatı 10 TL’nin altında olan ucuz meyvelerin bulunmasını istiyor olalım.
Yukarıdaki yazım şeklinden şunu anlamaktayız. Meyveler Array’inin her meyvesine bak, fiyatı 10 TL ve altı olan meyveleri al ve bunlarla yeni bir Array oluştur.
Filter metodunun sonucunu atadığımız ucuzFiyatlar değişkenini çağırdığımız zaman sonuç şöyle olur:
Yukarıdaki yazım şeklinde callback fonksiyon yerine arrow fonksiyon kullanarak daha kısa ve sade bir sonuç elde edebiliriz.
Değişkeni çağırdığımızda sonuç değişmeyecektir.
Filter metodunun kullanımı ile ilgili uyarıları yapmadan önce aynı işlemi For döngüsüyle yapsaydık nasıl olurdu. Gelin önce buna da bir göz atalım.
Görüldüğü gibi yine başlangıçta boş bir Array tanımlayıp seçtiğimiz her bir elementi içeride bu Array’a eklemek durumunda kaldık. Filter ile yaptığımız işlemi bir For döngüsü ve içine yazdığımız If statement ile yapabildik. Ancak neticede sonuç aynı olacaktır.
UYARI!!!
· Filter içerisine koyduğumuz callback fonksiyonunda da return yapmamız gerekir. Eğer bunu yapmazsak sonuç undefined’lar ile dolu bir Array olacaktır.
· Bu durum son derece tehlikelidir. Çünkü Javascript gerçek manada bir hata vermez. Ortaya çıkan “silent mistake” dediğimiz ve yakalaması zor olan bir hatadır.
· Bu durumdan kaçınmak için çoğunlukla arrow fonksiyon kullanmak, callback kullandığımız yerlerde ise return etmeyi unutmamamız gerekir.
· Eğer Filter içine tanımladığınız fonksiyon açık bir şekilde true veya false olarak dönmüyorsa bu da çoğunlukla yakalanması zor bir hataya neden olur. Bu nedenle Filter kullanırken argüman olarak kullandığımız fonksiyonun her zaman true veya false olarak döndüğünden emin olmalıyız.
ARRAY’LERİ TEK BİR DEĞERE İNDİRGEYİN: REDUCE
Map ve Filter metotlarında yaptığımız işlem sonucunda her zaman yeni bir Array elde ettiğimizi öğrendik. Ancak bunlardan farklı olarak Reduce metodunda bir Array’deki tüm elementleri alır ve tek bir değere indirgeriz.
Reduce metodu da Array’ler ile birlikte çalışır. Yalnız argüman olarak aldığı bir callback fonksiyondan başka opsiyonel olarak ikinci bir argüman daha alır. Bu argüman Array’deki elementleri üzerine ekleyerek toplamaya başlayacağımız bir başlangıç değeridir.
Reduce içerisindeki callback fonksiyona dikkatlice baktığımızda birinci parametre her bir elementi ifade ederken ikinci parametre her seferde birinci parametre eklenerek toplanmış değeri ifade eder. Zaten ilk seferde bu parametre her zaman sıfır olacağı için, ikinci bir argüman ile buraya bir başlangıç değeri atama imkânı verilmiştir.
Reduce metodunun nasıl çalıştığını daha iyi anlamak için basit bir örnek üzerinden gidelim. Sayılardan oluşan bir Array’imiz olsun.
Şimdi bu Array’deki sayıların toplamını bulmaya çalışalım.
Yukarıdaki yazım şeklinden şunu anlamalıyız. Callback fonksiyonundaki birinci değişken (ki yaygın olarak accumulator, yani eklenen değer olarak adlandırılır) her işlemdeki o anki elementi, ikinci değişken ise mevcut işlemde o ana kadar elementlerin toplamını ifade eder. Diğer parametreleri işlemi sade tutmak adına kullanmadım. İkinci argüman olan başlangıç değerine ise “0” değerini verdim. Aslında bu argüman “0” olduğu zaman uygulamada her zaman boş bırakılır, yani hiç yazılmaz.
İşlemi atadığımız total değişkenini çağırdığımızda sonuç aşağıdaki şekilde olur.
Yukarıdaki yazım şeklinde callback fonksiyon yerine arrow fonksiyon kullanarak daha kısa ve sade bir yazım şekli elde edebiliriz.
Aynı şekilde total değişkenini çağırdığımızda sonuç değişmeyecektir.
Map ve Filter metotlarında yaptığımız gibi gelin bu işlemi bir de For döngüsüyle yapmaya çalışalım.
For döngüsünde ilk olarak boş bir değişken tanımlayıp, döngü içerisinde bu değişken üzerinde çalışmak durumunda kaldık. Yukarıdaki işlemde total değişkeni aynı sonucu verecektir.
Görünüşte For döngüsü de basit ve kısa olarak değerlendirilse de, Reduce metodu diğer parametreleri de kullanılarak daha karmaşık işlemleri daha kısa ve öz bir şekilde yapmaya olanak sağlar.
UYARI!!!
· Reduce içerisine koyduğumuz callback fonksiyonunda daima return yapmamız gerekir.
· Bu durumdan kaçınmak için çoğunlukla arrow fonksiyon kullanmak, callback kullandığımız yerlerde ise return etmeyi unutmamamız gerekir.
· Reduce metodundaki ikinci argüman olan initialValue(başlangıç değeri) unutulabilir. Eğer işleme bir başlangıç değeriyle başlanmak isteniyorsa bu duruma dikkat edilmelidir.
· Reduce metodu Map ve Filter metodunun aksine Array değil, tek bir değer döner. Ancak bu durumu yanlış anlamamak gerekir. Çünkü elimizde içinde Array’lar bulunan bir Array varsa bu durumda Reduce metodu sonucunda tek bir Array dönecektir.
Bu yazımda sizlere Javascript Array metotlarından Map, Filter ve Reduce’u anlatmaya çalıştım. Konuyu basit ve kolay anlaşılır tutmak adına karmaşık örneklerden kaçındım. Umarım faydalı olmuştur. Başka bir yazıda görüşmek üzere. İyi okumalar.
Kaynaklar:
https://code.tutsplus.com/tutorials/how-to-use-map-filter-reduce-in-javascript--cms-26209
