Arrow Function

JavaScript’te fonksiyon yazmanın birçok yolu vardır. ECMAScript 6 (ES6) ile gelen “Arrow Functions” (ok fonksiyonları), kısa ve öz bir şekilde fonksiyon yazmamızı sağlayarak geliştiricilerin kodu daha temiz ve anlaşılır yazmasına yardımcı olur. Klasik bir fonksiyon tanımlaması ile Arrow Function karşılaştırıldığında, ok fonksiyonlarının daha kısa ve okunabilir olduğunu görebiliriz.

Geleneksel Fonksiyon Yazımı

function toplama(a, b) {
  return a + b;
}

JavaScript’te bir fonksiyon tanımlamak için kullanılan function anahtar kelimesiyle başlarız. Bu örnekteki fonksiyonun adı toplama olup iki parametre (a ve b) alır. Parametreler, fonksiyonun çalıştırıldığında hangi değerler üzerinde işlem yapacağını belirler. Fonksiyonun gövdesi {} ile açılır ve kapanır; bu gövde içinde işlemler tanımlanır. return ifadesi, fonksiyonun sonucunu döndürmek için kullanılır. Bu örnekte, a + b ifadesiyle a ve b parametreleri toplanarak sonuç geri döndürülür.

Arrow Function Yazımı

Şimdi de yukarıda kodun arrow function ile yazılmış halini inceleyelim.

const toplama = (a, b) => a + b;

Bu örnekte, const anahtar kelimesiyle toplamabir değişken tanımlıyoruz. Fonksiyonu bir değişkene atamak için ok fonksiyonları (arrow functions) kullanıyoruz. (a, b) kısmı, fonksiyonun aldığı iki parametredir ve parametreler fonksiyona verilecek iki değeri temsil eder. => işareti, fonksiyonun gövdesini başlatan kısa bir sözdizimidir ve hemen ardından gelen ifade, fonksiyonun ne yapacağını gösterir. Bu örnekte a + b işlemi yapılarak a ve b parametreleri toplanır ve sonucunda toplam değeri geri döndürülür.

Geleneksel fonksiyon yazımında 3 satır süren bir işlemi, arrow (ok) fonksiyonuyla tek satırda yazabiliyoruz. Bu da kodu daha okunabilir, takip edilebilir ve temiz hale getiriyor.

ARROW FUNCTION YAZIM ŞEKİLLERİ

() => expression

Parametresiz bir arrow (ok) fonksiyonudur. Fonksiyonun çalıştırıldığında döndüreceği değer bir ifadedir.

const hello = () => "Merhaba, Dünya!";
console.log(hello()); // "Merhaba, Dünya!"

Eğer kodumuz örnekte olduğu gibi basit bir işlemse, süslü parantezler ve return ifadesine gerek kalmadan, işlemi tek satırda yazabiliriz.

param => expression

Tek parametre alan bir arrow fonksiyonudur. Tek parametre olduğunda parantezlere gerek yoktur. Yine fonksiyon, tek bir ifade döndürür.

const islem = sayi => sayi * sayi;
console.log(islem(4)); // 16

Bu örnekte selamla adında parametresiz bir arrow function tanımlıyoruz. Fonksiyonun içinde herhangi bir parametre bulunmuyor ve çalıştırıldığında "Merhaba, Dünya!" ifadesini döndürüyor. Bu tür fonksiyonlar, belirli bir işlevi yerine getirmek için parametreye ihtiyaç duymadıklarında kullanışlıdır.

(param) => expression

Tek parametre alan ama parantez kullanılarak tanımlanmış bir arrow fonksiyonudur. param => expression ile aynı anlama gelir, sadece parantez eklenmiştir.

const islem = (sayi) => sayi * sayi;
console.log(islem(4)); // 16

(param1, paramN) => expression

Birden fazla parametre alan bir arrow fonksiyonudur. Parametreler parantez içinde yazılır ve yine fonksiyon tek bir ifade döndürür.

const sum = (a, b) => a + b;
console.log(sum(3, 5)); // 8

Bu örnekte toplama adında bir arrow function tanımlıyoruz. İçinde bulunan ifade a + b, bu iki parametrenin toplamını hesaplayarak döndürür. console.log ile fonksiyonu çağırdığımızda, 3 ve 5 değerlerinin toplamı olan 8 sonucu konsola yazdırılır. Bu tür fonksiyonlar, birden fazla değeri işlemek için oldukça kullanışlıdır.

param => { statements }

Tek parametre alan ve birden fazla işlem içeren arrow fonksiyonudur. Süslü parantez içinde işlemler yapılır ve return ile sonuç döndürülür.

const islem = x => {
  const result = x * 2;
  return result + 3;
};
console.log(islem(5)); // 13

Bu örnekte islem adında bir arrow function tanımlanmıştır ve bu fonksiyon tek bir parametre olan x'i alır. Süslü parantez içinde iki işlem yapılır: Öncelikle x, 2 ile çarpılarak result değişkenine atanır. Ardından, result değerine 3 eklenir ve sonuç döndürülür.

(param1, paramN) => { statements }

Birden fazla parametre alan ve birden fazla işlem içeren arrow fonksiyonudur. Yine süslü parantezler içinde işlemler yapılır.

