ES6+ ile Gelen Arrow Fonksiyonları konusu, JavaScript programlama dilinin temel parçalarından biridir Arrow fonksiyonları, kodunuzu daha kısa ve okunaklı hale getirir Bu makalede, arrow fonksiyonlarının nasıl kullanıldığını öğreneceksiniz ve onları kullanarak kodunuzu nasıl hızlandırabileceğiniz konusunda ipuçları alacaksınız ES6+ ile Gelen Arrow Fonksiyonları hakkında daha fazla bilgi edinmek için bu makaleyi okumaya başlayabilirsiniz

ES6+ ile gelen arrow fonksiyonları, JavaScript geliştiricilerinin hayatını kolaylaştıran bir özellik haline geldi. Bu özellik sayesinde fonksiyonlar daha kısa ve okunaklı hale geldi, ayrıca this anahtar kelimesinin kullanımı da daha net hale geldi. Bu rehberde arrow fonksiyonlarının ne olduğunu, nasıl kullanıldığını, avantajlarını ve kapsam sorunlarını inceleyeceğiz. Ayrıca pratik örnekler ile de konuları pekiştireceğiz.

Giriş

ES6+ ile birlikte gelen arrow fonksiyonları, kısa syntax ve basit kullanım açısından geleneksel fonksiyonlardan ayrılır. Arrow fonksiyonları, daha net ve okunaklı bir yazım şekli sunar. Bunun yanı sıra, kapsam sorunları ve 'this' anahtar kelimesi kullanımı konusunda da avantaj sağlar.

Arrow fonksiyonları, açılımı kısaltılmış olmasına rağmen, yalnızca JavaScript kodunu daha okunaklı hale getirmekle kalmaz, aynı zamanda onClick, onMouseOver ve onResize gibi olay dinleyicileri de dahil olmak üzere birçok JavaScript kodunun kullanımını da basitleştirir.

Arrow fonksiyonlarının en büyük faydalarından biri, kısa yazımıdır. Bu sayede, fonksiyonların daha az yazılması ve daha az yer kaplaması sağlanır. Bunun yanı sıra, arrow fonksiyonlarında 'this' anahtar kelimesi, trickier JavaScript problemleriyle başa çıkmayı kolaylaştırır.

Basit Kullanım

Arrow fonksiyonları, ES6 ile birlikte JavaScript'e eklenen önemli özelliklerden biridir. Bu fonksiyonlar, işlevlerin kısa ve okunaklı hale gelmesini sağlar. Özellikle, tek satırlık ve basit fonksiyonlarda kullanımı oldukça kolaydır. Arrow fonksiyonlarını kullanarak fonksiyon tanımı yapmak için "=>" sembolü kullanılır.

Arrow fonksiyonlarının syntax'ı oldukça basittir. Fonksiyon ismi kullanmadan directly parametrelerin yazılması işlemiyle yapılır. Arrow fonksiyonları tek satırlık ve basit fonksiyonları çağırmak için de idealdir.

Yukarıda verilen örneklerde de görülebileceği gibi arrow fonksiyonlarının kullanımı oldukça kolaydır. Fonksiyonun tanımı "const" ile yapılır ve parantez açılarak parametreler tanımlanır. Parametre sayısı ne kadar artarsa artarsa fonksiyonun okunaklılığı da o kadar artar.

• Arrow fonksiyonları parantez içerisinde parametre alabilir.
• Yalnızca bir parametre alıyorsa, parantez kullanımı zorunlu değildir.
• Bir kod bloğu içermezler ve tek bir değer döndürürler.
• Normal fonksiyonlara göre daha kısa yazılabilirler ve daha az kod yazımına izin verirler.

Görüldüğü üzere Arrow fonksiyonlarının temel kullanımı oldukça kolaydır. Diğer kullanım alanları için döndürme işlemlerine ve kapsam sorunlarına sonraki başlıklarda değinebiliriz.

Parametreler

Arrow fonksiyonları, normal fonksiyonlar gibi parametre alabilir. Parametreler normal fonksiyonların parametrelerine benzer şekilde, parantez içinde virgül ile ayrılmış bir şekilde tanımlanır. Örneğin, aşağıdaki kod bloğunda bir arrow fonksiyonu tanımlanır ve bir parametre (num) alır.

const kareAl = (num) => {  return num * num;};

Arrow fonksiyonlarında, yalnızca bir adet parametre kullanılsa bile, bu parametrelerin parantez içine alınması gereklidir. Aşağıdaki örnek, yalnızca bir parametre alır.

const yariCapiBul = r => {  return 2 * Math.PI * r;};

Birden fazla parametre kullanılıyorsa, bu parametreler virgül ile ayrılabilir.

const dikdortgenAlan = (uzunluk, genislik) => {  return uzunluk * genislik;};

