JavaScript - Function Hoisting: A Beginner's Guide

Hai daar, bakat-bakat JavaScript masa depan! Hari ini, kita akan melihat aspek menarik JavaScript yang sering menangkap pengguna baru: Function Hoisting. Jangan bimbang jika ini terdengar agak mistik - setelah selesai pelajaran ini, anda akan dapat mengangkat fungsi seperti seorang pro!

Apa Itu Function Hoisting?

Sebelum kita melompat ke hal yang mendalam, mari kita mulai dengan definisi sederhana:

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

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

Contoh 1: Fungsi yang Muncul secara Magis

sayHello(); // Ini berkerja!

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

Jika anda baru dalam pemrograman, anda mungkin sedang merenggangkan kepalanya saat ini. "Bagaimana kita dapat memanggil fungsi sebelum itu didefinisikan?" anda bertanya. Well, teman-teman sayang, itu adalah keajaiban function hoisting!

Dalam contoh ini, JavaScript "mengangkat" keseluruhan fungsi sayHello ke puncak skopnya. Jadi, di belakang layar, itu seperti kode ini ditulis seperti ini:

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

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

Contoh 2: kisah Dua Fungsi

Mari kita tambahkan sedikit kegembiraan 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 berkerja baik saat dipanggil sebelum deklarasi nya, karena hoisting. Tetapi farewell yang miskin memberikan kesalahan. Mengapa? Karena hanya deklarasi variabel var farewell saja yang diangkat, bukan penugasan fungsi nya.

Aturan-aturan Function Hoisting

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

1. Deklarasi fungsi sepenuhnya diangkat.
2. Deklarasi variabel diangkat, tetapi bukan penugasan nya.
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 berkerja
hello();

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

// Ini tidak bekerja
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 sepenuhnya diangkat. Tetapi goodbye adalah ekspresi fungsi, jadi hanya bagian var goodbye saja yang diangkat, bukan fungsi itu sendiri.

Hoisting Variabel JavaScript

Sekarang kita telah melihat function hoisting, mari kita lihat secara singkat hoisting variabel. 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 menampilkan 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" di mana anda tidak dapat mengakses variabel sebelum deklarasi nya.

Impikasi Praktis dan Praktik Terbaik

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

1. Selalu deklarasikan variabel anda di puncak skop nya. Ini membuat kode anda lebih jelas dan mencegah perilaku yang tak terduga.

2. Gunakan deklarasi fungsi untuk fungsi yang anda ingin gunakan sepanjang kode anda. perilaku hoisting nya bisa sangat 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 instead of var. Mereka menyediakan perilaku penjangkauan yang lebih prediksi.

Berikut adalah tabel yang menyummaris perilaku hoisting jenis deklarasi yang berbeda:

Jenis 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, para programmer muda! 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 prediksi.

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

Terus latih, terus coding, dan yang paling penting, terus bertanya. Setelah semuanya, hanya pertanyaan yang bodoh adalah yang anda tidak bertanya!

Sampaijumpa lagi, coding yang gembira!

Credits: Image by storyset