JavaScript'te normal fonksiyonlarla arrow fonksiyonların farkları ve hangi durumda hangi söz dizimi kullanılmalı

• JavaScript fonksiyon tanımlama için function anahtar sözcüğüyle yapılan tanım, fonksiyon ifadesi ve arrow function gibi farklı yollar vardır
• Fonksiyon bildirimi için hoisting geçerlidir; bu nedenle kodun herhangi bir yerinden referans verilebilir
• Arrow (ok) fonksiyonlarının avantajı kısa ve sade söz dizimi olsa da, this/arguments/super binding'i olmaması gibi önemli farkları vardır
• Constructor fonksiyonlar, generator'lar ve metotlar için arrow function kullanımı uygun değildir
• Basit callback'ler veya anonim fonksiyonlar için arrow function daha uygundur

---

Function Declarations, Function Expressions, and Arrow Functions

• JavaScript'te fonksiyonlar üç şekilde tanımlanabilir: fonksiyon bildirimi (statement), fonksiyon ifadesi (expression) ve arrow function
• Fonksiyon bildirimi, function isVowel(chr) { ... } örneğinde olduğu gibi adı doğrudan bağlar ve kodun herhangi bir yerinden referans verilebilir (hoisting). Stack trace ve debugging sırasında fonksiyon adı açıkça görünür
• Fonksiyon ifadesi, const takeWhile = function(predicate, arr) { ... } örneğinde olduğu gibi anonim bir fonksiyonun bir değişkene atanması biçimindedir
• Fonksiyon ifadelerine içten bir ad da verilebilir; ancak bu isim dış scope'a bağlanmaz ve çoğunlukla stack trace'te hata takibi için kullanılır

Hoisting and Naming

• Fonksiyon bildirimi, JavaScript motoru tarafından hoist edildiği için, bildirilmeden önce çağrılsa bile çalışır
• Anonim fonksiyon ifadeleri ise yalnızca değişkene atandıktan sonra çağrılabilir
• Debugging için fonksiyonlara açıkça isim vermek, stack trace içinde avantaj sağlayabilir

Arrow Functions

• Kısa ve sade söz dizimi: function anahtar sözcüğü olmadan (parametreler) => { ... } biçiminde yazılır
• Her zaman anonimdir (ancak bir değişkene atanarak isim varmış gibi kullanılabilir)
• Yalnızca expression olarak kullanılabilir, statement değildir
• this/arguments/super binding'i yoktur: fonksiyon bildirimi/ifadesinden farklı olarak üst scope'taki this değerini yakalar
• Tek bir expression varsa süslü parantezler ve return atlanabilir; tek parametre varsa parantezler de atlanabilir
• Constructor olarak kullanılamaz: arrow function'lar new anahtar sözcüğüyle çağrılamaz ve constructor fonksiyon gibi davranmaz
• Generator olamaz: yield kullanılamaz, generator fonksiyona dönüştürülemez
• Kod örneği:

  const sum = (a, b) => a + b;  
  const square = x => x * x;  
  

Practical Example: this, constructor ve generator

• Normal fonksiyonlar ile arrow function'ların this işleyişi arasındaki farkı gösteren örnekler veriliyor
  • Bir nesne içinde metot olarak kullanıldığında, normal fonksiyonun this değeri nesnenin kendisini gösterirken arrow function undefined ya da dış scope'taki this değerini gösterir
• Bir constructor fonksiyon arrow function olarak tanımlandığında TypeError oluşur
• Generator fonksiyonlar için mutlaka function* söz dizimi kullanılmalıdır

Hangi fonksiyon söz dizimi ne zaman seçilmeli?

• Generator (yield kullanımı) gerekiyorsa → function* kullanın
• this kullanılması gerekiyorsa → function anahtar sözcüğünü veya sınıf metodunu kullanın
• Hoisting gerekiyorsa ya da üst seviyede daha iyi okunabilirlik isteniyorsa → fonksiyon bildirimi kullanın
• Bunların hiçbiri gerekmiyorsa → daha kısa olduğu için arrow function tercih etmek avantajlıdır

Sonuç

• JavaScript'te fonksiyon söz dizimi; kullanım amacı, this gereksinimi ve constructor/generator ihtiyacına göre seçilmelidir
• Gündelik callback'ler ve basit fonksiyonlar için arrow function en iyi seçimdir
• Nesne metotları / constructor'lar / generator'lar için function söz dizimi gerekir
• Hoisting ya da bildirim sırası konusunda esneklik gerekiyorsa fonksiyon bildirimi daha avantajlıdır

[ng0301]

Temelleri kadar prototype bulunup bulunmaması da ...
Oluşturulan üst düzey fonksiyonların referans yöntemi de ...

[bichi]

const a = (a: () => null): (() => () => null) =>() => a

[bichi]

() => ❤️