Javascript Arrow Fonksiyon Kullanımı
Hepinize merhaba dostlarım 😊. Bu yazımda sizlere javascript programlama diline ES6 (Samsung Galaxy S6 diye algılamayın bu başka 😅) yani Ecmascript 6 ile gelen ve fonksiyonlar konusunda bir yenilik oluşturan arrow fonksiyon dan bahsedeceğim.
Şimdi ismi biraz garip gelebilir başlarda ve aklınızda da şu soru oluşmuştur
Hocam Arrow Fonksiyon dediniz normalde bir fonksiyon olduğunu isminden anladık ama arrow deyince bu normal fonksiyondan farklı mı ?
şeklinde ufak ufak sorularınız olabilir dostlarım 😊. Mantık farklılaşmıyor normal fonksiyon oluşturmamızdan ziyade az kodla çok iş yapmamıza fayda sağlıyor 😊. Örnek verecek olursak önceden biz bir fonksiyon oluşturma ve çalıştırma işlemini
function karsila(){
alert("MFSoftware Blog | Arrow FunctionDersine Hoş Geldiniz");
}
karsila();
// Ekran Çıktısı: MFSoftware Blog | Arrow FunctionDersine Hoş Geldinizşeklindeydi dostlarım hepimiz biliyoruz 😊. Şimdi Ecmascript6 ile gelen ve javascript dünyasında bir yenilik yapan arrow fonksiyonların tanımlanması da
karsila = () =>{
alert("MFSoftware Blog | Arrow FunctionDersine Hoş Geldiniz");
}
karsila();
// Ekran Çıktısı : MFSoftware Blog | Arrow FunctionDersine Hoş Geldinizşeklindedir dostlarım 😊. Ne kadar pratik olduğunu gördünüz değil mi hızlıca bir parantez bir ok bir süslü parantez işlemlerimiz tamamlandı 😊. Şimdi daha bitmedi bazı kolaylıkları da mevcut 😊. Gelin onlara da bir göz atalım 😊
TEK SATIRLIK İŞLEMLERDE KULLANIM
Ve geldik arrow fonksiyon un bize yarar sağladığı bir konuya 😊. Normalde bizim tek satırlık işlemlerimiz olabiliyordu mesela sadece alert yazdırma komutu olsun veya bir değer atama işlemi olsun vs vs örnekler verilebilir bu projeye bağlı bir durumdur 😊. İşte dostlarım bu durumlarda önceden süslü parantez aç vs vs bir sürü işlem yapılabiliyordu 😊. Şimdi ufacık bir arrow fonksiyonla bu tek satırlık işlemi hızlıca yapabiliyoruz 😊. Gelin ona bir göz atalım
const motive = () => alert("Yeteri kadar nedeniniz varsa yapamayacağınız hiçbir şey yoktur");
motive();
// Ekran Çıktısı: Yeteri kadar nedeniniz varsa yapamayacağınız hiçbir şey yokturşeklinde gördüğünüz gibi dostlarım tek satırlık işlemi hiçbir süslü parantez açmadan hızlıca kodladık ve ekranımıza bastırdık 😊. Dediğim gibi tek satırlık işlemlerde kullanılır yani döngüydü veriyi şuraya aktar ajax ile gönder vs vs işlemleri yapamazsınız şimdiden belirteyim 😊.
TEK PARAMETRE GÖNDERME
Arrow fonksiyonlara giriş yaptığımızdan beri dostlarım fark ettiğiniz gibi herhangi bir parametre gönderme işlemini gerçekleştirmemiştik. Şimdi aklınızda da şu soru oluşmuştur 😊 ben sezdim
Hocam zaten arrow fonksiyonlar tanımlanırken () => {} şeklinde tanımlanıyor ya biz bu parantezin içerisine değişkeni aktarır kullanabiliriz değil mi ?
çok güzel kavramışsınız dostlarım cidden hepinizi tebrik ediyorum 😊. Ama tek bir parametre gönderimi işlemi için arrow fonksiyon burada da bir kolaylık getirmiş bizlere. Buna bakacak olursak dostlarım
const sayi = deger => alert("Girilen Sayı: "+deger); // Bu kısımda 'deger' bir parametredir. Bizim gönderdiğimiz değeri tutar
sayi(692);
// Ekran Çıktısı: Girilen Sayı: 692şeklindedir dostlarım 😊. Tek bir parametre göndereceğimiz durumlarda uzun uzun parantez aç kapa yapıp içerisine parametreyi yazmak yerine bu parametreyi değişken gibi gönderebiliyoruz 😊. Dikkat edin bakın tek parametrede bunu uygulayabilirsiniz birden fazla parametrede bu şekilde yapamazsınız aklınızda bulunsun 😊
BİRDEN FAZLA PARAMETRE GÖNDERME
Yukarıdaki işlemde tek bir parametre gönderiminde yani bunu değişken şeklinde kodlamada beliritip gelen değerleri bu parametre üzerinden sisteme yazdırıyorduk buraya kadar tamamız. Yeri gelecek birden fazla parametre gönderme durumları da karşımıza çıkacak dostlarım 😊. Bu durumda yukarıdaki gibi bir işlem yapamayız bunu kabul etmez arrow fonksiyon 😊. Bu durumlarda
const kisi_bilgi = (ad,soyad,yas) => {
alert("İsim: "+ad+" "+"Soyisim: "+soyad+" "+"Yas: "+yas);
}
kisi_bilgi("MFSoftware","Blog",21);
// Ekran Çıktısı: İsim: MFSoftware Soyisim: Blog Yas: 21şeklinde parantezimizin içerisine rahat bir şekilde yazabiliriz dostlarım 😊. Hani yukarıda demiştiniz ya "Parantez içerisine parametreleri atıp kullanamaz mıyız ?" diye işte bunu arrow fonksiyonlar konusunda birden fazla parametre gönderiminde yapmak daha doğru olacaktır dostlarım 😉.
Şimdiiii buraya kadar anlamışsak bu konuyu bir örnekle taçlandırmazsak olmaz 😊. Gelin bir isimler dizisi oluşturalım ve bunu da arrow fonksiyon içerisine gönderelim 😊.
const isimler = (isim_dizi) => {
isim_dizi.map(function(value,index,dizi){
console.log(isim_dizi[index]);
});
}
var dizi = [
"Zafer YILDIZ",
"Emrullah TANIMA",
"Aylin DURAN"
]
isimler(dizi);şeklinde kodlarımızı yazalım dostlarım 😊. F12 ile console kısmına geldiğimizde
Zafer YILDIZ
Emrullah TANIMA
Aylin DURANolarak sonuç çıktımızı alacağız dostlarım 😊. Bütün işlemlerimiz bu kadar basit 😊. Hiç zor bir yanı yok
Eveeeet dostlarım 😊. Bu yazımda sizlere javascript programlama dili üzerinde Ecmascript6 ile gelen arrow fonksiyon konusundan elimden geldiğince dilim döndüğünce anlatmaya çalıştım ve olayı kavramanız için de bir örnek gösterdim 😊. Umarım faydalı olmuşumdur. Eksik veya hatalı bilgi aktarımı yapmış isem benimle iletişime geçmekte çekinmeyin 😊. Konu başlarda biraz karmaşık veya zor gelebilir dostlarım anlıyorum öğrenme süreci her zaman sancılı geçer 😊. Bu yolda sizlerden istediğim tek şey "İstikrarlı ve Azimli Olmanız, Bolca Pratik Yapmanız 😊". Bu dediklerimi hayat felsefeniz yaptığınız sürece başarı sizler için kaçınılmaz olacaktır dostlarım 😊
Hayallerinizi gerçekleştirmeniz ve güzel yerlere gelmeniz dileklerimle... İyi çalışmalar dilerim 😊
Yazar Hakkında
Kendi Halinde Bir Backend Developer
Zafer Yıldız
26.04.2021Ellerinize sağlık. Böyle kaynaklar bulmak çok zor :)