Javascript Hoisting Nedir ?

Merhaba arkadaşlar. Bu yazımızda Javascript Hoisting kullanımına değineceğiz.

Hoisting, Javascript'te değişkenlerimizin başta tanımlanması işlemidir. Zaten kelime anlamı da kaldırmaktır.

Hoisting olayının temel amacı aşağıda tanımladığınız değişkenlere yukardan veya herhangi bir yerden rahat bir şekilde ulaşmanızdır.

Javascript ile Hoisting Kullanımı

Javascript'te bir değişken kullanıldıktan sonra tanımlanabilir. Bu kullanımda hatayla karşılamşayız.

Çalışma mantığı şudur. Bir değişkeni ekrana yazdırdık ama o değişken ekrana yazdırdığımız yerin üstünde değil altında. Javascript bu durumda tüm sayfayı inceler ve eğer değişkeni bulursa değerini ekrana yazdırır. Bunu örnekle daha iyi anlayacaksınız. Aşağıya 2 farklı kod yazacağım ve ikisininde sonucu aynı olacak.

Örnek 1:

<script>
x = 5;   // x'e 5 değerini atadık
console.log(x) // x değerini konsola yazdırdık
var x;  // x değişkenini tanımladık
</script>

Örnek 2:

<script>
var x; // x değişken tanımlandı
x = 5; // 5 değeri atandı

console.log(x); //x değeri ekrana yazıldı
</script> 

Yukardaki örnek 1 ve örnek ikiyi detaylı incelediğimiz zaman görüyoruz ki değişkenin tanımlandığı yerin kullanmadan önce veya sonraki satırlar olmasının hiçbir önemi yok.

Ancak kod bütünlüğü ve okunabilirlik açısından global değişkenleri kod bloğunun en tepesinde tanımlamak en doğru karar olacaktır. Diğer türlü uzun kodlarda karmaşıklığa sebebiyet verebiliriz.

Let ve Const Anahtar Kelimeleri

Let ve const anahtar kelimeleriyle hoisting yapmaya çalışırsak javascript aynen şu resimdeki hatayı veriyor.

Eğer önce değişkene değer verip sonra let veya const ile o değişkeni tanımlarsak Javascript "Reference Error" hatası verecektir. Yani ecmascript abimiz bu konuda biraz katı davranıyor.

<script>
  isim = "Zafer";
  let isim;
  console.log(isim);
// kod çalıştığında  Reference error hatası verecektir.
</script>

Hoisting kavramı kafa karıştırıcı olsa da bilinmediği zaman çeşitli hatalara yol açabiliyor. Ve maalesef birçok yazılımcı tarafından bilinmiyor.