BAB 3 — Variabel dalam JavaScript: Pondasi Logika dan Pengelolaan Data

BAB 3 — Variabel dalam JavaScript: Pondasi Logika dan Pengelolaan Data

Variabel adalah konsep fundamental dalam JavaScript. Semua data—angka, teks, objek, fungsi—akan disimpan di dalam variabel.

Meskipun terlihat sederhana, memahami cara kerja variabel secara benar sangat penting, terutama karena JavaScript memiliki mekanisme unik seperti scoping rules, hoisting, dan perilaku berbeda antara var, let, dan const.

Bab ini akan membahas seluruh dasar variabel dengan cara yang jelas, komprehensif, dan sesuai praktik modern.

1. var, let, dan const: Evolusi Cara Mendeklarasikan Variabel

A. var — Cara Lama (Pra-ES6)

var adalah keyword asli untuk membuat variabel sebelum tahun 2015.

var name = "Brendan";

Ciri-ciri var:

  • Scope-nya function scope
  • Mendukung hoisting (variabel naik ke atas)
  • Dapat dideklarasikan kembali (re-declare)
  • Mudah memunculkan bug karena perilakunya tidak intuitif

Contoh re-declare:

var x = 10;
var x = 20; // diperbolehkan

B. let — Variabel Modern (ES6+)

let age = 25;

Ciri-ciri let:

  • Scope-nya block scope
  • Tidak bisa deklarasi ulang
  • Nilainya bisa diubah (mutable)
  • Lebih aman dibanding var
let count = 1;
count = 2; // valid
let count = 3; // error (cannot re-declare)

C. const — Konstanta yang Tidak Bisa Diubah

const PI = 3.14;

Ciri-ciri const:

  • block scope seperti let
  • tidak bisa di-reassign
  • tidak bisa di-redeclare
  • hanya nilai primitif yang benar-benar tidak bisa diubah

Perhatikan bahwa untuk objek & array, isi di dalamnya masih bisa berubah:

const person = { name: "Ann" };
person.name = "Eve"; // valid

Yang tidak boleh adalah:

person = {}; // error

2. Scope Dasar: Menentukan “Jangkauan” Variabel

Scope menentukan di bagian mana variabel dapat diakses.

A. Global Scope

Variabel tersedia di seluruh program.

var globalVar = 10;
let globalLet = 20;

B. Function Scope

Hanya bisa diakses dari dalam fungsi.

function test() {
  var x = 5;
  console.log(x); // bisa
}
console.log(x); // error

var menggunakan function scope, bukan block scope.

C. Block Scope

Diperkenalkan oleh let dan const.

{
  let a = 1;
  const b = 2;
}
console.log(a); // error
console.log(b); // error

Block bisa berupa {}, loop, atau kondisi if.

if (true) {
  let z = 100;
}
console.log(z); // error

3. Hoisting Dasar: Variabel “Naik” ke Atas?

Hoisting adalah proses di mana deklarasi variabel dan fungsi “dipromosikan” ke bagian atas scope sebelum kode dijalankan.

Hoisting pada var

console.log(x); // undefined
var x = 10;

JavaScript memperlakukan kode itu seolah-olah:

var x;
console.log(x);
x = 10;

Hoisting pada let dan const

let dan const juga di-hoist, tetapi berada dalam kondisi yang disebut:

Temporal Dead Zone (TDZ)

(periode dari awal blok hingga deklarasi, di mana variabel tidak bisa diakses)

console.log(a); // error: cannot access 'a' before initialization
let a = 5;

let dan const lebih aman karena mencegah penggunaan variabel sebelum deklarasi.

4. Best Practice Modern: Cara Penulisan Variabel yang Benar

Berikut aturan praktik modern yang digunakan oleh hampir semua developer profesional:

A. Hindari var

var memiliki terlalu banyak perilaku tidak intuitif, dan jarang dibutuhkan.

B. Gunakan const sebagai default

Gunakan const untuk semua nilai yang tidak berubah.

Contoh:

const MAX_USERS = 100;
const API_URL = "https://api.example.com";

C. Gunakan let hanya jika nilai akan berubah

let counter = 0;
counter++;

D. Penamaan variabel harus deskriptif

Jangan gunakan nama pendek seperti a, b, x1.

Gunakan:

  • camelCase: userName, totalPrice
  • PascalCase untuk class: UserData
  • ALL_CAPS untuk konstanta global: MAX_LIMIT

E. Deklarasi variabel sedekat mungkin dengan penggunaannya

Ini meningkatkan keterbacaan dan mengurangi bug.

F. Hindari penggunaan variabel global

Variabel global mudah menyebabkan konflik dan sulit dilacak.

Related Posts