#6 - Mengenal Variabel dalam JavaScript: Panduan Lengkap untuk Pemula

“Kalau data adalah bahan masakan, maka variabel adalah wadahnya.”

Saat kamu mulai belajar JavaScript, salah satu hal pertama yang wajib kamu pahami adalah variabel. Tanpa variabel, JavaScript hanya akan jadi tumpukan instruksi yang gak punya daya ingat.

mengenal variabel pada javascript


Artikel ini akan membahas apa itu variabel, kenapa penting, bagaimana cara membuatnya, jenis-jenis variabel (var, let, const), aturan penulisan, best practice, hingga contoh kasus nyata.


๐Ÿ” Apa Itu Variabel?

Variabel adalah wadah atau tempat untuk menyimpan data. Bayangkan kamu punya kotak yang bisa diberi nama dan diisi sesuatu. Nah, kotak itu adalah variabel.

Kamu punya kotak bernama "uang" dan kamu isi dengan angka 100.
Dalam JavaScript:

let uang = 100;

Fungsi Variabel

  • Menyimpan data (angka, teks, dll)
  • Memberi nama pada data agar mudah diakses
  • Memudahkan manipulasi dan pengolahan data

๐Ÿงฑ Cara Membuat Variabel

Dalam JavaScript modern, kita bisa membuat variabel dengan tiga cara:

var nama = "Mukhlis";   // cara lama
let umur = 25;          // cara modern
const gender = "Pria";  // nilai tetap, tidak bisa diubah

✌️ Mengenal Tiga Kata Kunci: var, let, dan const

1. var – Sang Veteran

var adalah cara lama membuat variabel. Meski masih bisa digunakan, tapi banyak yang sudah beralih ke let dan const.

var bahasa = "JavaScript";

Kekurangan var:

  • Scope-nya fungsi, bukan blok
  • Rentan menyebabkan bug karena bisa dideklarasi ulang
var x = 10;
var x = 20; // Tidak error ๐Ÿ˜ฌ

2. let – Sang Serbaguna

let digunakan untuk membuat variabel yang nilainya bisa diubah.

let saldo = 10000;
saldo = 5000; // Boleh

Keunggulan let:

  • Scope-nya blok
  • Tidak bisa dideklarasi ulang dalam scope yang sama

3. const – Si Tetap Setia

const digunakan untuk membuat variabel yang nilainya tidak bisa diubah.

const pi = 3.14;

Kalau kamu coba ubah nilainya:

pi = 3.1415; // ❌ Error!

Tapi ingat, kalau isi variabelnya adalah object atau array, isinya masih bisa diubah, asal bukan variabelnya.

const data = [1, 2, 3];
data.push(4); // ✅ Boleh
data = [4, 5]; // ❌ Tidak boleh

⚖️ Perbandingan var, let, dan const

Aspek var let const
Scope Function Block Block
Re-declare Bisa Tidak Bisa Tidak Bisa
Re-assign Bisa Bisa Tidak Bisa
Hoisting Yes Yes (TDZ) Yes (TDZ)

๐Ÿง  Apa Itu Scope?

Scope adalah area di mana variabel bisa diakses. JavaScript punya dua jenis utama:

  • Global scope: Bisa diakses dari mana saja
  • Local scope: Hanya bisa diakses dalam blok/fungsi
let nama = "Mukhlis"; // Global

function perkenalan() {
  let umur = 30; // Local
  console.log(nama);  // bisa
  console.log(umur);  // bisa
}

console.log(nama);    // bisa
console.log(umur);    // ❌ error

⚠️ Hoisting: Konsep Aneh Tapi Nyata

JavaScript memindahkan deklarasi variabel ke atas ("mengangkat" = hoisting). Tapi untuk let dan const, dia di-"hoist" tapi masuk ke Temporal Dead Zone (TDZ).

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

console.log(umur); // ❌ Error
let umur = 20;

๐Ÿงน Aturan Penamaan Variabel

✅ Boleh:

  • Huruf, angka, _, dan $
  • Huruf pertama harus huruf atau simbol _ / $

❌ Tidak Boleh:

  • Nama variabel mulai dengan angka
  • Gunakan spasi
  • Gunakan kata kunci JavaScript
let nama_user = "Dewi";    // ✅
let 1user = "Budi";        // ❌
let function = "Test";     // ❌

Gunakan camelCase untuk mempermudah:

let jumlahSiswa = 20;

๐ŸŽฏ Best Practice dalam Menulis Variabel

  • Gunakan let dan const — Hindari var
  • Gunakan const jika tidak perlu mengubah nilai
  • Gunakan nama yang deskriptif
  • Patuhi konsistensi penamaan — misal: camelCase
  • Deklarasi satu per baris

๐Ÿ“ฆ Contoh Kasus Nyata Penggunaan Variabel

๐Ÿ“˜ Kasus 1: Kalkulasi Sederhana

let harga = 10000;
let jumlah = 3;
let total = harga * jumlah;

console.log("Total belanja:", total);

๐Ÿ“˜ Kasus 2: Data Pengguna

const nama = "Sinta";
let umur = 21;

console.log("Nama saya", nama, "dan saya berusia", umur, "tahun.");

๐Ÿ“˜ Kasus 3: Update Nilai

let poin = 50;
poin += 10;
console.log(poin); // 60

๐Ÿงช Latihan Singkat

Pertanyaan:
Apa yang akan terjadi jika kamu menulis:

const nilai = 90;
nilai = 100;

Jawaban: ❌ Error! Karena const tidak bisa diubah nilainya.


๐Ÿ“Œ Kesimpulan

Variabel adalah fondasi dalam belajar JavaScript. Dengan memahami cara membuat, menggunakan, dan menamai variabel dengan baik, kamu sudah selangkah lebih dekat jadi developer yang solid.

Ingat tiga hal penting:

  • Gunakan let jika nilai bisa berubah
  • Gunakan const jika nilai tetap
  • Hindari var kecuali kamu paham betul konsekuensinya

Post a Comment for "#6 - Mengenal Variabel dalam JavaScript: Panduan Lengkap untuk Pemula"