Scope dan Hoisting di JavaScript

Belajar scope dan hoisting di JavaScript dengan contoh praktis. Pahami perbedaan global scope, local scope, block scope, serta cara kerja hoisting dengan var, let, dan const.

keywords: scope javascript, hoisting javascript, global scope js, local scope, block scope, var let const, hoisting js

Pernahkah kamu menulis kode, tapi tiba-tiba variabel tidak bisa diakses? Atau anehnya, variabel bisa dipanggil sebelum dideklarasikan?
👉 Itu karena ada konsep penting dalam JavaScript: Scope dan Hoisting.

Kalau kamu memahami keduanya, kode kamu akan jauh lebih aman, rapi, dan bebas dari error aneh.

Apa Itu Scope di JavaScript?

Scope adalah cakupan atau lingkup akses variabel.
Dengan kata lain, scope menentukan di mana variabel bisa digunakan.

Bayangkan variabel seperti kotak mainan:

• Kalau kotak ada di ruang tamu (global), semua orang bisa main.
• Kalau kotak ada di kamar (local), hanya pemilik kamar yang bisa main.

Jenis-jenis Scope di JavaScript

1. Global Scope

Variabel yang dideklarasikan di luar function/block → bisa diakses di mana saja.

let nama = "Budi"; // Global scope

function sapa() {
  console.log("Halo " + nama);
}

sapa(); // Halo Budi
console.log(nama); // Budi

let nama = "Budi"; // Global scope

function sapa() {
  console.log("Halo " + nama);
}

sapa(); // Halo Budi
console.log(nama); // Budi

2. Local Scope (Function Scope)

Variabel di dalam function → hanya bisa diakses dari function tersebut.

function contoh() {
  let angka = 10; // Local scope
  console.log(angka);
}

contoh();
console.log(angka); // Error: angka is not defined

function contoh() {
  let angka = 10; // Local scope
  console.log(angka);
}

contoh();
console.log(angka); // Error: angka is not defined

3. Block Scope (let & const)

Sejak ES6, let dan const punya block scope, berbeda dengan var.

if (true) {
  let x = 5;      // hanya bisa diakses di dalam blok {}
  const y = 10;   // hanya bisa diakses di dalam blok {}
  var z = 15;     // bisa diakses di luar blok
}

console.log(z); // 15
console.log(x); // Error

if (true) {
  let x = 5;      // hanya bisa diakses di dalam blok {}
  const y = 10;   // hanya bisa diakses di dalam blok {}
  var z = 15;     // bisa diakses di luar blok
}

console.log(z); // 15
console.log(x); // Error

Apa Itu Hoisting di JavaScript?

Hoisting adalah mekanisme JavaScript di mana deklarasi variabel dan function “diangkat ke atas” sebelum kode dijalankan.

Contoh sederhana:

console.log(nama); // Output: undefined
var nama = "Andi";

console.log(nama); // Output: undefined
var nama = "Andi";

Kenapa tidak error? Karena var dihoisting ke atas seperti ini:

var nama;
console.log(nama); // undefined
nama = "Andi";

var nama;
console.log(nama); // undefined
nama = "Andi";

Hoisting pada var, let, dan const

Contoh var

console.log(umur); // undefined
var umur = 20;

console.log(umur); // undefined
var umur = 20;

Contoh let

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

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

Contoh const

console.log(pi); // Error
const pi = 3.14;

console.log(pi); // Error
const pi = 3.14;

Function Hoisting

Function declaration juga mengalami hoisting, sehingga bisa dipanggil sebelum deklarasi.

salam(); // Halo dunia!

function salam() {
  console.log("Halo dunia!");
}

salam(); // Halo dunia!

function salam() {
  console.log("Halo dunia!");
}

Tapi function expression & arrow function tidak dihoisting.

salam(); // Error: salam is not a function

var salam = function() {
  console.log("Halo dunia!");
};

salam(); // Error: salam is not a function

var salam = function() {
  console.log("Halo dunia!");
};

Studi Kasus: Scope + Hoisting

Kasus 1 – Variabel Tertimpa (Variable Shadowing)

let nama = "Budi"; // Global

function sapa() {
  let nama = "Andi"; // Local
  console.log("Halo " + nama);
}

sapa();         // Halo Andi
console.log(nama); // Budi

let nama = "Budi"; // Global

function sapa() {
  let nama = "Andi"; // Local
  console.log("Halo " + nama);
}

sapa();         // Halo Andi
console.log(nama); // Budi

Kasus 2 – Perbedaan var vs let

function hitung() {
  if (true) {
    var a = 10;
    let b = 20;
  }
  console.log(a); // 10
  console.log(b); // Error
}

function hitung() {
  if (true) {
    var a = 10;
    let b = 20;
  }
  console.log(a); // 10
  console.log(b); // Error
}

Best Practice Scope & Hoisting

✔ Gunakan let dan const untuk menghindari bug.
✔ Selalu deklarasikan variabel sebelum dipakai.
✔ Gunakan scope sekecil mungkin agar kode lebih aman.
✔ Hindari penggunaan var pada kode modern.

FAQ

1. Apa bedanya global scope dan block scope?

• Global scope bisa diakses dari mana saja.
• Block scope hanya bisa diakses di dalam blok {} tempat ia dibuat.

2. Kenapa var menghasilkan undefined, sedangkan let error?
Karena var diinisialisasi dengan undefined saat hoisting, sedangkan let masuk ke Temporal Dead Zone.

3. Apakah function selalu dihoisting?

• Function declaration → ya.
• Function expression/arrow function → tidak.

Kesimpulan

• Scope menentukan di mana variabel bisa diakses: global, local, block.
• Hoisting mengangkat deklarasi ke atas, tapi perlakuannya berbeda untuk var, let, const.
• Best practice: gunakan let/const dan deklarasikan variabel sebelum digunakan.

JavaScript #Scope #Hoisting #BelajarCoding