🪄 JavaScript Hoisting: Kodun Ardındaki Sırlar

(Kod daha çalışmadan önce nereye gidiyor, kimleri yanına alıyor ve neden seni bazen utandırıyor?)

JavaScript’te bazı şeyler vardır…
Sen aşağıya yazdığını sanırsın,
JavaScript ise çoktan yukarı taşımıştır.

Hoisting, JavaScript’in perde arkasındaki en dramatik, en yanlış anlaşılan ve en çok bug üreten mekanizmalarından biridir.
Bugün bu yazıda:

• Hoisting gerçekte nedir?
• JavaScript kodu nasıl okur, nasıl çalıştırır?
• var, let, const neden farklı davranır?
• Fonksiyonlar neden “ben buradayım” diye bağırır?
• Gerçek hayatta neden hata yapıyoruz?

hepsini mizahla, örnekle, pratikle anlatıyoruz.

Hazırsan perdeyi aralayalım 🎭

🧠 JavaScript Kodu Çalıştırmadan Önce Ne Yapar?

JavaScript senin kodunu satır satır çalıştırmaz. Önce şöyle der:

“Dur bakalım… Kim değişken, kim fonksiyon, kim drama çıkaracak bir görelim.”

Bu süreç iki aşamada olur:

1️⃣ Creation Phase (Oluşturma Aşaması)

• Değişken isimleri belleğe alınır
• Fonksiyon tanımları belleğe alınır
• var → undefined
• let / const → TDZ (birazdan)

2️⃣ Execution Phase (Çalıştırma Aşaması)

• Kod satır satır yürütülür
• Değer atamaları yapılır
• Fonksiyonlar çağrılır

📌 Hoisting, işte bu Creation Phase’de olur.

🎈 Hoisting Nedir? (Net ve Temiz Tanım)

Hoisting, JavaScript’in değişken ve fonksiyon tanımlarını, kod çalışmadan önce belleğe almasıdır.

⚠️ Ama kritik nokta:

❗ Sadece tanım (declaration) hoist edilir, değer (assignment) edilmez.

Bu cümleyi ezberle, duvara as, kahvene yaz.

🧪 var ile Hoisting: Eski Ama Tehlikeli

console.log(username);
var username = "Cansu";

Çıktı:

undefined

“Ama hata vermesi gerekmiyor muydu?”

JavaScript bunu şöyle algılar:

var username; // hoisted
console.log(username);
username = "Cansu";

📌 var:

• Hoist edilir
• undefined ile başlar
• Sessizce hata yapmana izin verir 😈

Bu yüzden var:

• Debug kabusu
• Eski projelerin laneti
• Junior geliştiricinin sınavıdır

🚪 let ve const: Modern, Kibar ama Sert

console.log(age);
let age = 25;

Çıktı:

ReferenceError: Cannot access 'age' before initialization

Ama Hoist Edilmiyor mu?

Ediliyor.
Ama…

🕳️ Temporal Dead Zone (TDZ)

let ve const için JavaScript şunu yapar:

“Seni biliyorum…
Ama henüz kullanamazsın.”

TDZ:

• Değişken tanındı
• Ama erişime kapalı

{
  // TDZ başlar
  console.log(x); // ❌
  let x = 10;
}

📌 Bu davranış bilinçlidir:

• Hataları erken yakalar
• Kod disiplinini artırır

🧙 Fonksiyon Hoisting: Asıl Gösteri Burada

🟢 Function Declaration (Sorunsuz Kahraman)

sayHello();

function sayHello() {
  console.log("Merhaba  💛");
}

✔️ Çalışır.

Çünkü:

• Fonksiyonun tamamı hoist edilir
• Hem ismi hem gövdesi bellektedir

🔴 Function Expression: Maskeli Karakter

sayHi();

var sayHi = function () {
  console.log("Selam!");
};

❌ Çalışmaz.

Neden?

var sayHi; // undefined
sayHi();   // ❌ undefined is not a function

📌 Çünkü:

• Değişken hoist edilir
• Fonksiyon atanmaz

🏹 Arrow Function + Hoisting = Tuzak

hello();

const hello = () => {
  console.log("Hello JS!");
};

❌ ReferenceError

Arrow function’lar:

• const / let ile tanımlanır
• TDZ’ye girer
• Sıra gelmeden konuşamaz

😵 Gerçek Hayatta Hoisting Hataları

❌ Beklenmeyen undefined

if (!user) {
  var user = "guest";
}

console.log(user);

Sonuç:

guest

Ama if dışından erişildi 😶

Sebep:

• var block scope değildir

🧠 Pratik Kurallar (Altın Değerinde)

✨ Değişkeni kullanmadan önce tanımla
✨ var kullanma (evet, net)
✨ Fonksiyonları dosyanın üstüne yaz
✨ const varsayılanın olsun
✨ Hoisting’i bil ama ona güvenme

🎓 Mini Quiz (Kendini Test Et)

console.log(a);
let a = 5;

A) undefined
B) 5
C) ReferenceError

👉 Doğru cevap: C

❤️ Son Söz

Hoisting, JavaScript’in sana fısıldadığı bir sırdır:

“Kod sandığından daha erken hazırlanıyor.”

Ama sen bilinçliysen:

• Hoisting seni üzmez
• Kodun daha temiz olur
• Bug sayısı azalır

Ve JavaScript sana daha az trip atar 😌