Di balik layar Hoisting di Javascript

Apr 01 2023
Salah satu pertanyaan wawancara yang paling sering diajukan terkait JavaScript adalah “What is hoisting?” Biasanya, jawaban atas pertanyaan ini melibatkan pernyataan bahwa mengangkat adalah perilaku dalam JavaScript yang mengizinkan penggunaan variabel dan fungsi sebelum dideklarasikan secara formal. Tapi apa mekanisme yang mendasari di balik pengangkatan dalam JavaScript, dan mengapa itu mengizinkan penggunaan variabel dan fungsi sebelum dideklarasikan? Juga, mengapa mengangkat unik untuk JavaScript dan tidak dalam bahasa pemrograman lain? Untuk mendapatkan pemahaman yang lebih baik tentang konsep ini, mari kita lihat lebih dekat apa yang terjadi selama fase kompilasi dan eksekusi kode.

Salah satu pertanyaan wawancara yang paling sering diajukan terkait JavaScript adalah “ Apa itu hoisting?

Biasanya, jawaban atas pertanyaan ini melibatkan pernyataan bahwa mengangkat adalah perilaku dalam JavaScript yang mengizinkan penggunaan variabel dan fungsi sebelum dideklarasikan secara formal.

Tapi apa mekanisme yang mendasari di balik pengangkatan dalam JavaScript, dan mengapa itu mengizinkan penggunaan variabel dan fungsi sebelum dideklarasikan? Juga, mengapa mengangkat unik untuk JavaScript dan tidak dalam bahasa pemrograman lain? Untuk mendapatkan pemahaman yang lebih baik tentang konsep ini, mari kita lihat lebih dekat apa yang terjadi selama fase kompilasi dan eksekusi kode.

Foto oleh Mohammad Rahmani di Unsplash

Konteks Eksekusi

Saat Anda menjalankan file JavaScript, ia membuat Konteks Eksekusi (EC) yang terdiri dari dua bagian utama: blok memori dan blok kode. Blok memori menyimpan variabel dan berfungsi sebagai pasangan kunci-nilai, sedangkan blok kode dijalankan setelah alokasi memori selesai. Memahami EC sangat penting untuk memahami bagaimana JavaScript beroperasi.

Mari tulis EC untuk potongan kecil kode ini.

Selama fase pertama Konteks Eksekusi (EC), yang disebut alokasi memori, EC mencadangkan ruang memori untuk variabel "a" dan menetapkan nilai placeholder "tidak terdefinisi" hingga mendapatkan nilai yang tepat. Penting untuk dicatat bahwa "tidak terdefinisi" menunjukkan bahwa variabel ada di memori tetapi belum memiliki nilai yang ditetapkan untuknya, sedangkan "tidak terdefinisi" berarti variabel tersebut belum dideklarasikan sama sekali.

Selain itu, EC menyalin seluruh kode blok fungsi dan menyimpannya. Setiap kali fungsi baru ditemukan, JavaScript membuat EC baru untuk menanganinya.

Setelah Fase 1 EC

Selama fase kedua Konteks Eksekusi (EC), blok kode dijalankan. Pada baris 1, variabel "a" diinisialisasi dengan nilai 10. EC memperbarui blok memori dengan menetapkan nilai 10 ke variabel "a" dan beralih ke baris 9. Pada baris 9, sebuah fungsi bernama "b( )” dipanggil, dan EC memeriksanya di blok memori dan mengeksekusinya. Setelah itu, EC berpindah ke baris 10 dan mengambil nilai “a” dari blok memori, mencetaknya ke konsol.

Setelah Fase 2 EC

Sekarang mari kita coba menulis EC untuk kode di bawah ini. Bisakah Anda menebak apa outputnya? Dan apa bedanya dengan Gambar 2?

Gambar 1 (kiri) dan Gambar 2 (kanan)
Output untuk Gambar 1 (kiri) dan Gambar 2 (kanan)

Melihat kode di sisi kanan, Konteks Eksekusi (EC) mencari variabel "a" di blok memori. Namun, karena tidak ada variabel yang dideklarasikan di blok memori, EC berhenti mengeksekusi dan melemparkan kesalahan referensi. Error ini terjadi saat variabel atau fungsi dipanggil atau direferensikan tetapi tidak dideklarasikan atau didefinisikan.

Eksekusi JavaScript dalam dua fase, yaitu fase alokasi memori dan fase eksekusi kode, justru mengapa JavaScript dapat melakukan hoisting. Selama fase alokasi memori, JavaScript mengatur ruang memori untuk variabel dan fungsi dan memberi mereka nilai placeholder "tidak terdefinisi" hingga dideklarasikan dengan benar dalam fase eksekusi kode.