JavaScript Hoisting Nedir?

Hoisting (türkce: kaldirma, yükseltme), JavaScript'in en cok korkulan ve en cok yanlis anlatilan kavramlarindan biri. Aslinda kavram basit — ama JavaScript'in "kod calistir" sekli C'den, Java'dan farkli oldugu icin isler karisiyor.

Bu yazi boyunca 3 seyi anlatacagim: (1) Hoisting gercekte ne, (2) var/let/const farki, (3) Mulakatta nasil cevaplanir. 11 dakikada bitmis olacaksin.

Asagidaki kodu calistirmadan once ne olacagini tahmin et:

// SENARYO 1: var
console.log("var:", x);  // ?
var x = 5;
console.log("var sonra:", x);  // ?

Cikti: undefined ve 5. Motor, var x'i kapsam basina alir ama degeri undefined'dir. Atama satirina gelince x = 5 olur.

// SENARYO 2: let
console.log("let:", y);  // ?
let y = 10;
console.log("let sonra:", y);  // ?

Cikti: ReferenceError: Cannot access 'y' before initialization. Motor let y'yi kapsam basina alir ama TDZ (Temporal Dead Zone) icinde oldugu icin erisilemez. Atama satirina gelince TDZ biter.

// SENARYO 3: const
console.log("const:", z);  // ?
const z = 15;  // atama zorunlu!
console.log("const sonra:", z);  // ?

Cikti: ReferenceError (TDZ), sonra 15. const icin atama zorunlu — sadece const z; yazarsan yine ReferenceError alirsin.

Mulakatlarda en cok sorulan 2. konu: function declaration ve function expression nasil farkli yükseltilir?

// Function declaration — TAM yükseltilir (deklarasyon + gövde)
console.log(selamla("Ali"));  // "Selam Ali" ✓

function selamla(isim) {
  return "Selam " + isim;
}

// Function expression — sadece const ismi yükseltilir, deger atanmaz
console.log(hosgeldin("Ayşe"));  // ReferenceError ❌

const hosgeldin = function(isim) {
  return "Hoş geldin " + isim;
};

Function declaration (function foo() ) — hem deklarasyon hem gövde scope'un en üstüne çekilir. Cagirildiginda hazir.

Function expression (const foo = function() ) — sadece const değişken ismi yükseltilir (TDZ'de), deger atanmaz. Cagirildiginda henüz undefined, ReferenceError.

TDZ, "zamansal ölü bölge" demek. let ve const değişkenleri deklarasyondan atamaya kadar olan sürede erişilemez.

function tdziGoster() {
  console.log(basla());  // ReferenceError ❌ (TDZ)

  const selamla = function() {
    return "Merhaba";
  };

  function basla() {
    return "Başla!";
  }
}

tdziGoster();

Burada selamla bir const function expression. basla ise function declaration. console.log(basla()) satırında selamla henüz atanmamis (TDZ) ama basla yükseltilmis. Ancak hata alirsin cünkü JS satir sirayla calisir, "TDZ'deki selamla" hatasi daha once firlatilir.

Asagidaki 3 örnek, mulakatta en cok sorulan ve en cok yanlis cevaplanan tuzaklardir.

var a = 1;
let b = 2;
const c = 3;

{
  console.log(a, b, c);  // ?
  var a = 10;
  let b = 20;
  const c = 30;
}

console.log(a, b, c);  // ?

var x = 1;

function test() {
  console.log(x);
  var x = 2;
  console.log(x);
}

test();

console.log(typeof degisken);  // ?
let degisken = "selam";