Pengangkatan JavaScript: Yang Perlu Anda Ketahui

Jika Anda telah bekerja dengan JavaScript selama beberapa waktu, Anda mungkin pernah mendengar istilah "hoisting". Bahkan, bagi pewawancara, ini adalah salah satu konsep yang ingin mereka tanyakan karena menunjukkan tingkat pemahaman kandidat terhadap JavaScript. Namun, apa sebenarnya arti mengangkat, dan bagaimana pengaruhnya terhadap kode Anda? Pada artikel ini, saya akan membawa Anda melalui apa yang perlu Anda ketahui tentangnya dan dampaknya pada kode Anda.

Pertama-tama, mari kita lihat arti linguistik dari istilah ini sebelum kita membahas penggunaan teknisnya. Mengangkat hanya digunakan untuk merujuk pada tindakan menaikkan atau menarik sesuatu, biasanya dengan menggunakan tali atau katrol. Anda akan mendengar pernyataan seperti "dia mengangkat tas punggungnya ke bahunya", "mengibarkan bendera", "muatan telah diangkat ke kapal" , dan sebagainya. Arti lainnya dari hoisting adalah mengangkat atau mendaki.

Sehubungan dengan JavaScript, "hoisting" mengacu pada perilaku di mana juru bahasa secara otomatis memindahkan deklarasi untuk variabel atau fungsi ke bagian atas cakupan penampungnya sebelum dieksekusi. Ini berarti sebelum variabel atau fungsi dideklarasikan dalam kode Anda, Anda masih bisa menggunakannya.

Misalnya, pertimbangkan kode berikut:

Baris var x = 10 memiliki dua tindakan di dalamnya:

1. Deklarasi variabel “var”.
2. Penetapan variabel “=”.

Menariknya, perlu dicatat bahwa mengangkat hanya memengaruhi deklarasi, bukan penugasan atau inisialisasi. Pada contoh di atas, nilai x tidak terdefinisi saat masuk ke konsol karena penugasan ke 10 belum dilakukan.

Untuk memahami ini dengan lebih baik, mari kita lihat bagaimana perilaku ini ditunjukkan oleh fungsi.

Dalam contoh di atas, Anda akan mengamati bahwa meskipun fungsi dipanggil sebelum dideklarasikan, kode masih berfungsi dengan baik dan memberi kami ekspresi yang benar saat dicatat. Apakah fungsi dideklarasikan sebelum pemanggilan atau sebaliknya, perilakunya tetap sama. Interpreter JavaScript telah mengambil deklarasi fungsi dan menempatkannya di bagian atas ruang lingkup sebelum dieksekusi. Seolah-olah kodenya terlihat seperti ini:

Di sisi lain, mari pertimbangkan bagaimana mengangkat bekerja dengan fungsi anonim atau fungsi yang ditetapkan ke variabel. Contoh dari ini ditunjukkan pada contoh di bawah ini:

Seperti yang Anda lihat, kode di atas menghasilkan kesalahan. Mengangkat tidak mendukung penugasan, yang merupakan penjelasan yang disebutkan sebelumnya mengapa hal ini terjadi. Ekspresi yang dikenal sebagai "ekspresi fungsi yang segera dipanggil" adalah pendekatan inovatif untuk menjalankan fungsi anonim (singkatnya IIFE).

Sama pentingnya dengan perilaku hosting dalam variabel JavaScript adalah dua kata kunci "let" dan "const", yang juga digunakan untuk deklarasi variabel seperti "var". Tidak seperti rekan "var" mereka, nilai variabel yang dideklarasikan dengan "biarkan" atau "const" tidak diangkat. Jika Anda mencoba mengakses nilai salah satunya sebelum dideklarasikan, Anda akan mendapatkan pengecualian ReferenceError seperti yang ditunjukkan pada gambar di bawah.

Saat menggunakan hoisting, satu kesalahan umum yang dilakukan banyak developer adalah menganggap bahwa nilai variabel selalu diinisialisasi menjadi tidak terdefinisi. Ini hanya akurat untuk variabel yang memiliki kata kunci "var" dalam deklarasinya. Upaya apa pun untuk mengakses variabel yang telah dideklarasikan dengan "let" atau "const" sebelum penugasan dilakukan akan menghasilkan ReferenceError. Praktik terbaik pengkodean modern sangat menyarankan untuk menghindari penggunaan "var" demi "membiarkan" dan "const" karena mereka menawarkan perlindungan yang lebih baik terhadap perubahan yang tidak diinginkan atau tidak disengaja pada variabel Anda.

Kesimpulannya, mengangkat adalah konsep penting dalam JavaScript yang dapat berdampak besar pada kode Anda. Pastikan untuk mengingatnya saat Anda menulis dan men-debug program Anda untuk menghindari ambiguitas atau perilaku tak terduga yang ditimbulkannya. Biasanya merupakan praktik yang baik untuk mendeklarasikan semua variabel Anda di bagian atas cakupan Anda. Ini tidak hanya akan membuat kode Anda lebih mudah dipahami tetapi juga mudah dipelihara.