Merhaba arkadaşlar bu yazımızda Ecmascript6 ile hayatımıza giriş yapan Arrow Function kavramından bahsedeceğiz. Fonksiyonları tanımlarken bize kolaylık sağlayan Arrow function'lar, fonksiyon kullanımında adeta devrim yapmıştır.
Javascript'te normal bir fonksiyon şöyle tanımlanmaktadır;
<script>
function ad() {
// fonksiyon çalışınca yapılmasını istenen
// işlemler
}
</script>
Arrow Fonksiyonlar ise şu şekilde tanımlanır;
<script>
merhaba = () => {
return "Merhaba Dünya!";
}
console.log(merhaba())
</script>
Eğer fonksiyon içinde tek bir satırda return veya başka bir işlem yapıyorsanız süslü parantezleri kaldırarak tek satırda kullanabiliriz.
<script>
kodlamaklazim = () => "Merhaba Kodlamaklazim";
console.log(kodlamaklazim())
</script>
Bakın kullanımı ne kadar da kolay değil mi ? :) Unutmayın bu işlem sadece tek satırlık bir işlem varsa kullanılabilir.
Eğer parametre ile kullanmak istiyorsanız, parametrelerinizi parantez içinde bildirebilirsiniz.
<script>
hosgeldin = (zafer) => "Hoşgeldin:"+zafer;
console.log(hosgeldin("Zafer"));
// Çıktı : Hoşgeldin: Zafer
</script>
Eğer tek bir parametreniz varsa parametreyi parantez içinde yazmanıza gerek kalmaz.
<script>
hosgeldin = zafer => "Hoşgeldin:"+zafer;
console.log(hosgeldin("Zafer"));
//çıktı: Hoşgeldin: Zafer
</script>
Arrow function'lar geldi diye normal fonksiyonları kullanamayacağımız anlamına gelmiyor tabii ki. Arrow fonksiyonlar normal fonksiyonlara alternatif olarak geliştirilmiştir.
Normal fonksiyonların kullanıldığı olaylar tıklanılan elementi temsil ederken arrow function 'ın kullanıldığı olaylar window nesnesini temsil eder.
<!DOCTYPE html>
<html>
<body>
<button id="btn">Arrow Function!</button>
<button id="btn-normal">Normal Fonksiyon!</button>
<p id="demo"></p>
<p id="demo_normal"></p>
<script>
var hello;
merhaba = () => {
document.getElementById("demo").innerHTML = "Arrow fonksiyonun temsil ettiği nesne: "+this;
}
function merhaba_demo(){
document.getElementById('demo_normal').innerHTML="Normal fonksiyonun temsil ettiği nesne: "+this;
}
document.getElementById("btn").addEventListener("click", merhaba);
document.getElementById("btn-normal").addEventListener("click", merhaba_demo);
</script>
</body>
</html>
Yukarıdaki kodu .html uzantısı ile kaydedip herhangi bir tarayıcı ile açtığınız zaman ekranda 2 tane buton çıkacaktır. Bu butonlara sırayla tıkladığınız zaman ekranda aşağıdaki gibi bir görüntü çıkacaktır.
Örnekte de görüldüğü üzere arrow function kullanıldığı elementi değil window nesnesini temsil etmektedir.
26 Yaşında. Araştırmayı seven, bir şeyler öğretmeye meraklı bir Bilgisayar Mühendisi
