Javascript’in Çalışma Mantığı ve Execution Context
Günümüzde popüler diller arasında yer alan Javascript, çoğu geliştirici için önemli kavramları barındırmaktadır. Genellikle bu kavramlar iş mülakatlarında olsun iş hayatında olsun bir adım önde olmamızı sağlamaktadır. Bu yazımda genel olarak bir javascript dosyası çalıştırıldığında JS Engine tarafında nelerin olduğundan bahsedeceğim.Bu kavramların çoğunu açıklayabilmek için bir seri oluşturmak istedim. Serinin ilk yazısında anlatmaya çalışacağım iki kavram olacak. Lexical Environment ve Execution Context.
Lexical Environment Nedir?
Lexical Environment, yazdığımız kodda bulunan parçaların nerede olduğu ve diğer parçalarla nasıl iletişim kurabileceğimiz gibi bilgiler barındırır. Yazdığımız kodlarda genellikle birden fazla lexical environment olacaktır. Bu environmentlar aynı anda çalışmamaktadır. Oluşturulan lexical environmentlar birazdan bahsedeceğim Execution Context yapısı tarafından yönetilerek çalışır.
Javascript’te scope oluşturmak için kullandığımız her süslü parantezde bir lexical environment oluşmaktadır.
Yandaki örnekte age değişkenin lexicali doSomething fonksiyonun içindedir. Eğer doSomething fonksiyonu herhangi bir scope içinde değilse bu fonksiyonun lexicali globaldedir diyebiliriz.
Execution Context Nedir?
Javascript kodlarımızı çalıştırdığımız zaman JS Engine tüm çalışmalar için genel bir context oluşturur ve buna global execution context denir. Yazdığımız kodlar içinde fonskiyon çağrımları var ise bu context altında yeni execution contextler oluşturulur.
Global olsun yerel olsun her oluşturulan contextlerin 2 adet fazı bulunmaktadır; Creation ve Execution.
Creation fazında global object denilen this oluşturulur ve hoisting işlemi gerçekleşir. Bu fazda var keyword ile tanımlanmış değişkenler ve function keyword ile oluşturulan fonksiyonlar bellek alanına yazılır.
Aşağıdaki bulunan kodu ele alalım. Bu kodların bulunduğu javascript dosyası çalışmaya başladığı an ilk önce global exection context aşamaları başlar. İlk olarak creation fazı aşamasına geçilir. Adım adım gidersek;
1-JS enginde bu fazda değişken ve fonksiyon tanımlamalarını yukarıdan aşağıya doğru incelemeye başlar. Örnekte iki adet tanımla görülmektedir. İlk tanımlama; var ile oluşturulan a değişkenini contexte yazılıp değer olarak başta undefined atanır.
2-İkinci tanımla buradaki b fonskiyonudur. İlk tanımlama da olduğu gibi b değerini contexte yazıp değer olarak ise fonskiyonunun bildirimini yapar. Kod içerindeki tüm tanımlamaları contexte yazdıktan sonra 2. Faz olan Execution fazına geçilir.
Execution fazında dışındaki işlemler ele alınır.Bu fazda tekrar yukarıdan aşağıya doğru çalışmaya başlanır.
1- İlk satırda console.log(a) kodunu görmekteyiz. Burada konsola değişkenin içeriğini yazdırma işlemi yapacaktır. İlk önce context e gidip bu değişkenin değerini alır. Contexte bu değer undefined olarak yazılmıştır. Bu yüzden ilk satırın çıktısı undefined olacaktır.
2– İkinci satırda b fonskiyonu çağrılmıştır. Her fonksiyon çalıştırıldığı zaman global contextin altında yeni bir context oluşturulur. b() fonksiyonu çağrıldığı zaman bu fonksiyonun bir contexti oluşturulup yukarıda bahsettiğimiz 2 fazda gerçekleşir. Fonksiyon içerisinde creation fazı bittikten sonra exection fazında console.log(‘b’) işlemini gerçekleşir. Bu yüzden b fonskiyonun çalışması sonrasında alacağımız çıktı ‘b’ olacaktır. Bu fonksiyonun çalışması bittikten sonra ilgili context silinip global contexte geri döneriz.
3- Üçüncü satırda global context içindeki a değişkenin ‘Merhaba’ olarak değiştirilir. Artık a değişkeni undefined değil ‘Merhaba’ dır.
4- En son satırda ise tekrar a değişkenini konsolda yazdırdığımız zaman çıktı olarak bu sefer ‘Merhaba’ ifadesini göreceğiz.
Bu seride iki kavramı da eklemek isterim. Bunlar; Hoisting ve Call Stack
Hoisting işlemi creation fazında gerçekleştirilir. Yukarıda creation fazını anlatırken bu fazın ilgilendiği kısımlar değişken ve fonksiyon tanımlamaları diye bahsetmiştik. Bu fazda contexte bu tanımlamaları yazarken değer olarak değişkenler için başta undefined fonksiyonlar içinse bildirim yapılır. Bu fazda yapılan bu atama ve bildirmeler Hoisting olarak adlandırılmaktadır.
Call Stack, iki adet metodu olan (push ve pop) bir stack yapısıdır. Javascript kodlarımız çalıştırıldığında stack yapısının en altında global execution context bulunur. Her fonksiyon çağrıldığında yeni bir context oluşturulduğunu söylemiştim. Bu oluşturulan contextler ise bu stack içine fonksiyonun çağrılma sırasına göre yazılır ve fonksiyonun işi bittikten sonra stack içerisinden silinir. Call stack LIFO mantığında çalışır. Bu mantıkta en son eklenen ilk çıkarılır. Bu yüzden global execution context en altta yer alıp diğer execution contextler fonskiyon çağrımlarından oluşturulduğu için üste eklenir.
Kaynakça;
