JavaScript’te this ve Arrow Function

eminbasbayan

3 dk okuma

🔍 Büyütmek için tıklayın

İçindekiler

Bu yazıda neler var?

JavaScript, güçlü ve esnek bir programlama dili olsa da bazı konuları ilk başta anlamak zor olabilir. Bu konulardan biri de this anahtar kelimesinin davranışıdır. Özellikle arrow function (ok fonksiyonları) ile birlikte kullanıldığında, this’in nasıl çalıştığını anlamak birçok geliştirici için kafa karıştırıcı olabilir. Ancak, konuyu doğru örneklerle ve sade bir dille ele alırsak, bu karışıklığın yerini net bir anlayışa bırakması mümkündür. Bu makalede, sadece this ile arrow function arasındaki ilişkiyi detaylı ve açıklayıcı şekilde inceleyeceğiz.

`this` Nedir?

this, JavaScript'te bir fonksiyonun hangi nesne bağlamında çalıştığını belirtmek için kullanılan özel bir kelimedir. Fonksiyonlar çalıştırıldığında this dinamik olarak değişebilir. Yani this’in değeri, fonksiyonun nerede tanımlandığından değil, nasıl çağrıldığından etkilenir.

Basit bir örnekle açıklayalım:

const ogrenci = {
  ad: "Mehmet",
  selamla: function () {
    console.log("Merhaba, ben " + this.ad);
  }
};

ogrenci.selamla(); // Merhaba, ben Mehmet

Burada this.ad, ogrenci.ad anlamına gelir. Çünkü selamla fonksiyonu ogrenci üzerinden çağrılmıştır.

Arrow Function ile `this` Farklı Çalışır

Arrow function'ların en büyük farklarından biri, this değerini kendi bağlamından değil, tanımlandığı dış çevreden almasıdır. Bu özelliği nedeniyle bazı durumlarda işleri kolaylaştırırken, bazı durumlarda da hata kaynağı olabilir.

Aşağıdaki örnekte bu fark net bir şekilde görülebilir:

const kitap = {
  baslik: "Sinekli Bakkal",
  yazdir: () => {
    console.log(this.baslik);
  }
};

kitap.yazdir(); // undefined

Burada this, kitap nesnesini göstermez. Çünkü arrow function, this değerini tanımlandığı yerden yani global alandan alır. Global alanda baslik adında bir özellik olmadığı için sonuç undefined olur.

Doğru Kullanım: Nesne Metotlarında Normal Fonksiyon

Bir nesneye ait metodun içinde this kullanmak istiyorsak, arrow function kullanmamalıyız. Bunun yerine klasik fonksiyon ifadesi tercih edilmelidir.

const kitap = {
  baslik: "Saatleri Ayarlama Enstitüsü",
  yazdir: function () {
    console.log(this.baslik);
  }
};

kitap.yazdir(); // Saatleri Ayarlama Enstitüsü

Bu kullanımda this, doğru şekilde kitap nesnesini temsil eder.

Zamanlayıcı Fonksiyonlarda (`setTimeout`) Arrow Function Avantajı

Bazı özel durumlarda arrow function kullanmak işleri kolaylaştırır. Örneğin setTimeout gibi zaman gecikmesi içeren işlemlerde this bağlamı değişir ve bu da istenmeyen sonuçlara yol açabilir.

Aşağıdaki örneği inceleyelim:

const oyuncu = {
  isim: "Ayşe",
  tanit: function () {
    setTimeout(function () {
      console.log("Oyuncu: " + this.isim);
    }, 2000);
  }
};

oyuncu.tanit(); // 2 saniye sonra: Oyuncu: undefined

Burada this, setTimeout fonksiyonunun içindeki global bağlamı gösterdiği için this.isim undefined olur.

Aynı örneği arrow function ile yazarsak:

const oyuncu = {
  isim: "Ayşe",
  tanit: function () {
    setTimeout(() => {
      console.log("Oyuncu: " + this.isim);
    }, 2000);
  }
};

oyuncu.tanit(); // 2 saniye sonra: Oyuncu: Ayşe

Bu sefer this, dıştaki tanit fonksiyonundan devralındığı için doğru şekilde oyuncu nesnesini gösterir.

Özet: Arrow Function ve `this` Hakkında Bilmen Gerekenler

Özellik	Normal Fonksiyon	Arrow Function
`this` Nereden Gelir?	Çağrıldığı yere göre	Tanımlandığı yere göre
Nesne Metodu Olarak Kullanılır mı?	Evet	Genellikle hayır
Zamanlayıcılarda (`setTimeout`) `this` Sorununu Çözer mi?	Hayır	Evet

Sonuç

JavaScript'te this kelimesi çoğu zaman anlaşılması zor bir yapı gibi görünse de, arrow function'lar ile nasıl farklı çalıştığını anladığınızda birçok hatayı önceden görebilirsiniz. Kural basittir: Arrow function, this değerini bulunduğu ortamdan alır. Bu yüzden nesne metodları için uygun değildir ama zaman gecikmesi gibi durumlarda çok işe yarar.

Konunun özü şu: Arrow function’lar this konusunda özel bir davranış sergiler. Nerede kullanılacağını iyi bilmek, kodunuzun sorunsuz çalışmasını sağlar.