JavaScript Arrow Function: =>, this ve Kullanım Yerleri

Fonksiyon Yazmanın Daha Kısa Yolu

JavaScript arrow function, fonksiyon tanımlamanın daha kısa ve şık bir yoludur. ES2015 ile hayatımıza giren ok fonksiyonları, özellikle array metodlarına verilen callback'lerde, promise handler'larında ve event listener'larda artık standart hâline geldi.

Yapısı şöyle: önce parametreler, sonra =>, ardından fonksiyonun gövdesi.

Klasik yazımla aynı sonucu verir:

const add = function (a, b) {
    return a + b;
};

Daha az kod yazmak tabii hoş bir şey ama arrow function'ları asıl önemli kılan şey implicit return ve this'i ele alış biçimleri. İkisine de birazdan geliyoruz.

Implicit return (örtük dönüş)

Fonksiyonun gövdesi tek bir ifadeden ibaretse süslü parantezleri ve return'ü atabilirsin. İfadenin değeri otomatik olarak döndürülür:

Arrow function'lar tam da burada parlıyor — tek satırlık dönüşümler matematiksel ifade gibi okunuyor:

Birden fazla ifadeye ihtiyaç duyduğunuz an, yeniden süslü parantezlere ve açıkça yazılmış bir return ifadesine dönersiniz:

return yazmayı unutmak, arrow function'larda en sık yapılan hatadır. Süslü parantez açtığınız anda gövde bir blok hâline gelir ve x => { x * 2 } gibi bir yazım undefined döndürür — içerideki ifade hiçbir işe yaramadan boşa gider.

Parametre Parantezleri

Tek parametre varsa parantez kullanmak zorunda değilsiniz:

Sıfır, iki veya daha fazla parametrede parantez şart:

Bazı ekipler tutarlılık adına her zaman parantez kullanmayı tercih eder. İkisi de geçerli — birini seçip ona sadık kalın yeter.

Arrow Function ile Nesne Literal Döndürmek

Burada küçük bir tuzak var. Bir nesneyi implicit return ile döndürmeye çalışırsanız, süslü parantezler fonksiyon gövdesi gibi algılanır:

Bu kod undefined basar. Çünkü JavaScript { name: name } ifadesini bir nesne değil, etiketli ifade içeren bir blok olarak yorumluyor. Bunu bir expression olarak değerlendirmesi için nesneyi parantez içine almanız gerekir:

{ ... } ifadesini () ile sarmak, bu sorunun çözümü. Bunu bir kenara not edin — ok fonksiyonlarıyla çalışmaya başladığınızın daha ilk haftasında bu tuzağa düşeceksiniz.

Lexical this nedir

Ok fonksiyonlarının asıl var oluş sebebi kısa sözdizimi değil. Asıl mesele şu: arrow function'ların kendi this'i yoktur. Bulundukları scope'un this'ini olduğu gibi devralırlar.

Bunun neden önemli olduğunu görmek için, callback olarak kullanılan klasik bir function örneğine bakalım:

setInterval'e verilen function () { ... } içinde this artık counter değildir. Normal fonksiyonlar, this değerini nasıl çağrıldıklarına göre kendileri belirler ve setInterval callback'i çağırırken this'i strict mode'da undefined, değilse global nesne olarak geçer.

Ok fonksiyonu ise dışarıdaki metodun this'ini olduğu gibi korur:

Arrow fonksiyonun içinde this hâlâ counter'a işaret eder, çünkü arrow fonksiyonlar kendi this'ini oluşturmaz. Arrow fonksiyonlardan önce bu soruna const self = this; ya da .bind(this) gibi yöntemlerle çözüm aranıyordu. Bu kalıplar hâlâ çalışıyor ama artık pek ihtiyaç duyulmuyor.

Arrow Fonksiyonlarda Olmayan Şeyler

Lexical this davranışı aslında daha büyük bir kuralın parçası: arrow fonksiyonlar, normal fonksiyonların sahip olduğu birkaç şeyden mahrum.

• Kendi this'i yok — bulunduğu kapsamdan (scope) miras alır.
• arguments nesnesi yok — yerine rest parametrelerini (...args) kullanın.
• new ile çağrılamaz — arrow fonksiyonu constructor olarak kullanamazsınız.
• prototype özelliği yok — new desteklememesinin doğal sonucu.

...args sana arguments'ın sağladığı "kaç tane argüman gelirse gelsin kabul et" özelliğini verir, üstüne bir de bunun gerçek bir dizi olması cabası. new Greeter(...) çağrısı ise hata fırlatır, çünkü arrow function'lar constructor olarak kullanılamaz.

Arrow Function Ne Zaman Kullanılmamalı?

Arrow function'lar callback'ler için varsayılan tercihtir, ama bazı durumlarda yanlış seçim olurlar:

Ok söz dizimiyle tanımlanan nesne metotlarında this, nesneye bağlanmaz; bunun yerine nesne literalinin yazıldığı yerin (genelde modül veya global kapsam) this değerini miras alır. Metot tanımlarken kısa metot söz dizimini (greet() { ... }) kullanın.

Aynı mantık şunlar için de geçerli: sınıf prototipi metotları, this'in elementi göstermesi gereken event handler'lar ve new ile çağırmayı planladığınız fonksiyonlar. Bu durumlarda normal function ifadesi doğru seçimdir.

Pratik Bir Kural

• Kısa, tek ifadelik callback mi? Arrow function.
• this'in dış kapsama bağlı kalmasını mı istiyorsun? Arrow function.
• Bir nesneye veya sınıf prototipine metot mu tanımlıyorsun? Normal fonksiyon (ya da kısa metot söz dizimi).
• Constructor mu yazıyorsun? Normal fonksiyon, hatta daha iyisi bir class kullan.

Gerçek hayattaki herhangi bir JavaScript projesinde iki stili de bir arada görürsün. Hangisinin nereye uyacağını anlamak, birkaç hafta başkalarının kodunu okumakla oturuyor — sonrasında seçim refleks haline geliyor.

Sırada: Parametreler ve Varsayılan Değerler

Arrow function'lar ve normal fonksiyonlar aynı parametre özelliklerini paylaşır: varsayılan değerler, rest parametreleri, destructuring ile argüman alma ve daha fazlası. Bir sonraki sayfanın konusu bu ve şimdiye kadar gördüğün her fonksiyon türü için geçerli.