Javascript Map Fonksiyonu Kullanımı
Hepinize merhaba dostlarım :). Bu yazımda sizlere javascript programlama dilinde sıklıkla kullanılan ve geliştiricilerin olmazsa olmazı olan bir fonksiyon olan map() fonksiyonundan bahsedeceğim :). İsminden İngilizce karşılık olarak harita diye bir çıkarım yapan dostlarım vardır ve zihinlerinde harita eklentisi vs diye bir şeyler canlanmış olabilir :). Olay biraz farklı dostlarım :). O halde sözümüzü daha fazla uzatmadan gelelim map() fonksiyonunu mantıksal bir tanımlama yaparak inceleyelim :).
map() Fonksiyonu Nedir ?
Eveeeet artık konumuza yavaştan yavaştan girişimizi yapalım. Dostlarım map() fonksiyonu bizim projemizde bir diziden başka bir dizi oluşturacağımız zamanlarda çokça yardım sağlar. Nedir bu diye merak ediyorsanız size mantıksal bir açıklama yapayım
Örnek olarak bir sayılar diziniz var diyelim. Bu sayıların 3 katını aldırıp başka bir diziye aktaracaksınız varsayalım. İşte bu noktada size map() fonksiyonu çok ama çok yardımcı olur. Veya bir isimler diziniz olsun diyelim. Bu isimleri ters yazdırmanız gerekti. İşte bu noktada size map() fonksiyonu çok büyük yardımcı olur :).
İçerisine bir fonksiyon alır ve bu fonksiyon 3 adet parametre alır:
- Parametre: Üzerinde değişiklik yapılıp başka bir diziye aktarılacak dizinin index değeri (zorunlu)
- Parametre: Üzerinde değişiklik yapılıp başka bir diziye aktarılacak dizinin indexi (zorunlu)
- Parametre: Üzerinde değişiklik yapılacak dizi (zorunlu değil)
Alınacak parametreler bunlardır dostlarım. Biraz karmaşık gelmiştir dostlarım :). Şimdi gelelim ufak ufak algoritmalarla bu map() fonksiyonumuzu kullanmaya :)
map() Fonksiyonu Kullanımı
Örnek 1: Birinci örneğimizde dostlarım bir sayılar dizimiz olsun ve başka bir diziye bu sayıların 3 katını yazdıralım. Öncelikle bir javascript dosyası oluşturalım ve aşağıdaki komutlarımızı yazdıralım
const dizi = [1,4,7,2,5,8]; // ilk dizimizi oluşturduk
var yeni_dizi = []; // ikinci dizimizi oluşturduk
yeni_dizi = dizi.map(function(value,index,dizi){
return value*3; // dizi değişkenimizin içerisindeki değerleri 3 ile genişletip yeni diziye aktardık
});
alert(yeni_dizi); // Ekrana Bastırdık
// Ekran Çıktısı: 3,12,21,6,15,24şeklinde bir çıktı karşımıza gelecektir. Şimdi aklınıza şu soru gelmiştir
Hocam her şey tamam çok güzel de biz burada ne yaptık ?
Çok güzel bir soru sordunuz dostlarım :). Hemen anlatayım ne yaptık ne ettik burada
- Örnek olarak bir dizi oluşturduk
- İçerisine veri aktaracağımız dizimizi oluşturduk
- Oluşturduğumuz ilk dizimizin değerlerini teker teker kontrol ettirip bu değerleri 3 ile çarptırdık
- Daha sonra bu diziyi ekranımıza alert() fonksiyonuyla bastırdık
- Veee sonuç olarak ekranımıza "3,12,21,6,15,24" sonucunu bastırdı :)
İşte dostlarım bütün işlemlerimiz bu kadar :). Şimdi gelelim diğer bir örneğimizi yapalım.
Örnek 2: Bu örnekte ise isimler dizisi oluşturalım. Bu isimler dizimiz içerisindeki isimleri başka bir diziye ters çevirip yazdırma işlemini yaptıralım
var isimler = ["Zafer","Emrullah","Mehmet","Elif","Ayten"]; // isimler dizimizi oluşturduk
var ters_isim = []; // yeni oluşturacağımız diziyi boş bir dizi olarak tanımladık
ters_isim = isimler.map(function(value,index,isimler){
return value.split('').reverse().join(''); // ters isim dizisine isimler dizisinden gelen her değişkeni ters çevirip aktar dedik
});
alert(ters_isim); // ters_isim dizisini ekrana yazdır dedik
// Ekran Çıktısı: refaZ,hallurmE,temheM,filE,netyAşeklinde kodumuzu yazdık. Bu kısımda süreç nasıl işledi diye merak ediyorsanız dostlarım hemen size açıklayayım :).
- Ters çevireceğimiz isimleri isimler isimli bir dizi oluşturup içerisinde tanımladık.
- Ters çevirdiğimiz isimleri tutacağımız ters_isim dizisini oluşturduk.
- isimler dizimizi map() fonksiyonumuzla teker teker gezip içerisindeki ismi ters çevirdik (value.split('').reverse().join('') kısmı)
- Daha sonra bu ters_isim değişkenimizi ekranımıza yazdırdık
- Sonuç olarak da ekran çıktımız da "refaZ,hallurmE,temheM,filE,netyA" şeklinde oldu :).
İşte işlemler bu kadar dostlarım :). Şimdi ise hayattan bir örnek yazalım.
Örnek 3: Bu örneğimizde de ekranmızda kişiler olsun ve bunların yaşları olsun. Yaşı 18 den büyük olanlar için ehliyet alabilir, değilse ehliyet alamaz değerini yazdıralım
var kisiler = [
["Zafer",26],
["Emrullah",26],
["Mehmet",21],
["Hasan",12],
["Melih",8],
["Elmas",32],
]; //----------------------- kişiler dizimizi oluşturduk
var ehliyet = []; // ehliyet alabilme durumu olan kişileri tutacağımız dizimizi oluşturduk
ehliyet = kisiler.map(function(value,index,kisiler){
if(kisiler[index][1]>=18){
return kisiler[index][0]+" Ehliyet Alabilir"; // yaş değeri 18 ve üzeri ise ehliyet alabilir dedik
}else{
return kisiler[index][0]+" Ehliyet Alamaz"; // yaş değeri 18 den aşağı ise ehliyet alamaz dedik
}
});
alert(ehliyet); // sonucu ekrana bastırdık
// Ekran Çıktısı: Zafer Ehliyet Alabilir,Emrullah Ehliyet Alabilir,Mehmet Ehliyet Alabilir,Hasan Ehliyet Alamaz,Melih Ehliyet Alamaz,Elmas Ehliyet Alabilirşeklinde kodumuzu yazdık dostlarım :). Şimdi ise sürecin nasıl işlediğine gelin bir göz atalım derim
- İlk olarak kişilerimizi ve bunların yaşlarını tutan bir dizi oluşturduk
- Daha sonrasında ehliyet alabilme ve alamama durumlarına göre kullanıcıları içinde tutacağımız diziyi (ehliyet dizisini) oluşturduk
- Kişiler dizisini teker teker gezip kişilerin yaşlarını sorguladık. 18 den büyük veya eşit ise Ehliyet Alabilir, Değilse Ehliyet Alamaz uyarısını aldırdık
- Daha sonra ehliyet dizisini ekranımıza bastırdık
- Ve ekran çıktımızda olduğu gibi "Zafer Ehliyet Alabilir,Emrullah Ehliyet Alabilir,Mehmet Ehliyet Alabilir,Hasan Ehliyet Alamaz,Melih Ehliyet Alamaz,Elmas Ehliyet Alabilir" sonucunu aldık
Eveeeet dostlarım :). Bu yazımda sizlere javascript programlama dilinde map() fonksiyonu nedir, ne değildir, ne zamanlarda kullanılır dilim döndüğünce bahsettim. Umarım faydalı olmuşumdur. Eksik veya hatalı bir anlatımım varsa benimle iletişime geçmekten çekinmeyin. Konu başlarda biraz karmaşık veya zor gelmiş olabilir dostlarım anlıyorum. Bu durumda sizlerden istediğim şey "İstikrarlı ve Azimli Olmalı, Bolca Pratik Yapmalısınız :)". Bu dediklerimi hayat felsefeniz yaptığınız sürece başarı sizler için kaçınılmaz olacaktır :).
Hayallerinizi gerçekleştirmeniz ve güzel yerlere gelmeniz dileklerimle... İyi çalışmalar dilerim :)
Yazar Hakkında
Kendi Halinde Bir Backend Developer