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.

Variable
Secara 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.
}

switch (aloha) {
  case 0:
    let foo;
    break;

  case 1:
    let foo; // TypeError for redeclaration.
    break;
}

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;
}

// error
function example() {
  console.log(my_const); // => throws a ReferenceError
  console.log(typeof my_const); // => throws a ReferenceError
  const my_const = true;
}

Function
Perlu diketahui, Javascript ada istilah function expression dan function declaration.

var my_var = function() {/* do something */}          // anonymous function expression
var example = function aloha() {/* do something */};  // named function expression
function example() {/* do something */}               // function declaration

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

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

  my_anonymous(); // => TypeError anonymous is not a function

  var my_anonymous = function () {
    console.log('anonymous function expression');
  };
}

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

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

  named(); // => TypeError named is not a function

  example(); // => ReferenceError example is not defined

  var named = function example() {
    console.log('Aloha');
  };
}

// ketika nama variable sama dengan nama function
// hasilnya sama
function my_function() {
  console.log(named); // => undefined

  named(); // => TypeError named is not a function

  var named = function named() {
    console.log('named');
  }
}

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

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

  function example() {
    console.log('Aloha');
  }
}

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

Sumber

Mengenal Javascript Hoisting

Tinggalkan Balasan

Isikan data di bawah atau klik salah satu ikon untuk log in:

Logo WordPress.com

You are commenting using your WordPress.com account. Logout / Ubah )

Gambar Twitter

You are commenting using your Twitter account. Logout / Ubah )

Foto Facebook

You are commenting using your Facebook account. Logout / Ubah )

Foto Google+

You are commenting using your Google+ account. Logout / Ubah )

Connecting to %s