Hoisting Nedir ?

Selamlar herkese. Bu yazımda sizlere hoisting’ ten bahsetmek istiyorum. Basit gibi görünür ama içine girdiğinizde biraz gıcıklaşabiliyor kendisi. O yüzden basit örnekler vererek anlatmaya çalışacağım. Zaten ES6 ile gelen let ve const kullanıyorsak bu gıcık konuya bulaşmamız gerekmez, ama mülakatlarda sorulabildiği için yine de bilmekte fayda var diye düşünüyorum.

Uzun uzun anlatmak istemiyorum, çünkü örneklerle anlaşılabilecek bir konu.

Basit bir örnekle başlayalım.

Birinci örnek ve ikinci örnek zaten beklediğimiz sonuçlar.

Üçüncü örnekte ise, “age” değişkeni tanımlanmış ardından “console.log(age)” denilmiş, hemen altında age değişkenine değer atanmış. Önce değişken ataması yapıldığı için haliyle “undefined” hatası vermesi çok normal.

Peki gelelim asıl mevzuya. Son örnekte sonuç sizce ne olacaktır ?
Hmmm. Bir üstündeki örneğin tam tersi.. İşte burada hoisting konusu devreye giriyor.

Peki ne yaptık ?

1)job=engineer”, önce değer atatık,
2)console.log(job); dedik ve,
3)var job; adında değişkenimizi oluşturduk.

İlk önce değeri atadığımız için js onu bir bellekte tutuyor, “hmm varmı acaba benim aşağılarda bir yerlerde atanmış değişkenim “ diye düşünüp, sabırlı davranıp, aşağı doğru inmeye başlarken “işte buradaaa!” diye bağırıp değişkenini buluyor ve heyecanla hemen kendi değişkenini sahiplenerek onu baş tacı yapıyor.

En sonunda bizim göremediğimiz, şöyle bir yapı olmuş oluyor aslında,

İşte hoisting kavramı en basit haliyle budur. Tüm mesele değişkeni yukarı taşımak aslında. Bunu zaten javascript otomatik olarak yapıyor .

Burada bilmemiz gereken en önemli şey, sadece değişkenler yukarı taşınır, değerler yukarı taşınmaz !

Biraz örneği zorlaştıralım bakalım neler olacak.

Evet sizce yukarıdaki örnekte çıktılar sırası ile ne olur? İlk bakışta 5, 10 ,5 diye gözüküyor değil mi ? Öyle olsa süper olurdu ama “var” tanımlamasının gıcıklığı işte. Doğru çıktı undefined, 10, 5.

Burada hoisting devreye giriyor. "var “ değişkenleri fonksiyon başlangıcında tanımlanır ve tanımın nerede olduğu önemli değildir.( iç içe fonksiyonları hariç tabi ).

Yani Javascript fonksiyon başladığında “var” değişkenlerini scop’un en yukarısına taşır. (Bunun ile ilgili örneği makale sonunda bulabilirsiniz.Şimdi kafa karıştırmayalım.)

“var x = 10" için hoisting işlemini başlatıyoruz.

Ne demiştik her zaman değişkenler yukarı taşınır diye. (Bağlı olduğu scope içerisinde tabi ! )

Bizim göremediğimiz son yapı bu şekilde olmuş oluyor.

Böyle bir yapı olunca zaten, çıktılar artık normalleşiyor.

Biraz kafanız karışmış olabilir ama bu sadece “var” değişkene özel bir durum. Zaten artık “var” kullanmayı kimse tavsiye etmiyor. Yukarıdaki tanımlamaları “let” ile yapsaydık eğer ReferenceError: x is not defined hatası alacaktık. Çünkü;

LET ve CONST hoisting işlemine duyarlı değildir !

Aslında let ve const anahtar kelimeleri hoist ediliyor ancak initialization aşamasında oluşan farklılıktan dolayı let ve cons kullanımı ReferenceError oluşmasına neden oluyor.

Zaten let ve const değişkenlerinin değerlerini kullanabilmek için, değişken tanımlamanın altında işlemlerimizi yapmamız gerekiyor, aksi taktirde hata verecektir.

Gördüğünüz gibi zaten person altılı çizili hata veriyor :)

(Bu işin teknik kısmı var tabi ama bu makalede onlara girmeyeceğim. Teknik kısmı başlarda fazlaca kafa karıştırıcı olabiliyor çünkü.)

ÖNERİ : Zaten bütün değişkenlerimizi doğru yapıda kullanırsak hoisting düşünmemize gerek kalmaz. Yani değişkenimizi, kullanacağımız yerin üzerinde tanımlarsak hiç bir sorun olmayacaktır.

Artık “Var” kullanmayı bırakalım, Let ve Const candır !

+ Son olarak yukarıda bahsettiğim örneği göstermek istiyorum.

Aşağıdaki kodların sizce çıktıları sıra ile ne olur ?

İpucu : “Var” değişkenlerin tanımlanması fonksiyon başladığında gerçekleşir.

Fonksiyon başladığında “var” için kartlar yeniden düzenlenir ve bütün “var” değişkenleri scope’ın en üzerine dizilir. Yani bizim göremediğimiz şekilde böyle dizilirler.

Böyle herşey daha anlamlı öyle değil mi ? Şimdi çıktılarımızı rahatça yazabiliriz işte :)

Umarım bu hoisting konusu kafanızda oturmuştur.

Hadi bunuda size bırakayım biraz kafanız yanabilir ama yukarıdaki örnekle benzer :)

İsterseniz yorum olarak çıktıları yazabilirsiniz.

Görüşmek üzere, mutlu kodlamalar :)