JavaScript Hoisting nedir?

 

Merhaba arkadaşlar bugün kısa ama önemli bir konu üzerine konuşacağız. JavaScript‘in güzel ama bilinmediği zaman hatalara sebep verebilen bir özelliğidir Hoisting. Kısa ve anlamlı bir şekilde anlatmaya çalışacağım.

Önemli bir not da şu olacaktır; eğer scriptiniz “strict mode” da ise hoisting hata verecektir. Strict mode hakkındaki yazım için şu linki tıklayabilirsiniz.

Hoisting kısaca değişken tanımlamalarının başa çıkarılmasıdır, hoisting kelime anlamını da zaten “yukarı çekmek” olarak söyleyebiliriz. Peki yukarı çekmekten kastımız nedir onu konuşalım.

JavaScript’de bir değişken kullanıldıktan sonra tanımlanabilir, yani bir değişkeni tanımlamadan önce kullanabilir.

Örneğin altta vereceğim iki örnek de aynı sonucu yani x için 715 sonucunu verecek:

1
2
3
4
5
x = 715; // x değişkenini tanımlamadan 715 değerini atadık.</code>

alert(x);

var x; // x'i kullandıktan sonra tanımladık.

şimdi aynı sonucu verecek bir diğer örnek yazalım:

1
2
3
4
5
var x;

x = 715; // x değişkenini tanımlamadan 715 değerini atadık.

alert(x);

Burada dikkat edilmesi gereken şey, tanımlamanın kapsamı. Yani bir fonksiyon içindeyseniz Hoisting tanımlamanızı fonksiyonun en üstüne taşır, global ise script’in en üstüne taşır.

Değişken tanımlamaları Hoisting yapılırken, değişkene değer atamaları hoisting yapılmaz. Şimdi bunu anlayalım, eğer ki fonksiyonumuzda değişkenimize değer atamadan bir yerde kullanmaya çalışırsak ve bu değeri kullanıdığımız satırın aşağısında atadıysak hata alacağızdır. Örneklerle daha mantıklı hale gelecektir eminim.

 

Aşağıda verdiğim iki örnek bu sefer aynı sonucu vermeyecektir.

1
2
3
4
var x = 715; // x'i tanımladık ve 715 değerini atadık.
var y = 815; // y'yi tanımladık ve 815 değerini atadık.

alert(x + " ve " + y); //burada alacağımız sonuç: "715 ve 815" dir.
1
2
3
4
5
var x = 715; // x'i tanımladık ve 715 değerini atadık.

alert(x + " ve " + y); // burada alacağımız sonuç ise "715 ve undefined" olacaktır.

var y = 815; // y'yi kullandıktan sonra tanımladık ve 815 değerini atadık.

Bu iki örneğin farklı sonuç vermesinin sebebi, son örnekte y’nin değer atamasını sonradan yapmış olmamızdır. Çünkü JavaScript‘de değer tanımalaması yani “var y” hoisting edilirken, “= 815” kısmı yani değer ataması hoisting edilmez / üste çekilmez.

Son bir örnek ile üstteki konuyu netleştirelim, bu sefer y değişkenimizi üstte tanımlayalım ama değer atamayalım. yine “undefined” sonucunu verecektir.

1
2
3
4
5
6
var x = 715; // x'i tanımladık ve 715 değerini atadık.
var y;     // y'yi tanımladık.

alert(x + " ve " + y); // sonucumuz yine "715 ve undefined" olacaktır.

y = 815; // y'ye 815 değerini atadık.

üstteki son örneğimizde de JavaScript’de değer atamalarının hoisting edilmediğini görmüş olduk.

 

Hoisting aslında anlaması zor bir konu olmasada bilinmediği zaman hatalar ortaya çıkarabilen bir konudur. O yüzden tanımlamaları her zaman scope’un üstünde yapmak bizi hatalardan korur.

Evet arkadaşlar, bugün JavaScript’in tatlı bir özelliğinden bahsetmiş olduk umarım anlamlı olabilmişimdir, hatasız kodlar iyi günler dilerim.

ahmet

Ahmet Kılınç - Software Developer

Bunlar da hoşunuza gidebilir...

Bir cevap yazın

E-posta hesabınız yayımlanmayacak. Gerekli alanlar * ile işaretlenmişlerdir

This site uses Akismet to reduce spam. Learn how your comment data is processed.