Arrow fonksiyonları, normal fonksiyonlarda olduğu gibi, parametrelerin veri türlerini, varsayılan değerleri ve rest parametrelerini de destekler. Bu konulara bir sonraki başlıkta yer verilecektir.

Varsayılan Parametreler

Varsayılan parametreler, arrow fonksiyonlarının kullanımında oldukça pratik bir yöntemdir. Bazen bir fonksiyon çağrılırken, parametre olarak herhangi bir değer atanmayabilir. İşte bu durumda, varsayılan parametreler devreye girer ve programcıların işini kolaylaştırır. Arrow fonksiyonlarında, varsayılan parametreler için "?" operatörü kullanılır.

Varsayılan parametre vermek istediğinizde, parametre adının yanına "?" operatörü ile birlikte varsayılan değeri atayabilirsiniz. Örneğin:

let sayHi = (name = "Dünya") => {  console.log(`Merhaba, ${name}!`);};
sayHi("Aylin"); // Merhaba, Aylin!sayHi(); // Merhaba, Dünya!

Yukarıdaki örnekte, sayHi fonksiyonumuzda "name" adında bir parametre oluşturduk ve varsayılan değeri "Dünya" olarak atadık. Eğer fonksiyon çağrılırken "name" parametresine bir değer atanmazsa, varsayılan değer "Dünya" olarak kullanılacaktır. Ancak, eğer bir değer atanırsa, varsayılan değer yerine atanan değer kullanılacaktır.

Bu özellik sayesinde, arrow fonksiyonlarının kullanımı daha da esnek hale gelir ve kod yazmak kolaylaşır. Ayrıca, programcılar fonksiyonlarını varsayılan değerlerle tanımladıklarında, kodlarının daha kolay anlaşılmasını ve hatasız çalışmasını sağlamış olurlar.

Genel olarak, arrow fonksiyonlarının varsayılan parametreleri kullanımı oldukça basit bir yöntemdir ve fonksiyonlarda daha fazla esneklik sağlar.

Rest Parametreleri

Arrow fonksiyonlarına rest parametreleri vermek oldukça kolaydır. Rest parametresi, birden fazla argümanı tek bir dizi olarak toplamak için kullanılır. Bir örnek yaparak rest parametrelerine nasıl erişileceği konusunda daha fazla fikir sahibi olabilirsiniz.

Bir örnek olarak:

const sum = (...args) => args.reduce((a, b) => a + b, 0);console.log(sum(1, 2, 3, 4));

10

Bu kullanım örneğinde, arrow fonksiyonunda "..." kullanarak rest parametrelerinin nasıl kullanılabileceğini görebilirsiniz. "args" dizisinin tüm öğeleri, reduce fonksiyonunu kullanarak toplanır ve sonuç 10 olarak döndürülür.

Aynı şekilde, rest parametreleri herhangi bir parametrenin sonuna yerleştirerek de kullanılabilirsiniz. Buradaki fark, rest parametresinin, fonksiyona gönderilen argümanlar arasında yer almasıdır.

const multiply = (x, y, ...z) => {  const rest = z.length ? ` ve ${z}` : '';  console.log(`${x} ile ${y} çarpımı${rest} = ${x * y}`);};multiply(2, 3, 4, 5);

2 ile 3 çarpımı ve 4,5 = 6

Bu örnekte, arrow fonksiyonunda "..." kullanarak rest parametreleri, "z" dizisi içine toplanır. Fonksiyonda, çıktıyı oluşturan rest parametreleri kullanarak for döngüsü oluşturabilirsiniz. Sonuç, "2 ile 3 çarpımı ve 4,5 = 6" şeklinde verilir.

Döndürme İşlemleri

Arrow fonksiyonları bir değer döndürür, bu nedenle dönüş işlemleri gerçekleştirmek oldukça önemlidir. Arrow fonksiyonlarında dönüş işlemleri, iki farklı şekilde yapılabilir.

Arrow fonksiyonlarının dönüş işlemi, normal bir fonksiyondaki dönüş işlemiyle benzerdir. Bir değer döndürmek istediğimizde, "return" anahtar kelimesini kullanarak fonksiyonun sonucunu belirtiriz.

const multiply = (x, y) => {  return x * y;}console.log(multiply(2, 5)); // Output: 10

Bir fonksiyon tek bir ifade içeriyorsa, dönüş işlemi daha az kod yazarak gerçekleştirilebilir. Bu, arrow fonksiyonlarının kısa fonksiyon dönüşüyle yapılmaktadır. Tek bir ifade, fonksiyonun süslü parantezler içine alınmasına gerek kalmadan "=>" işaretinin sağ tarafına yazılabilir.

const multiply = (x, y) => x * y;console.log(multiply(2, 5)); // Output: 10

Bu örnekte, fonksiyon kısa şekilde ifade edildiği için süslü parantezler ve "return" anahtar kelimesi gereksiz hale geldi.

