Hoisting JavaScript

Penjelasan hoisting

Membuat sebuah variable dinamakan dengan [declare]. Lihat contoh di bawah ini untuk declare variable:

var a;

Mengisi sebuah variable kosong dengan nilai awal disebut dengan [initialize]. Lihat contoh di bawah ini untuk initialize variable:

a = 2;

Hoisting adalah kemampuan JavaScript untuk memindahkan declare variable kebagian paling atas code dalam sebuah scope (bagian paling atas script atau function). Hoisting dilakukan secara otomatis oleh JavaScript.

Hoisting terhadap declare variable

Sebuah variable bisa di initialize atau digunakan terlebih dahulu baru di declare belakangan. Lihat contoh di bawah ini:

Code JavaScript 1:

<script>
a = 2;                // initialize [a]
document.write(a);
var a;                // declare [a]
</script>

Hasil code JavaScript 1:

2

Pada code di atas, Kita langsung melakukan initialize variable [a] kemudian terakhir baru kita melakukan declare variable [a].

Pada code tersebut kita bisa melihat bahwa JavaScript melakukan hoisting terhadap declare variable [a] (JavaScript memindahkan declare variable [a] dari paling bawah script ke bagian paling atas script secara otomatis).

Contoh di bawah ini sama dengan contoh di atas, yang berbeda adalah scope-nya. JavaScript melakukan hoisting terhadap declare variable [a] di dalam sebuah function.

Code JavaScript 2:

<script>
function hoisting_ini(){
  a = 2;               // initialize [a]
  document.write(a);
  var a;               // declare [a]
};
hoisting_ini();
</script>

Hasil code JavaScript 2:

2

Pada contoh di atas, JavaScript memindahkah declare variable [a] ke bagian paling atas function (di atasnya [a = 2;]).

Hoisting tidak dilakukan terhadap initialize

JavaScript hanya melakukan hoisting terhadap declare variable sedangkan initialize variable tidak mendapat perlakuan hoisting.

Code JavaScript 3:

<script>
var a;               // declare [a]
document.write(a);
a = 2;               // initialize [a]
</script>

Hasil code JavaScript 3:

undefined

Pada code di atas, Kita melakukan declare variable [a] terlebih dahulu kemudian terakhir baru kita melakukan initialize variable [a].

Pada code tersebut kita bisa melihat bahwa JavaScript tidak melakukan hoisting terhadap initialize variable [a] (JavaScript tidak memindahkan initialize variable [a] dari bagian paling bawah script ke bagian paling atas script secara otomatis).

Karena JavaScript tidak melakukan hoisting terhadap initialize variable [a] maka kita hanya bisa menampilkan isi dari variable [a] yang kosong dengan code document.write(). Hasil dari menampilkan variable kosong adalah undefined.

Contoh berikut ini sama dengan contoh di atas, perbedaannya hanyalah pada scope. JavaScript hanya bisa melakukan hoisting terhadap declare variable, JavaScript tidak bisa melakukan initialize variable.

Code JavaScript 4:

<script>
function hoisting_ini(){
  var a;               // declare [a]
  document.write(a);
  a = 2;               // initialize [a]
};
hoisting_ini();
</script>

Hasil code JavaScript 4:

undefined

Catatan

Mengerti mengenai hoisting sangatlah penting buat programmer JavaScript. Karena jika sebuah program tidak mengindahkan mengenai hoisting maka program yang ditulis memiliki kemungkinan error atau ada bug di dalamnya.

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>