Execution Stack ve Execution Context Nedir?

JavaScript’in Temel Kavramları

You can read this blog post in English here.

Bu blog yazımda ve muhtemelen sonraki bir kaç yazımda daha JavaScript’in temel kavramlarını ele alıp en basit haliyle sizlere aktarmaya çalışacağım.

Yazılım dünyasından olmayanlar için veya yazılımı tamamen Türkçe kaynaklardan öğrenenler için bu terimler garip gelebilir. Dürüst olmak gerekirse ben teknik terimlerin İngilizce kullanılmasının daha doğru olduğunu düşünüyorum. Yine de yazıya geçmeden önce sıkça kullanacağım Execution Stack kavramını Türkçe’ye Çalışma Yığıtı, Execution Context kavramını da Çalışma Bağlamı olarak çevirebiliriz diye düşünüyorum. Her neyse daha fazla vakit kaybetmeden asıl konumuza başlayalım.

Bir JavaScript uygulaması çalıştırıldığında içinde çağırılan fonksiyonları ve bunların sakladığı bilgileri tutmak için Stack adı verilen bir veri yapısı kullanılır ve buna Execution Stack denilir. Stack veri yapısı LIFO (Last in First Out) mantığıyla çalışır ve belirli bir limiti vardır. Bu yapıyı anlamak için gelin şöyle düşünelim. Diyelim ki elimizde bir kutu ve tabaklar var. Her işlemde yalnızca bir tabak hareket ettirebildiğimizi varsayalım. Şimdi gelin bu tabakları sırayla üst üste olacak şekilde kutunun içine koyalım.

Stack Yapısı ve LIFO

Daha sonra ilk koyduğumuz tabağı almak istediğimizde yine sırayla ve her adımda bir tabak olacak şekilde tabakları kutudan çıkarmamız gerekmekte. Tabakları kutuya koyma işlemine push kutudan çıkarma işlemine pop diyelim. Stack yapısını kısaca böyle özetleyebiliriz.

Stack Yapısı ve LIFO (Son Giren İlk Çıkar)

Şimdi JavaScript tarafına tekrardan dönelim ve Execution Stack içinde tam olarak ne tutuluyor bir bakalım.

Execution Context:

Bir fonksiyonun içinde tanımlanan tüm bilgilerinin tutulduğu yapı gibi bir tanımlama yapmak yanlış olmaz diye düşünüyorum. İki tip Execution Context’ten bahsedebiliriz.

• Global Execution Context

İçerisine hiç kod yazmadığımız bir JavaScript uygulamasını çalıştırdığımızda bile JavaScript tarafından yaratılan yapıya Global Execution Context denilir. Her zaman JavaScript uygulaması başlatıldığında Execution Stack içine ilk olarak Global Execution Context push edilir ve Global Object yaratılır. Browser da objenin adı window olarak adlandırılır ve this anahtar kelimesiyle ulaşılabilir.

• Functional Execution Context

Her çalıştırılan fonksiyon için memory de özel bir yer ayrılır ve bu fonksiyonun tüm bilgileri burada tutulur. Fonksiyonlar çalıştırıldığı anda ona ait olan Execution Context yaratılır ve Execution Stack’a push edilir. Fonksiyonun çalışması bittiği anda bu fonksiyona ait olan Execution Context pop edilerek stackten çıkartılır.

function foo(){
  console.log('foo');
  baz();
}
function baz(){
  console.log('baz');
}
foo();
// output 
// foo
// baz

Örnek Kod Bloğunun Çalışma Anında Execution Stack Adımları

Yukarıda olan biteni özetlemek gerekirse örnek JavaScript kodumuz çalıştırıldığında ilk olarak Global Execution Context ve bu contextin içinde tutulacak olan Global Object oluşturur ve bu Execution Stack içine pushlanır. Daha sonra foo() ile foo isimli fonksiyon çağırılır ve bu fonksiyonun Execution Context’i oluşturularak stack içine pushlanır. Ekrana “foo” yazıldıktan sonra baz() ile baz isimli fonksiyon çağırılır. Henüz foo fonkisyonun scope’undan çıkmadığımız için baz fonksiyonu için yaratılan yeni Execution Context stack içine foo’nun üzerine pushlanır. Ekrana “baz” yazdırılır ve baz isimli fonksiyonun scope’undan çıkılır. Bu sebeple önce baz için tanımlanan Execution Context stack’ten pop edilir ve foo fonksiyonun da scope’undan çıkıldığı için daha sonra foo için yaratılan Execution Context stack’ten pop edilir. Daha sonrasında çalıştırılacak başka kod parçası kalmadığı için son olarak Global Execution Context de stack’ten pop edilerek programın çalışması sona erer.

En basit haliyle Execution Stack ve Execution Context’i bu şekilde özetleyebiliriz. Bir sonraki yazımda Execution Context’in yaratılma aşamalarını ve Lexical Environment’i anlatmaya çalışacağım. En kısa zamanda tekrardan burada buluşmak üzere.

Eğer bu yazımı beğendiyseniz Variable Environment, Lexical Environment ve Scope Chain hakkında yazdığım yazıyı buradan okuyabilirsiniz.

Variable ve Lexical Environment Nedir? Scope Chain Bu İşin Neresinde?

Kaynaklar:

• https://blog.bitsrc.io/understanding-execution-context-and-execution-stack-in-javascript-1c9ea8642dd0
• https://medium.com/better-programming/execution-context-lexical-environment-and-closures-in-javascript-b57c979341a5
• https://medium.com/@5066aman/lexical-environment-the-hidden-part-to-understand-closures-71d60efac0e0