const islem = (a, b) => {
  const toplam = a + b;
  const carpim = a * b;
  return { toplam, carpim };
};
console.log(islem(3, 4)); // {toplam: 7, carpim: 12}

Dipnot: toplam ve carpim değişkenleri fonksiyonun içinde tanımlandığı için dışarıdan erişilemez. Dolayısıyla onları doğrudan yazmaya çalıştığınızda undefined hatası alırsınız.

Get Gaye Dinç’s stories in your inbox

Join Medium for free to get updates from this writer.

Remember me for faster sign in

Eğer toplam ve carpim değişkenlerine fonksiyon dışında erişmek istiyorsanız bu değişkenleri global alanda tanımlamanız gerekir ancak bu genellikle önerilmez çünkü kodun karmaşıklığını artırabilir ve değişken çakışmalarına neden olabilir.

LEXIAL THIS VE AVANTAJLARI

Arrow fonksiyonları kendi this değerini bağlamaz; bunun yerine this değerini tanımlandıkları üst kapsamdan (lexical scope) miras alırlar. Bu durum arrow fonksiyonlarının this anahtar kelimesinin normal fonksiyonlardan farklı bir şekilde çalışmasına neden olur.

Normal bir fonksiyonda this, çağrıldığı nesneye bağlıdır; oysa arrow fonksiyonlarda this, tanımlandığı bağlamdaki nesneye (global veya üst kapsama) referans verir. Bu özellik bazı senaryolar için arrow fonksiyonlarını mükemmel bir seçim haline getirirken, diğer durumlar için istenmeyen sonuçlara yol açabilir.

Özellikle olay işleme veya geri çağırma fonksiyonları gibi durumlarda arrow fonksiyonları this değerini doğru bir şekilde koruyarak kodun daha okunabilir ve hatasız olmasına katkı sağlar. Ancak bazı durumlarda this değerinin beklenenden farklı bir nesneye referans vermesi kodun beklenmedik şekilde çalışmasına neden olabilir.

Geleneksel Fonskiyonda this kullanımı

function myFunction() {
  console.log(this);
}

myFunction();

Console’da gözüken çıktı aşağıdadır:

Bu kodda myFunction normal bir fonksiyon olarak tanımlandığı için çağrıldığında this değeri global nesne olan pencere (window) nesnesini gösterir. Normal fonksiyonlar çağrıldığı bağlama göre this değerini belirler; bağımsız çağrıldıklarında bu değer global nesne olur.

Arrow Function’da this kullanımı

const myFunction = () => {
  console.log(this);
};

myFunction();

this, normal fonksiyonlarda olduğu gibi pencere (window) veya global nesne olur. Aynı sonucu elde ederiz ama nedenleri farklıdır. Normal fonksiyonlar, varsayılan olarak global kapsamla ilişkilendirilirken, arrow fonksiyonları kendi this değerlerine sahip değildir; bunun yerine üst kapsamdan miras alırlar. Bu durumda üst kapsam yine global nesnedir.

Console’da gözüken çıktı aşağıdadır:

Ne Zaman Arrow Function Kullanmalı?

Arrow Function’lar, özellikle kısa ve basit işlemler için mükemmel bir seçimdir. Tek satırda yazılabilen işlemler, callback fonksiyonları ve dizi manipülasyonları gibi durumlarda oldukça faydalıdır. Ancak karmaşık işlemler için geleneksel fonksiyonlar daha uygun bir seçenek olabilir; çünkü Arrow Function’lar this ve arguments gibi özelliklere sahip olmadıklarından esneklikleri sınırlıdır.

Arrow Function Avantajları Nelerdir?

Kısa ve Temiz Sözdizimi

Arrow function’lar daha kısa bir sözdizimi ile fonksiyon tanımlamanıza olanak tanır. Özellikle tek satırlık işlemler için daha okunabilir bir kod yazma imkanı sağlar.

Implicit Return — Görünmez Return

Tek satırlık işlemlerde return anahtar kelimesini kullanmadan fonksiyonun sonucunu döndürebilirsiniz. Bu kodu daha sade hale getirir.

this Bağlamı

Arrow function’lar this anahtar kelimesini lexical (sözdizimsel) olarak bağlar. Yani arrow function’ın tanımlandığı bağlamdaki this değerini kullanır. Bu özellikle nesne yöntemleri veya callback fonksiyonları gibi durumlarda faydalıdır.

Daha Az Hata

Arrow function’lar klasik fonksiyon tanımına göre daha az hata yapma olasılığı sunar. Özellikle this bağlamıyla ilgili hataları minimize eder.

Arrow Function Püf Noktaları Nelerdir?

Süslü Parantez Kullanımı

Eğer bir arrow function’ın içinde birden fazla işlem yapıyorsanız, süslü parantez kullanmalısınız ve sonuç döndürmek için return ifadesini eklemelisiniz.

Parametreler

Tek bir parametre varsa, parantez kullanmak isteğe bağlıdır. Ancak birden fazla parametre veya hiç parametre yoksa parantez kullanmalısınız.

Arrow Function’lar hakkında yazdığım bu yazının sizler için faydalı olduğunu umuyorum. Eğer sorularınız veya katkılarınız varsa yorumlarda benimle paylaşabilirsiniz. Bir sonraki yazımda görüşmek üzere!

Sevgiler.