Frontend Academy · Pelajaran

Variabel: let, const, var, dan Cakupan

Deklarasikan variabel dengan let, const, dan var. Pahami cakupan blok, cakupan fungsi, serta alasan const lebih disarankan untuk sebagian besar nilai.

Variabel: let, const, var, dan Cakupan adalah pelajaran Frontend Academy gratis di CoddyKit. Ini adalah pelajaran 1 dari 4. Kamu bisa membaca pelajaran lengkapnya di bawah secara gratis — lalu praktikkan langsung di browser dengan editor kode bawaan dan tutor AI 24/7. Ini adalah bagian dari jalur belajar Frontend Academy, dan progresmu tersinkronisasi di web dan aplikasi CoddyKit. Kursus Frontend Academy mencakup 4 pelajaran total.

Mengapa Variabel?

Variabel menyimpan nilai agar Anda dapat menggunakannya kembali, memperbaruinya, dan memberinya nama yang bermakna. JavaScript memiliki tiga cara untuk mendeklarasikan variabel: var (lama), let (modern, dapat ditetapkan ulang), dan const (modern, pengikatan konstan).

const — Pilihan Bawaan

Deklarasikan dengan const ketika Anda tidak akan menetapkan ulang variabel tersebut. Ini menyatakan maksud Anda dan mencegah penetapan ulang yang tidak disengaja. Catatan: const mencegah pengikatan ulang, tetapi tidak membuat objek atau larik tidak dapat diubah.

const name = 'Alice';        // can't reassign
const PI = 3.14159;

const user = { age: 25 };    // object is mutable
user.age = 26;               // OK — property change, not rebinding
// user = {};               // Error — can't reassign const

let — Saat Anda Perlu Menetapkan Ulang

Gunakan let ketika nilainya akan berubah: penghitung perulangan, jumlah yang diakumulasikan, atau variabel status. let memiliki cakupan blok — variabel ini hanya ada di dalam { } terdekat yang membungkusnya.

let score = 0;
score = score + 10;  // OK

for (let i = 0; i < 3; i++) {
  console.log(i);     // 0, 1, 2
}
// console.log(i);   // ReferenceError — i is out of scope

var — Deklarasi Warisan

var memiliki cakupan fungsi (bukan cakupan blok) dan diangkat ke bagian atas fungsinya. Hal ini menyebabkan galat yang sulit terlihat. Hindari var dalam JavaScript modern; utamakan const dan let.

function example() {
  if (true) {
    var x = 5;   // function-scoped, not block-scoped
  }
  console.log(x); // 5 — still accessible here!
}

Cakupan: Tempat Variabel Berada

Cakupan global: dideklarasikan di luar fungsi atau blok apa pun dan dapat diakses di mana saja. Cakupan fungsi: dideklarasikan di dalam fungsi dan hanya dapat diakses di dalam fungsi tersebut. Cakupan blok: let/const di dalam { }, hanya dapat diakses di dalam blok tersebut.

Pengangkatan Deklarasi

Pengangkatan deklarasi memindahkan deklarasi ke bagian atas cakupannya saat waktu kompilasi. Deklarasi var diangkat dan diinisialisasi dengan undefined. let dan const diangkat tetapi tidak diinisialisasi — mengaksesnya sebelum deklarasi menyebabkan galat Zona Mati Temporal.

Menamai Variabel

Gunakan nama yang deskriptif. Gunakan camelCase untuk variabel dan fungsi (userName), UPPER_SNAKE_CASE untuk konstanta (MAX_RETRIES), dan PascalCase untuk kelas (UserProfile). Hindari satu huruf, kecuali dalam perulangan (i, j).

Mendeklarasikan Beberapa Variabel

Anda dapat mendeklarasikan beberapa variabel dalam satu pernyataan, tetapi biasanya lebih jelas jika menggunakan satu deklarasi untuk setiap variabel. Hindari bentuk dengan koma karena dapat menyamarkan cakupan dan tipe.

// Less clear:
let a = 1, b = 2, c = 3;

