Di JavaScript modern, ada tiga cara utama untuk mendeklarasikan variabel: menggunakan `var`, `let`, dan `const`. Masing-masing memiliki karakteristik dan perilaku yang berbeda, terutama terkait dengan **scope (cakupan)** dan **hoisting**.
Tips untuk penamaan variable
questionsAsked bentuk camel.
QuestionsAsked bentuk Pascal.
questions_asked bentuk snake.
QUESTIONS_ASKED bentuk screaming snake biasa juga di gunakan pada varibel const.
`var` adalah cara tradisional untuk mendeklarasikan variabel di JavaScript. Meskipun masih berfungsi, penggunaannya kini tidak terlalu disarankan untuk kode baru karena memiliki beberapa kelemahan dibandingkan `let` dan `const`.
Function Scope : Variabel yang dideklarasikan dengan `var` memiliki cakupan fungsi. Artinya, mereka hanya dapat diakses di dalam fungsi tempat mereka dideklarasikan. Jika dideklarasikan di luar fungsi mana pun, mereka menjadi variabel global.
function contohVarScope() {
var pesan = "Halo dari fungsi!";
console.log(pesan); // Output: Halo dari fungsi!
}
contohVarScope();
// console.log(pesan); // ReferenceError: pesan is not defined
Hoisting : Deklarasi `var` di-hoist ke bagian atas cakupan mereka, dan diinisialisasi dengan `undefined`. Ini berarti Anda bisa mengakses variabel `var` sebelum deklarasinya, tetapi nilainya akan `undefined` sampai baris inisialisasi yang sebenarnya dieksekusi.
console.log(mobil); // Output: undefined
var mobil = "Toyota";
console.log(mobil); // Output: Toyota
Dapat Dideklarasikan Ulang dan Diperbarui : Anda bisa mendeklarasikan ulang variabel `var` dengan nama yang sama dalam cakupan yang sama, dan juga mengubah nilainya kapan saja.
var x = 10;
var x = 20; // Deklarasi ulang diperbolehkan
console.log(x); // Output: 20
x = 30; // Perbarui nilai
console.log(x); // Output: 30
Kelemahan `var`:
Karena sifat `function scope` dan `hoisting` yang kadang membingungkan, `var` bisa menyebabkan bug yang sulit dilacak, terutama dalam blok kode seperti loop `for` atau `if` statement.
`let` diperkenalkan di ES6 (ECMAScript 2015) sebagai alternatif yang lebih baik daripada `var`. Ini mengatasi banyak kelemahan `var`.
Block Scope : Variabel yang dideklarasikan dengan `let` memiliki cakupan blok. Artinya, mereka hanya dapat diakses di dalam blok kode (`{}`) tempat mereka dideklarasikan. Ini termasuk `if` statement, `for` loop, `while` loop, atau bahkan blok kosong.
if (true) {
let angka = 100;
console.log(angka); // Output: 100
}
// console.log(angka); // ReferenceError: angka is not defined
Hoisting (dengan Temporal Dead Zone - TDZ) : Deklarasi `let` juga di-hoist, tetapi tidak diinisialisasi dengan `undefined`. Sebaliknya, mereka ditempatkan dalam "Temporal Dead Zone" (TDZ) dari awal cakupan hingga baris di mana mereka dideklarasikan. Mengakses variabel `let` sebelum deklarasinya akan menghasilkan `ReferenceError`. Ini adalah perilaku yang disengaja untuk membantu mencegah bug.
// console.log(kota); // ReferenceError: Cannot access 'kota' before initialization
let kota = "Jakarta";
console.log(kota); // Output: Jakarta
Tidak Dapat Dideklarasikan Ulang, Dapat Diperbarui : Anda tidak bisa mendeklarasikan ulang variabel `let` dengan nama yang sama dalam cakupan yang sama. Namun, Anda bisa mengubah nilainya kapan saja.
let harga = 50;
// let harga = 60; // SyntaxError: Identifier 'harga' has already been declared
console.log(harga); // Output: 50
harga = 75; // Perbarui nilai
console.log(harga); // Output: 75
`const` juga diperkenalkan di ES6 dan digunakan untuk mendeklarasikan konstanta, yaitu nilai yang tidak boleh berubah setelah ditetapkan.
Sintaks :
const NAMA_KONSTANTA = nilaiAwal; // Penting: Harus langsung diinisialisasi
Block Scope : Sama seperti `let`, `const` memiliki cakupan blok.
function hitungLuasLingkaran(radius) {
const PI = 3.14; // Block scope
let luas = PI * radius * radius;
console.log(luas);
}
hitungLuasLingkaran(5);
// console.log(PI); // ReferenceError: PI is not defined
Hoisting (dengan Temporal Dead Zone - TDZ) : Sama seperti `let`, `const` juga di-hoist dan berada dalam TDZ. Mengaksesnya sebelum deklarasi akan menghasilkan `ReferenceError`.
// console.log(MAX_LIMIT); // ReferenceError: Cannot access 'MAX_LIMIT' before initialization
const MAX_LIMIT = 1000;
console.log(MAX_LIMIT); // Output: 1000
Harus Diinisialisasi Saat Deklarasi:** Anda harus memberikan nilai awal kepada `const` saat mendeklarasikannya. Anda tidak bisa mendeklarasikan `const` tanpa nilai awal.
// const MY_CONSTANT; // SyntaxError: Missing initializer in const declaration
const MY_CONSTANT = "nilai";
Tidak Dapat Dideklarasikan Ulang, Tidak Dapat Diperbarui : Ini adalah karakteristik utama `const`. Setelah nilai ditetapkan, Anda tidak bisa mengubahnya atau mendeklarasikan ulang variabel `const` tersebut.
const NAMA = "Alice";
// NAMA = "Bob"; // TypeError: Assignment to constant variable.
// const NAMA = "Charlie"; // SyntaxError: Identifier 'NAMA' has already been declared
Penting untuk Objek/Array:** Perlu diperhatikan bahwa `const` **tidak membuat nilai yang tidak bisa diubah (immutable)** untuk objek atau array. Ini hanya berarti bahwa **referensi** ke objek/array tidak bisa diubah. Anda masih bisa memodifikasi properti objek atau elemen array.
const user = { name: "Budi", age: 30 };
user.age = 31; // Ini diizinkan (memodifikasi properti objek)
console.log(user); // Output: { name: 'Budi', age: 31 }
// user = { name: "Andi" }; // Ini TIDAK diizinkan (mengubah referensi objek)
**Rekomendasi Terbaik untuk Kode Modern:**
Gunakan `const` secara default.** Jika Anda yakin bahwa nilai variabel tidak akan berubah selama masa pakainya, gunakan `const`. Ini meningkatkan keterbacaan kode dan membantu mencegah bug yang tidak disengaja.
Gunakan `let` jika Anda tahu nilainya akan berubah.** Jika variabel Anda memang perlu diubah (misalnya, penghitung dalam loop, nilai yang diperbarui berdasarkan input pengguna), gunakan `let`.
Hindari `var`.** Kecuali jika Anda bekerja dengan kode lama yang tidak bisa diubah, sebisa mungkin hindari penggunaan `var` untuk kode JavaScript baru.
Scope variabel
Hoisting variabel
Sintaks ( penggunaan variabel )