JavaScript - Function Hoisting: A Beginner's Guide

Halo sana, para ahli JavaScript masa depan! Hari ini, kita akan mendalami aspek menarik JavaScript yang sering menangkap pemula: Function Hoisting. Jangan khawatir jika terdengar agak mistis - setelah selesai pelajaran ini, Anda akan bisa mengangkat fungsi seperti seorang pro!

Apa Itu Function Hoisting?

Sebelum kita masuk ke detilnya, mari mulai dengan definisi sederhana:

Function hoisting adalah perilaku di JavaScript dimana deklarasi fungsi dipindahkan ke puncak lingkup mereka sebelum kode dieksekusi.

Sekarang, saya tahu apa yang Anda pikirkan: "Tapi gurunya, ini maksudnya apa?" Mari kitaura dengan beberapa contoh, ya?

Contoh 1: Fungsi yang Muncul Magic

sayHello(); // Ini bisa kerja!

function sayHello() {
console.log("Hello, world!");
}

Jika Anda baru belajar pemrograman, Anda mungkin sedang menggaruk kepala saat ini. "Bagaimana bisa memanggil fungsi sebelum itu didefinisikan?" Anda bertanya. Well, teman-teman sayang, itu adalah keajaiban function hoisting!

Dalam contoh ini, JavaScript "mengangkat" seluruh fungsi sayHello ke puncak lingkupnya. Jadi, di belakang layar, seolah-olah kode ditulis seperti ini:

function sayHello() {
console.log("Hello, world!");
}

sayHello(); // Sekarang ini membuat sense, kan?

Contoh 2: kisah Dua Fungsi

Mari kita perbanyak hal dengan contoh lain:

greeting("John"); // Output: "Hello, John!"
farewell("John"); // Error: farewell is not a function

function greeting(name) {
console.log("Hello, " + name + "!");
}

var farewell = function(name) {
console.log("Goodbye, " + name + "!");
};

Dalam kisah dua fungsi ini, kita melihat perilaku yang berbeda. Fungsi greeting berjalan lancar saat dipanggil sebelum deklarasi thanks to hoisting. Tetapi farewell menjatuhkan kesalahan. Mengapa? Karena hanya deklarasi variabel var farewell yang diangkat, bukan penugasan fungsi.

Aturan Function Hoisting

Sekarang kita telah melihat function hoisting dalam aksi, mari kita tetapkan beberapa aturan dasar:

1. Deklarasi fungsi sepenuhnya diangkat.
2. Deklarasi variabel diangkat, tetapi bukan penugasan mereka.
3. Ekspresi fungsi (ketika Anda menugaskan fungsi ke variabel) tidak diangkat.

Mari kita jelajahi aturan ini dengan lebih banyak contoh!

Contoh 3: Deklarasi vs. Ekspresi

// Ini bisa kerja
hello();

function hello() {
console.log("Hello from a function declaration!");
}

// Ini tidak bisa kerja
goodbye(); // Error: goodbye is not a function

var goodbye = function() {
console.log("Goodbye from a function expression!");
};

Di sini, hello adalah deklarasi fungsi, jadi itu diangkat sepenuhnya. Tetapi goodbye adalah ekspresi fungsi, jadi hanya bagian var goodbye yang diangkat, bukan fungsi itu sendiri.

Hoisting Variabel JavaScript

Sekarang kita telah menutupi function hoisting, mari kita lihat singkat tentang variabel hoisting. Ini adalah konsep yang terkait yang penting untuk dipahami.

Contoh 4: Tak Terdefinisi Mysterious

console.log(x); // Output: undefined
var x = 5;
console.log(x); // Output: 5

Dalam contoh ini, deklarasi x diangkat, tetapi bukan penugasan nya. Jadi pertama console.log mengeluarkan undefined, sedangkan yang kedua menunjukkan nilai yang ditugaskan.

Contoh 5: Let dan Const - Anak Baru di Blok

console.log(a); // ReferenceError: Cannot access 'a' before initialization
let a = 10;

console.log(b); // ReferenceError: Cannot access 'b' before initialization
const b = 20;

Dengan pengenalan let dan const di ES6, kita mendapat perilaku baru. Deklarasi ini diangkat, tetapi belum diinisialisasi. Ini menciptakan "temporal dead zone" tempat Anda tidak dapat mengakses variabel sebelum deklarasi nya.

Impikasi Praktis dan Best Practices

Sekarang kita mengerti bagaimana hoisting bekerja, apa artinya bagi kita sebagai pengembang?

1. Selalu deklarasikan variabel Anda di puncak lingkup mereka. Ini membuat kode Anda lebih jelas dan mencegah perilaku yang tak terduga.

2. Gunakan deklarasi fungsi untuk fungsi yang Anda ingin gunakan di seluruh kode Anda. perilaku hoisting nya bisa berguna.

3. Berhati-hati dengan ekspresi fungsi. Ingat, mereka tidak diangkat seperti deklarasi fungsi.

4. Jika ragu, deklarasikan dan inisialisasikan bersamaan. Ini menghilangkan segala kebingungan tentang nilai variabel.

5. pertimbangkan untuk menggunakan let dan const bukan var. Mereka memberikan perilaku lingkup yang lebih prediktif.

Berikut adalah tabel yang menggabungkan perilaku hoisting dari jenis deklarasi yang berbeda:

Tipe Deklarasi	Diangkat?	Diinisialisasi?
Function Declaration	Ya	Ya
var	Ya	Undefined
let	Ya	Tidak (TDZ)
const	Ya	Tidak (TDZ)
Function Expression	Tidak	Tidak

Kesimpulan

Dan begitu saja, para pemrogram pucuk! Kita telah membongkar misteri function hoisting di JavaScript. Ingat, memahami konsep ini tidak hanya tentang mengetahui aturan - itu tentang menulis kode yang lebih bersih dan prediktif.

Dalam perjalanan JavaScript Anda, Anda akan menemukan banyak fitur menarik (dan kadang-kadang membingungkan). Tetapi jangan kecewa! Setiap kali Anda belajar sesuatu yang baru, Anda satu langkah lagi menuju menjadi seorang ninja JavaScript.

Tetap latih, tetap coding, dan terutama, tetap bertanya. Setelah semuanya, hanya pertanyaan yang bodoh adalah yang Anda tidak ajukan!

Sampai jumpa lagi, selamat coding!

Credits: Image by storyset