// Preferred:
const MAX = 10;
let count = 0;
const label = 'Score';

Zona Mati Temporal (TDZ)

Mengakses variabel let atau const sebelum deklarasinya dalam kode akan memunculkan ReferenceError. Zona antara awal blok dan deklarasi ini disebut TDZ.

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

const dengan Larik dan Objek

const mencegah penetapan ulang variabel, tetapi nilai yang dirujuk masih dapat diubah. Gunakan Object.freeze() untuk objek tidak dapat diubah dangkal atau pola tidak dapat diubah untuk ketidakdapatubahan mendalam.

const items = [1, 2, 3];
items.push(4);       // OK — mutates the array
items = [];          // Error — can't reassign const

const config = Object.freeze({ maxAge: 30 });
config.maxAge = 99;  // Silently fails in non-strict mode

Mengapa Memilih const daripada let?

Menjadikan const sebagai pilihan bawaan membuat kode lebih mudah dipahami: Anda tahu variabel tersebut tidak akan ditetapkan ulang di tempat lain. Ubah ke let hanya ketika Anda benar-benar perlu melakukan penetapan ulang. Kebiasaan ini mengurangi galat dan meningkatkan keterbacaan.

Pemeriksaan Singkat

Apa perbedaan utama antara let dan var?

Ringkasan: Variabel dan Cakupan

Utamakan const untuk nilai yang tidak akan ditetapkan ulang. Gunakan let untuk nilai yang dapat diubah. Hindari var. Cakupan blok (let/const) menjaga variabel tetap berada di dalam batasnya. Pengangkatan deklarasi: var diinisialisasi menjadi undefined, sedangkan let/const memunculkan galat TDZ jika diakses terlalu awal.

Pertanyaan yang Sering Diajukan

Apakah pelajaran “Variabel: let, const, var, dan Cakupan” gratis?

Ya — teks lengkap “Variabel: let, const, var, dan Cakupan” gratis dibaca di sini di web. Untuk praktiknya secara interaktif (editor kode bawaan dan tutor AI 24/7) dan buka sisa kursus Frontend Academy, upgrade ke CoddyKit PRO. Kursus Frontend Academy mencakup 4 pelajaran total.

Apa yang akan aku pelajari di “Variabel: let, const, var, dan Cakupan”?

Deklarasikan variabel dengan let, const, dan var. Pahami cakupan blok, cakupan fungsi, serta alasan const lebih disarankan untuk sebagian besar nilai. Kamu berlatih Frontend Academy dengan kode praktik yang langsung kamu jalankan di browser, dan tutor AI 24/7 menjawab pertanyaanmu saat kamu mengerjakan pelajaran ini.

Apakah aku perlu pengalaman untuk memulai Frontend Academy?

Tidak diperlukan pengalaman sebelumnya. Frontend Academy di CoddyKit dirancang untuk pemula hingga pelajar tingkat lanjut, jadi kamu bisa memulai di sini atau dari awal dan belajar sesuai kecepatan kamu sendiri. Ini adalah pelajaran 1 dari 4.

Berapa lama pelajaran “Variabel: let, const, var, dan Cakupan” memakan waktu?

Sebagian besar pelajaran CoddyKit memakan waktu sekitar 5–10 menit. Setiap pelajaran ringkas dan interaktif, jadi kamu membuat kemajuan stabil dan melanjutkan dari tempat kamu tinggalkan di web dan aplikasi.

Bisakah aku menulis dan menjalankan kode dalam pelajaran Frontend Academy ini?

Ya. Setiap pelajaran Frontend Academy menyertakan editor kode bawaan, jadi kamu menulis dan menjalankan kode nyata langsung di browser dan mendapatkan umpan balik AI instan — tidak diperlukan penyiapan lokal.

Semua pelajaran dalam kursus ini

Variabel: let, const, var, dan Cakupan
Tipe Data: string, number, boolean, null, undefined
Fungsi: Deklarasi, Ekspresi, Fungsi Panah
Alur Kontrol: if, else, switch, for, while

← Kembali ke Frontend Academy