JavaScript’te “Call Site” Kavramı

JavaScript’te “call site” kavramı, bir fonksiyonun kodda tam olarak nerede ve hangi bağlamda çağrıldığını belirten konumdur.

“Call Site” Nedir?

JavaScript’te fonksiyonların çalışma şekli, onların nasıl ve nereden çağrıldığıyla yakından ilgilidir. İşte bu çağrı yerine (yani çağrıldığı konuma) “call site” denir. Zaten “call site”, kelime anlamı olarak da “çağrı yeri” veya “fonksiyonun çağrıldığı konum” anlamına gelmektedir.

Bu konum, özellikle this anahtar kelimesinin değerinin ne olacağını belirlemek için önemlidir. Zira JavaScript’te this değeri, fonksiyonun nasıl çağrıldığına bağlı olarak dinamik bir şekilde belirlenir. Bu bağlamda “call site”, this değerinin ne olacağını belirleyen fonksiyonun çağrıldığı konumdur.

Ne demek istediğimizi birkaç örnek ile açıklamak faydalı olacaktır:

• Bir nesnenin yöntemi olarak çağrıldığında: Fonksiyon bir nesnenin yöntemi olarak çağrıldığında, this o nesneyi referans alır. Örneğin:

const obj = {
  name: "John",
  sayHello: function() {
    console.log("Merhaba, " + this.name);
  }
};
obj.sayHello();  // this, obj'yi referans alır.

Bu kodda, bir obj adında bir nesne tanımlanmıştır. Bu nesnenin içinde name adında bir özellik ve sayHello adında bir fonksiyon (metot) bulunmaktadır. sayHello fonksiyonunu çağırırken, fonksiyonun içerisindeki this anahtar kelimesi obj nesnesini referans alır. Yani, this.name ifadesi, obj.name‘i yani “John” değerini alır. Sonuç olarak, ekrana “Merhaba, John” yazdırılır.

• Bir fonksiyon olarak çağrıldığında: Eğer bir fonksiyon doğrudan çağrılırsa (yani bir nesnenin yöntemi değilse), this global nesneyi (tarayıcılarda window veya Node.js’te global) referans alır.

function sayHello() {
  console.log(this);
}
sayHello();  // this, global nesneyi referans alır.

Bu örnekte, sayHello adında doğrudan bir fonksiyon tanımlıyoruz ve daha sonra bu fonksiyonu çağırıyoruz. Böylesi durumlarda fonksiyon içerisinde this anahtar kelimesi global nesneyi referans alır. Tarayıcılarda bu global nesne window olurken, Node.js ortamında global olarak adlandırılmaktadır. Dolayısıyla bu kodumuz, çalıştığı ortama bağlı olarak ya window nesnesini ya da global nesnesini konsola yazdırır.

• Bir yapılandırıcı olarak çağrıldığında: Eğer bir fonksiyon new anahtar kelimesi ile bir yapılandırıcı olarak çağrılırsa, this yeni oluşturulan nesneyi referans alır.

function Person(name) {
  this.name = name;
}
const john = new Person("John");  // this, yeni oluşturulan nesneyi referans alır.

Yukarıdaki kodumuzda, Person adında bir yapılandırıcı fonksiyon tanımlıyoruz. Bu fonksiyonu new anahtar kelimesi ile çağırdığımızda, JavaScript yeni bir nesne oluşturur ve bu nesneyi this anahtar kelimesi ile referans alır. Bu şekilde, Person fonksiyonu içerisinde tanımlanan this.name ifadesi, yeni oluşturulan nesnenin name özelliğini ayarlar. Sonuç olarak, john adında yeni bir nesne oluşturulmuş olur ve bu nesnenin name özelliği “John” değerini alır.

“Call site”, bu örneklerdeki fonksiyonların çağrıldığı yeri ifade ettiği için this değerinin ne olacağını belirlemek için bu yere bakmamız gerekir. Bu nedenle, JavaScript’te this değerini anlamak için, fonksiyonun nerede ve nasıl çağrıldığına dikkat etmek önemlidir.

“Call Stack” ile “Call Site” Kavramları Arasındaki Fark

“Call Stack” ve “Call Site”, programlamada karşımıza çıkan iki önemli kavramdır ve fonksiyon çağrılarıyla yakından ilgilidirler. Ancak bu iki terim farklı şeyleri ifade eder.

Kısaca “Call Stack”, programın çalışma sırasında hangi fonksiyonların çağrıldığını ve bu fonksiyonların hangi sırayla işletildiğini takip eden bir yapıdır. Bir fonksiyon çağrıldığında, çağrılma sırasına göre fonksiyonların üst üste bindiği call stack’in üstüne eklenir ve fonksiyon görevini tamamladığında stack’ten çıkar. Yani, fonksiyonların çalışma sırasını ve iç içe fonksiyon çağrılarını takip etmemize yardımcı olan temel mekanızmadır diyebiliriz.

Öte yandan, “Call Site”, bir fonksiyonun nereden çağrıldığını gösterir. Özellikle JavaScript’te, bir fonksiyonun içerisindeki this anahtar kelimesinin değerini belirlemek için bu çağrı yerine dikkat etmemiz gerekir. Yani, bir fonksiyonun hangi bağlamda çalıştırıldığını anlamamıza yardımcı olur.

Bu iki kavram arasındaki temel bağlantı, fonksiyon çağrılarıdır. Call Stack, fonksiyonların çalışma sırasını takip ederken, Call Site ise bize fonksiyonun nereden çağrıldığı bilgisini verir. Örneğin:

function a() {
    b(); // 'b' fonksiyonunun call site'ı burasıdır.
}

function b() {
    c(); // 'c' fonksiyonunun call site'ı burasıdır.
}

function c() {
    console.trace(); // Call stack'in anlık durumunu gösterir.
}

a(); // 'a' fonksiyonunun call site'ı burasıdır.

Yukarıdaki örnekte, a() fonksiyonu çağrıldığında, a call stack’e eklenir. a içinde b() çağrıldığında, b a‘nın üzerine stack’e eklenir. b içinde c() çağrıldığında, c b‘nin üzerine stack’e eklenir.

console.trace() fonksiyonu, call stack’in mevcut durumunu gösterir. Örneğimizde, console.trace() çağrıldığında, call stack şöyle görünür:

1. c (En son çağrılan fonksiyon, console.trace()’in bulunduğu yer)
2. b (c’den önce çağrılan fonksiyon)
3. a (b’den önce çağrılan fonksiyon)

Yani, console.trace()‘in çıktısı, call site’ların bir listesini verir:

• c()‘nın call site’ı b() fonksiyonunun içinde,
• b()‘nin call site’ı a() fonksiyonunun içinde ve
• a()‘nın call site’ı ise global kapsamda, yani a() çağrısının yapıldığı yerdedir.

Bu şekilde, call stack ve call site arasındaki ilişkiyi görebiliriz. Call stack, fonksiyonların çağrıldığı sırayı (ve dolayısıyla call site’ları) takip eder.