Javascript Hoisting

Javascriptte anlaması karmaşık olan konulardan biri olan hoisting’in variable, fonksiyon ve class’larda nasıl çalıştığını kod örnekleriyle açıklamaya çalışacağım.

Hoist işlemi temel olarak kodu yukarı taşıyıp çalıştıran bir yapıdır diyebiliriz.

Variable Hoist(let,const,var)

Hoist işlemi bu üç kategori için farklı bir çalışma şekli göstermektedir.

İlk olarak ES6 ile hayatımıza giren block scopinge sahip let ve const’u inceleyelim.

console.log(name) // ReferenceError: Cannot access 'name' before initialization
let name = "seda"

Bu kodda teknik olarak hoist işlemi yapıldı fakat Temporal Dead Zone(TDT) nedeniyle tanımlamasını yapmadan önce erişmeye çalıştığımızdan dolayı ReferenceError aldık.

console.log(name) // ReferenceError: Cannot access 'name' before initialization
const name = "seda"

const ve let variable’larında hoist şu şekilde oluyor:

Tanımlanan variable’lar kodun en üstüne çıkarılır fakat bu iki değer için tanımlanan default bir değeri olmadığın reference error alıyoruz. Eğer yaptığımız tanımlamadan sonra console.log(name) işlemlerini yapsaydık “seda” çıktısını görecektik.

Son olarak var tipi ile ilgili örnekleri açıklayacağım

console.log(name) //undefined
var name = "seda"

Yukarıda bahsettiğim TDZ’de var tipi için tanımlanan default value undefined olduğundan console çıktımız undefined oldu.

Biraz daha karmaşık örnekler inceleyerek hoist işlemini daha anlaşılır bir hale getirmeye çalışacağım.

var x = 10;

function changeValue() {
    console.log(x) //undefined
    var x = 5;
    console.log(x) // 5
}
changeValue();
console.log(x) //10

Kodun ilk satırında global bir x tanımladık ve değerine 10 dedik

Daha sonra changeValue adında bir fonksiyon tanımladık. Bu fonksiyonun ilk satırında yeni bir local x değeri tanımladığımız için ilk console undefined döner -var tipinin default’u undefined olduğundan- tanımlama sonrası yazdırdığımız console ise elbette atadığımız değeri dönecek. Son yazdığımız console da global olarak tanımladığımız x değerine eriştiğimizden 10 çıktısını alırız.

Function Hoist

Fonksiyonlarda hoisting’i iki farklı yapı ile inceleyeceğiz. İlk örneğim;

giveName(); //seda
function giveName() {
    console.log("seda")
}

Aslında baktığımızda fonksiyonu tanımlamadan önce fonksiyonu çağrıyoruz ama yine de beklediğimiz çıktıyı alıyoruz. Peki ama nasıl ? Tabiki hoist işlemi sayesinde tanımlanan fonksiyonu yukarı taşıyarak fonksiyonu çalıştırmış olduk.

Peki fonksiyonu şu şekilde çalıştırsak ne olurdu ?

giveName(); // giveName is not a function
var giveName = function () {
    console.log("seda")
}

Aslında baktığımızda burada fonksiyon tanımlamayı bir variable’a atayarak yapıyoruz ve bunun tipi de var yani yukarıda bahsettiğimiz gibi çalışmaya başlıyor fonksiyon artık. var tipi yerine let ve const kullanmış olsaydık alacağımız çıktı şu şekilde olacaktı

giveName(); // Cannot access 'giveName' before initialization
const giveName = function () {
    console.log("seda")
}

Class Hoist

Classlar let ve const variablelarıyla aynı davranışa sahiptir. Eğer classı tanımlamadan önce classı kullanmaya çalışırsak hata alacağız.

const Dog = new Animal("Bingo")
// ReferenceError: Cannot access 'Animal' before initialization

class Animal {
  constructor(name) {
    this.name = name
  }
}

Kodun doğru şekilde çıktı verebilmesi için şu şekilde yazmamız gerekir

class Animal {
  constructor(name) {
    this.name = name
  }
}
const Dog = new Animal("Bingo")
console.log(Dog) // Animal { name: 'Bingo' }

Kaynaklar :

1- https://www.freecodecamp.org/news/what-is-hoisting-in-javascript-3/

2- https://sahinzaybak1.medium.com/js-hoisting-nedir-2c85480de002

3-https://www.adequatelygood.com/JavaScript-Scoping-and-Hoisting.html