Mengenal Javascript Hoisting

Function declaration dan variable declaration otomatis berpindah (“hoisted”) secara tak kasat mata ke posisi paling atas di dalam scope yang melakukan deklarasi oleh intepreter Javascript.

VariableSecara default jika variable belum dideklarasikan, akan ada ReferenceError.

function my_function() {
    console.log(aloha); // => throws a ReferenceError
}

Saat variable telah di-deklarasikan.

function my_function() {
    console.log(aloha === undefined); // => true
    var aloha = 1;
}

Kode diatas diintepretasikan oleh Javascript menjadi seperti dibawah ini.

function my_function() {
    var aloha;
    console.log(aloha === undefined); // => true
    aloha = 1;
}

Berbeda dengan deklarasi variable dengan var, let dan const memiliki konsep Temporal Dead Zone (TDZ).

Dengan menggunakan let, deklarasi ulang akan menyebabkan TypeError.

if (aloha) {
    let foo;
    let foo; // TypeError thrown.
}

Melakukan reference terhadap variable didalam suatu block sebelum variable di-deklarasi akan menyebabkan ReferenceError. Hal ini dikarenakan variable berada dalam “temporal dead zone” hingga deklarasi variable diproses.

// error
function my_function() {
    console.log(foo); // ReferenceError
    let foo = 2;
}

FunctionPerlu diketahui, Javascript ada istilah function expression dan function declaration.

// anonymous function expression
var my_var = function() {/* do something */};

Anonymous function expression melakukan “hoist” terhadap nama variable saja, tidak dengan isinya.

function my_function() {
 console.log(my_anonymous); // => undefined

Named function expression melakukan “hoist” terhadap nama variable saja, tidak dengan nama function ataupun body dari function.

function my_function() {
    console.log(named); // => undefined

Function declaration melakukan “hoist” baik nama ataupun body dari function.

function my_function() {
    example(); // => Flying

Lebih lanjut mengenai hosting dapat dilihat tulisan Javascript Scoping & Hoisting.

Sumber