Regular this vs. Arrow this: Ayrıntılı Kılavuz

Regular this vs. Arrow this: Ayrıntılı Kılavuz

JavaScript’te, this anahtar kelimesi, fonksiyonun çağrılma bağlamına göre değişen dinamik bir değer taşır. Bu durum, özellikle nesne yönelimli programlamada ve daha gelişmiş JavaScript yapılarıyla çalışırken kafa karışıklığına yol açabilir. Ancak, this‘in davranışı, fonksiyonun nasıl tanımlandığına (regular veya arrow function) bağlı olarak farklılık gösterir. Bu makalede, regular fonksiyonlar ve arrow fonksiyonlarında this‘in nasıl çalıştığına, aralarındaki temel farklara ve uygun kullanım senaryolarına detaylı bir şekilde bakacağız. Öncelikle, temel kavramları anlamanız için regular fonksiyonlarla başlayalım.

Regular Fonksiyonlardaki this

Regular fonksiyonlarda, this‘in değeri, fonksiyonun nasıl çağrıldığına bağlıdır. Örneğin, bir nesnenin metodu olarak çağrılırsa, this o nesneyi işaret eder. Aksine, global olarak çağrılırsa, this genellikle global nesneyi (browser’da window, Node.js’te global) ifade eder. Bu durum, beklenmedik davranışlara yol açabilir ve hata ayıklamayı zorlaştırabilir. Bu nedenle, regular fonksiyonlarda this‘i dikkatli bir şekilde kullanmak önemlidir. Bununla birlikte, this‘in dinamik doğasını anlamak, JavaScript’i daha iyi anlamanıza yardımcı olacaktır.

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

const nesne = {
  yöntem: regularFonksiyon
};

nesne.yöntem(); // this, nesne'yi işaret eder.
regularFonksiyon(); // this, global nesneyi işaret eder.

Arrow Fonksiyonlardaki this

Arrow fonksiyonları ise regular fonksiyonlardan farklı olarak this‘i leksikal olarak bağlar. Başka bir deyişle, this, arrow fonksiyonun tanımlandığı kapsamdaki değerini alır. Bu, this‘in değerinin çağrılma bağlamından bağımsız olması anlamına gelir ve kodun daha okunabilir ve tahmin edilebilir olmasını sağlar. Özellikle, karmaşık nesne yapılarında ve callback fonksiyonları içinde this‘i kullanırken büyük avantaj sağlar.

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

const nesne2 = {
  yöntem: arrowFonksiyon
};

nesne2.yöntem(); // this, nesne2'yi değil, global scope'u gösterir.

Regular ve Arrow Fonksiyonları Karşılaştırma

Özetle, regular fonksiyonlar ve arrow fonksiyonları arasındaki en önemli fark, this bağlamının nasıl belirlendiği konusundadır. Regular fonksiyonlarda this dinamiktir ve çağrılma bağlamına bağlıdır. Bu, bazen beklenmedik sonuçlara yol açabilir. Ancak, arrow fonksiyonlarda this leksikal bağlama sahiptir ve bu da kodun daha güvenilir ve anlaşılır olmasını sağlar. Dolayısıyla, this‘in bağlamını kesin olarak kontrol etmek istiyorsanız, arrow fonksiyonlarını kullanmanız önerilir.

Hangi fonksiyon türünü kullanacağınız, projenizin yapısına ve ihtiyaçlarınıza bağlıdır. Örneğin, event handler’lar gibi callback fonksiyonlarında arrow fonksiyonları kullanmak genellikle daha uygun ve güvenilirdir. Ancak, bazı durumlarda, this‘in dinamik davranışını kullanmak isteyebilirsiniz. Bu durumda, regular fonksiyonları tercih etmeniz gerekir. Uygun olanı seçmek için her iki türün avantaj ve dezavantajlarını dikkatlice değerlendirmeniz önemlidir.

Daha fazla bilgi için web sitemi ziyaret edebilirsiniz.

Faydalı bulacağınız bir kaynak: Dev.to makalesi

Umarım bu makale, JavaScript’te this anahtar kelimesinin kullanımını daha iyi anlamanıza yardımcı olmuştur. Herhangi bir sorunuz varsa, yorum bırakmaktan çekinmeyin!

#Etiketler

#Javascript #this #arrowfunction #regularfunction #programlama #webgeliştirme #fonksiyonelprogramlama #scope #bağlam