Hoisting Nedir? — JavaScript

Hoisting, kod yürütülmeden önce fonksiyonların, değişkenlerin veya sınıfların bildirimini scope’un en üstüne taşıdığı süreci ifade eder.

Hoisting, şu 3 adımdan oluşan değişken yaşam döngüsünü etkiler:

• Deklare etme (Declaration) — bir değişken oluşturma
• Başlatma (Initialization) — değişkeni bir değerle başlatma
• Kullanma (Usage) — değişken değerine erişme ve kullanma

Süreç genellikle şu şekilde gider: önce bir değişken bildirilmeli, ardından bir değerle başlatılmalı ve son olarak kullanılmalıdır. Bir örnek görelim:

Bir fonksiyon deklare edilebilir ve daha sonra kullanılabilir/çağrılabilir. Örneğin:

Bu adımlar birbirini takip ettiğinde her şey basit ve doğal görünür:
deklare et -> başlat -> kullan.

JavaScript kesinlikle bu sırayı takip etmez ve daha fazla esneklik sunar. Örneğin, fonksiyonlar deklare edilmeden önce kullanılabilir:
kullan -> deklare et.

Aşağıdaki örnekte gördüğümüz gibi önce sum(2,3) fonksiyonu çağırılıyor ve sonra deklare ediliyor.

Bu durumu biraz daha detaylı inceleyelim.

JS motoru, komut dosyamızı aldığında, yaptığı ilk şey kodumuzdaki veriler için bellek ayarlamaktır. Bu noktada hiçbir kod yürütülmez, yalnızca her şeyi yürütme için hazırlar. Fonksiyon bildirimlerinin ve değişkenlerin saklanma şekli farklıdır. Fonksiyonlar, tüm fonksiyona referans verilerek saklanır.

Değişkenlerde durum biraz farklı. ES6, değişkenleri deklare etmek için iki yeni anahtar kelime tanıttı: let ve const. let veya const anahtar sözcüğüyle deklare edilen değişkenler initialize edilmeden saklanır.

var anahtar kelimesiyle deklare edilen değişkenler, varsayılan olarak undefined değeriyle saklanır.

Oluşturma aşaması tamamlandı. Artık kodu çalıştırabiliriz (execute). Değişkenler ve fonksiyonlar deklare edilmeden önce, dosyanın üstünde 3 console.log ifadesi olsaydı nasıl bir sonuç ile karşılaşacaktık? Haydi görelim.

var anahtar sözcüğü ile deklare edilen değişkenler, undefined varsayılan değeriyle depolanır. Bu durum bazen beklenmedik durumlara yol açabilir.

Değişkenler deklare edilmeden önceki bölge(zone), geçici ölü bölge(temporal dead zone) olarak adlandırılır ve değişkenleri, initialize etmeden önce referans alamayız.

Bu durumda uninitialized değişkenlere erişmeye çalıştığımızda bir ReferenceError hatası alırız.

Js engine, değişkenleri deklare ettiğimiz satırı geçtiğinde, bellekteki değerlerin üzerine, atadığımız değerler yazılır.

Özetle;

• Hoisting; kodun yürütülmesinden önce fonksiyonların, değişkenlerin veya sınıfların bildirimini scope’un en üstüne taşıdığı süreci ifade eder.
• Fonksiyonlar, tüm fonksiyona referans verilerek saklanır.
• let veya const anahtar sözcüğüyle deklare edilen değişkenler initialize edilmeden saklanır.
• var anahtar kelimesiyle deklare edilen değişkenler varsayılan olarak undefined değeriyle saklanır.

Konuyla ilgili sormak istediğiniz soru olursa bana her zaman mesaj atabilirsiniz. 🎈