Kısa Fonksiyonlar

Arrow fonksiyonlarında tek satırlık veya kısa fonksiyonlar, fonksiyonun içeriğinin sadece tek bir ifadeye indirgenebilen durumlarda kullanılır. Bu durumda süslü parantezler ve return ifadesi kullanılmaz.

Örneğin, bir sayıları tutan bir dizi içerisindeki tek sayıları filtreleyen bir fonksiyon yazmak istediğimizi düşünelim. Geleneksel bir fonksiyonlarda şu şekildedir:

function tekSayilar(dizi) {  return dizi.filter(function(sayi) {    return sayi % 2 === 1;  });}

Ancak arrow fonksiyonları kullanarak bu fonksiyonu kısaltabiliriz:

const tekSayilar = dizi => dizi.filter(sayi => sayi % 2 === 1);

Arrow fonksiyonları sayesinde kodumuz daha kısa, okunaklı, anlaşılır ve düzgün bir şekilde yazılmıştır.

Kapsam Sorunları

Arrow fonksiyonları, normal fonksiyonlardan farklı bir kapsama sahiptir ve bu nedenle kapsam sorunlarına yol açabilir. Bu sorunlar özellikle "this" anahtar kelimesi kullanıldığında ortaya çıkar. Arrow fonksiyonlarının içinde geçen "this" anahtar kelimesi, arrow fonksiyonunun dışında tanımlanmış olan nesneye referans vermez.

Normal fonksiyonlarda "this" anahtar kelimesi, fonksiyonun çağrıldığı bağlama göre tanımlanır. Ancak arrow fonksiyonlarında "this" anahtar kelimesi, fonksiyonun tanımlanması sırasındaki bağlama göre tanımlanır. Bu nedenle arrow fonksiyonlarında "this" anahtar kelimesi, fonksiyonu çağıran nesneye değil, tanımlayan nesneye referans verir.

Bu kapsam sorunları, bazı durumlarda beklenmeyen sonuçlara sebep olabilir. Ancak bu sorunları çözmek için bazı yöntemler mevcuttur. Bunlardan biri, arrow fonksiyonu içinde yer alan "this" anahtar kelimesini, arrow fonksiyonunun dışındaki bir değişkene atamaktır. Bu sayede arrow fonksiyonu içinde "this" anahtar kelimesi yerine dışarıdaki bağlama referans alınabilir.

Ayrıca arrow fonksiyonlarının içinde yer alan "arguments" anahtar kelimesi de normal fonksiyonlarda olduğu gibi kullanılamaz. Bu nedenle fonksiyon içinde "arguments" yerine spread operatörü kullanılabilir. Böylece fonksiyona verilen parametreler, bir dizi olarak spread operatörü ile alınabilir ve kullanılabilir.

Arrow fonksiyonlarının kapsam sorunları, dikkatli bir şekilde ele alınarak çözülebilir. Bu sayede arrow fonksiyonları, modern JavaScript kodlama pratiğinde önemli bir yer tutabilir.

this anahtar kelimesinin kullanımı

Arrow fonksiyonlarında this anahtar kelimesi, standart fonksiyonlardan farklı bir şekilde kullanılır. Standart fonksiyonlar, her çağırıldıklarında kendi kapsamında this anahtar kelimesinin değerini belirlerler. Ancak arrow fonksiyonları, bulundukları kapsamdaki this anahtar kelimesine sahip olan değişkeni kullanırlar. Yani arrow fonksiyonlarında this, özgün kapsamından ziyade fonksiyonun bulunduğu kapsama bağlıdır.

Bu özellik, arrow fonksiyonlarının kullanımında bir avantaj olarak gösterilebilir. Çünkü arrow fonksiyonları genellikle callback fonksiyonları olarak kullanılır ve this anahtar kelimesi başka bir kapsamda olduğu durumlarda karmaşaya sebep olabilir. Ancak arrow fonksiyonlarının this anahtar kelimesinin kullanımı sayesinde, bu tür durumlarda daha rahat bir şekilde kod yazmak mümkündür.

Örnekler

Arrow fonksiyonları ES6+ ile birlikte birçok avantajı da beraberinde getirdi. Peki bu avantajlardan nasıl yararlanabiliriz? İşte, pratik kullanım örnekleri:

• Bir dizi elemanının içindeki sayıları toplayan bir fonksiyon yazmak istediğimizi düşünelim:

• Arrow fonksiyonlarının kısa syntax'ı, tek satırlık fonksiyonları yazmamıza da olanak sağlar:

Bu örneklerin yanı sıra arrow fonksiyonları, promise'ler ve async/await kullanımında da oldukça hızlı ve pratik bir çözüm sunmaktadır. Bu nedenle, modern JavaScript uygulamalarında arrow fonksiyonlarının sıklıkla kullanılması kaçınılmazdır.