EcmaScript 6 ile birlikte JavaScript arrow fonksiyonu da kullanımımıza sunuldu. Arrow fonksiyonu ile kodlarımızı daha kısa bir şekilde yazabiliyoruz.
Şimdi arrow fonksiyonunun kullanımını örnekler üzerinden daha iyi anlamaya çalışalım. İlk olarak standart olarak bir fonksiyon yazalım. Daha sonra ise aynı fonksiyonu arrow fonksiyonu şeklinde yazalım.
Standart Fonksiyon Kullanımı
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
<script> topla = function() { return 5 + 7; } console.log(topla()); </script> |
Çıktısı : 12
Arrow Fonksiyon Kullanımı
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
<script> topla = () => { return 5 + 7; } console.log(topla()); </script> |
Çıktısı : 12
Gördüğünüz gibi yukarıdaki iki örnekte de aynı çıktıyı elde ediyoruz.
Eğer fonksiyon geriye sadece bir değer döndürüyorsa süslü parantezleri ve return anahtar kelimesini kaldırıp kodumuzu daha da kısaltabiliriz.
|
1 2 3 4 5 6 7 8 9 |
<script> topla = () => 5 + 7; console.log(topla()); </script> |
Çıktısı : 12
Eğer parametre alan bir fonksiyon yazıyorsanız parametreleri aşağıdaki gibi parantezler içerisine yazmalısınız.
|
1 2 3 4 5 6 7 8 9 |
<script> topla = (sayi3, sayi4) => 5 + 7 + sayi3 + sayi4; console.log(topla(4, 3)); </script> |
Çıktısı : 19
Eğer sadece bir parametre alan fonksiyonunuz varsa parantezleri de yazmayabilirsiniz.
|
1 2 3 4 5 6 7 8 9 |
<script> topla = sayi3 => 5 + 7 + sayi3; console.log(topla(4)); </script> |
Çıktısı : 16
Tarayıcı Desteği
JavaScript arrow fonksiyonu için tam desteğe sahip ilk tarayıcı sürümlerini şunlardır:
- Chrome 45
- Edge 12
- Firefox 22
- Safari 10
- Opera 32
Umarım sizin için faydalı bir yazı olmuştur.
Şu yazılar da ilginizi çekebilir.
JavaScript Fonksiyonlar – Fonksiyon Tanımlama ve Kullanımı
Yeni bir yazımda görüşmek üzere.
