Menguak Fenomena Hoisting di JavaScript: Kenapa Variabel dan Fungsi Bisa 'Naik' Sendiri?
Tags: javascript
Published: 2024-06-06 03:30:13


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/6btswzo5kjsqfl0f0s0o.png)


Hoisting di JavaScript adalah konsep dimana deklarasi variabel dan fungsi dipindahkan (atau "diangkat") ke bagian atas dari lingkup mereka masing-masing selama fase kompilasi. Ini berarti bahwa kita bisa menggunakan variabel dan fungsi sebelum mereka dideklarasikan di dalam kode kita, karena JavaScript secara otomatis "mengangkat" deklarasi tersebut ke bagian atas.

Nah, biar lebih jelas, bayangin kamu lagi ngegame. Di game itu, semua senjata yang bisa kamu pake udah disiapin di tas kamu sebelum game mulai, meskipun kamu baru ngecek tasnya nanti. Jadi, pas kamu lagi main dan butuh senjata, kamu tinggal ambil aja dari tas tanpa perlu khawatir nyari-nyari lagi.

#### Contoh Hoisting

**1. Hoisting pada Variabel dengan `var`**

```javascript
console.log(myVar); // Output: undefined
var myVar = 10;
console.log(myVar); // Output: 10

```

**Penjelasan:**

Di sini, JavaScript "mengangkat" deklarasi `var myVar` ke bagian atas lingkupnya, tapi inisialisasinya (nilai `10`) tetap di tempat aslinya.
Jadi, pada baris pertama, `myVar` sudah dideklarasikan tapi belum diinisialisasi, makanya output-nya `undefined`.

**2. Hoisting pada Fungsi**

```javascript
myFunction(); // Output: "Hello World"

function myFunction() {
    console.log("Hello World");
}

```
**Penjelasan:**

Fungsi `myFunction` dideklarasikan dan diangkat sepenuhnya ke bagian atas _scope_, termasuk body-nya.
Makanya, kita bisa manggil `myFunction` sebelum deklarasinya di dalam kode.

#### Hoisting pada let dan const

Variabel yang dideklarasikan dengan `let` dan `const` juga dihoist, tapi mereka masuk ke dalam "_temporal dead zone_" sampai inisialisasi mereka dieksekusi. Artinya, meskipun deklarasinya diangkat, temen-temen gak bisa akses mereka sebelum inisialisasi.

Contoh `let` dan `const`

```javascript
console.log(myLetVar); // Error: Cannot access 'myLetVar' before initialization
let myLetVar = 20;

console.log(myConstVar); // Error: Cannot access 'myConstVar' before initialization
const myConstVar = 30;

```

**Penjelasan:**

Di sini, JavaScript juga mengangkat deklarasi `let myLetVar` dan `const myConstVar` ke atas _scope_ mereka, tapi mereka berada dalam "_temporal dead zone_" sampai baris inisialisasinya dicapai.
Makanya, akses ke variabel ini sebelum inisialisasi akan menyebabkan error.

#### Alasan Menggunakan Hoisting
Hoisting bisa bikin kode lebih fleksibel karena kita bisa mendeklarasikan fungsi di mana aja tanpa harus khawatir urutan kode. Tapi, penting buat tetap menulis kode yang bersih dan terstruktur biar gak bikin bingung orang lain (atau diri sendiri) yang baca kode temen-temen.

#### Kesimpulan

- Hoisting: Deklarasi variabel dan fungsi diangkat ke atas lingkup mereka.
- `var`: Deklarasi dihoist, tapi inisialisasi tetap di tempat aslinya (hasilnya bisa undefined).
- `let` dan `const`: Deklarasi dihoist tapi berada dalam "_temporal dead zone_" sampai diinisialisasi (hasilnya error kalau diakses sebelum inisialisasi).
- Fungsi: Deklarasi dan body dihoist sepenuhnya.

Dengan paham konsep hoisting, temen-temen bisa nulis kode JavaScript yang lebih efektif dan bebas dari bug-bug yang bikin pusing. Kurang lebih segitu dulu ya temen-temen, sampai ketemu di artikel lainnya!!!