crazy_coder
Moderatör
- Katılım
- 20 Şub 2026
- Mesajlar
- 204
- Tepkime puanı
- 0
- Puanları
- 16
Hoisting, JavaScript motorunun kodları çalıştırmadan önce (derleme/yorumlanma aşamasında) değişken ve fonksiyon tanımlamalarını, bulundukları kapsamın (scope) en tepesine taşıyor gibi davranmasıdır.
Ancak burada kritik bir kelime var: "Gibi davranmak". Fiziksel olarak kodlarınız yukarı taşınmaz; sadece JavaScript motoru bellekte bu tanımlamalar için yer ayırır.
Değişken tanımlarken kullandığınız anahtar kelime, Hoisting davranışını tamamen değiştirir.
A. var ile Hoisting:
var ile tanımlanan bir değişken en tepeye taşınır ve ona varsayılan olarak undefined değeri atanır.
Arka planda JS motoru bunu şöyle görür:
B. let ve const ile Hoisting:
Bu modern kelimeler de aslında Hoisting'e uğrar, ancak var gibi undefined ile başlatılmazlar. Tanımlandıkları satıra gelene kadar bu değişkenlere erişmeye çalışırsanız hata alırsınız. Bu sürece Temporal Dead Zone (Geçici Ölü Bölge) denir.
Fonksiyonlar söz konusu olduğunda Hoisting çok daha belirgindir. Ancak fonksiyonun nasıl tanımlandığı çok önemlidir.
Function Declaration (Fonksiyon Deklarasyonu):
Bu yapıda fonksiyonun tamamı (ismi ve gövdesi) en tepeye taşınır. Bu sayede fonksiyonu tanımlamadan önce bile çağırabilirsiniz.
Function Expressions (Fonksiyon İfadeleri):
Eğer bir fonksiyonu bir değişkene (var, let veya const) atarsanız, o değişkenin Hoisting kuralları geçerli olur.
"Kod neden yazıldığı sırada çalışmıyor da yukarı çekiliyor?" diye sorabilirsiniz. Bunun birkaç temel sebebi vardır:
Hataları önlemek için şu kuralları altın kural olarak kabul edebilirsiniz:
Sonuç
Hoisting, JavaScript’in çalışma mantığını anlamak için hayati bir kavramdır. Kodunuzun neden hata verdiğini veya neden "tanımsız" döndüğünü anlamanızı sağlar. let ve const dünyasında bu olaydan daha az etkilensek de, arka plandaki bu "sihri" bilmek sizi daha iyi bir geliştirici yapar.
Ancak burada kritik bir kelime var: "Gibi davranmak". Fiziksel olarak kodlarınız yukarı taşınmaz; sadece JavaScript motoru bellekte bu tanımlamalar için yer ayırır.
1. Değişkenlerde Hoisting: var vs let/const
Değişken tanımlarken kullandığınız anahtar kelime, Hoisting davranışını tamamen değiştirir.
A. var ile Hoisting:
var ile tanımlanan bir değişken en tepeye taşınır ve ona varsayılan olarak undefined değeri atanır.
JavaScript:
console.log(forumIsmi); // Çıktı: undefined (Hata vermez!)
var forumIsmi = "XenForo Turkiye";
JavaScript:
var forumIsmi; // Tanımlama en tepeye taşındı
console.log(forumIsmi); // Henüz değer atanmadığı için undefined
forumIsmi = "XenForo Turkiye"; // Değer atama yerinde kaldıB. let ve const ile Hoisting:
Bu modern kelimeler de aslında Hoisting'e uğrar, ancak var gibi undefined ile başlatılmazlar. Tanımlandıkları satıra gelene kadar bu değişkenlere erişmeye çalışırsanız hata alırsınız. Bu sürece Temporal Dead Zone (Geçici Ölü Bölge) denir.
JavaScript:
console.log(kullanici); // HATA! ReferenceError
let kullanici = "Gemini";2. Fonksiyonlarda Hoisting
Fonksiyonlar söz konusu olduğunda Hoisting çok daha belirgindir. Ancak fonksiyonun nasıl tanımlandığı çok önemlidir.
Function Declaration (Fonksiyon Deklarasyonu):
Bu yapıda fonksiyonun tamamı (ismi ve gövdesi) en tepeye taşınır. Bu sayede fonksiyonu tanımlamadan önce bile çağırabilirsiniz.
JavaScript:
selamla(); // Çıktı: "Merhaba!"
function selamla() {
console.log("Merhaba!");
}Function Expressions (Fonksiyon İfadeleri):
Eğer bir fonksiyonu bir değişkene (var, let veya const) atarsanız, o değişkenin Hoisting kuralları geçerli olur.
JavaScript:
duyuru(); // HATA! (duyuru is not a function veya ReferenceError)
var duyuru = function() {
console.log("Önemli duyuru!");
};3. Neden Böyle Bir Mekanizma Var?
"Kod neden yazıldığı sırada çalışmıyor da yukarı çekiliyor?" diye sorabilirsiniz. Bunun birkaç temel sebebi vardır:
[]Fonksiyonların Birbirini Çağırması: Eğer Hoisting olmasaydı, A fonksiyonu B'yi, B fonksiyonu da A'yı çağıracaksa (recursive veya birbirine bağlı yapılar), kodun yazım sırasını ayarlamak imkansız hale gelirdi.
[]Performans: JavaScript motoru kodu çalıştırmadan önce tüm değişken ve fonksiyonları belleğe (memory) yerleştirerek çalışma anında daha hızlı bir süreç yönetir.
Hoisting ile Başa Çıkma Stratejileri
Hataları önlemek için şu kuralları altın kural olarak kabul edebilirsiniz:
[]let ve const kullanın: var kullanmaktan kaçınmak, beklenmedik undefined hatalarını ve kapsam karmaşasını önler.
[]Önce Tanımlayın, Sonra Kullanın: Fonksiyon deklarasyonları yukarı taşınsa bile, temiz kod prensibi gereği her zaman değişken ve fonksiyonlarınızı kodun en üstünde tanımlayın.- Fonksiyon İfadelerini Tercih Edin: Okunabilirliği artırmak ve this bağlamını kontrol etmek için modern projelerde Arrow Functions veya değişken atamalı fonksiyonlar kullanın.
Sonuç
Hoisting, JavaScript’in çalışma mantığını anlamak için hayati bir kavramdır. Kodunuzun neden hata verdiğini veya neden "tanımsız" döndüğünü anlamanızı sağlar. let ve const dünyasında bu olaydan daha az etkilensek de, arka plandaki bu "sihri" bilmek sizi daha iyi bir geliştirici yapar.