Mengatasi Error Variable is Not Defined di JavaScript

7 Mei 2026

Pernahkah kamu sedang asyik menulis baris kode yang menurutmu sudah sempurna, lalu saat dijalankan di browser, tiba-tiba konsol merah menyala dengan tulisan Uncaught ReferenceError: x is not defined? Rasanya pasti campur aduk antara bingung dan kesal, apalagi kalau kamu merasa sudah mendeklarasikan variabel tersebut dengan benar.

Masalah not defined adalah salah satu rintangan paling umum yang dihadapi oleh developer, baik pemula maupun yang sudah berpengalaman. Namun, jangan salah sangka; error ini sebenarnya adalah cara JavaScript menyelamatkan aplikasi kamu dari perilaku yang tidak terduga. Artikel ini akan menjelaskan secara mendalam mengapa variabel kamu bisa hilang dari radar JavaScript dan bagaimana cara mengatasinya.

1. Memahami Perbedaan Antara Undefined dan Not Defined

Sebelum masuk ke akar masalah, kita harus meluruskan terminologi. Banyak orang menganggap keduanya sama, padahal di mata mesin JavaScript (V8 engine), mereka adalah dua dunia yang berbeda.

Undefined: Artinya variabel sudah dideklarasikan (sudah dipesan tempatnya di memori), tetapi belum diberi nilai sama sekali. JavaScript memberikan nilai default berupa undefined.
Not Defined (ReferenceError): Artinya variabel tersebut benar-benar tidak ada di dalam "buku daftar" (Execution Context) yang bisa diakses oleh kode kamu saat itu. Mesin JavaScript mencari ke sana kemari dan tidak menemukannya sama sekali.

Bayangkan sebuah hotel. Undefined itu seperti kamar yang sudah dipesan (atas nama kamu) tapi orangnya belum datang. Sedangkan Not Defined adalah ketika resepsionis mengecek daftar tamu dan nama kamu memang tidak terdaftar di hotel tersebut.

2. Masalah Scope

Penyebab paling sering variabel menjadi not defined adalah masalah Scope (ruang lingkup). Di JavaScript, tidak semua variabel bisa dilihat dari setiap sudut kode. Ada hierarki yang harus dipatuhi.

Global Scope vs Local Scope

Jika kamu mendeklarasikan variabel di dalam sebuah fungsi menggunakan let atau const, variabel itu hanya hidup di dalam kurung kurawal fungsi tersebut.

function sapaUser() {
    let pesan = "Halo, selamat belajar coding!";
    console.log(pesan); // Ini bekerja
}

sapaUser();
console.log(pesan); // Error: pesan is not defined

Pada contoh di atas, variabel pesan berada di dalam Local Scope fungsi sapaUser. Saat kamu mencoba memanggilnya dari luar (Global Scope), JavaScript akan bingung karena bagi dia, pesan tidak pernah lahir di dunia luar.

Block Scope (Let dan Const)

Sejak kehadiran ES6, kita mengenal Block Scope. Variabel yang dideklarasikan dengan let atau const di dalam blok if, for, atau while tidak akan bisa diakses dari luar blok tersebut.

if (true) {
    const rahasia = "Ini kode rahasia";
}
console.log(rahasia); // ReferenceError: rahasia is not defined

Tipsnya: Selalu cek di mana kamu meletakkan deklarasi variabel. Jika kamu butuh variabel itu digunakan di banyak tempat, pastikan variabel tersebut berada di scope yang lebih tinggi atau dioper melalui argumen fungsi.

3. Bahaya Hoisting

Mungkin kamu pernah mendengar istilah Hoisting. Secara teknis, JavaScript menarik deklarasi variabel ke bagian paling atas dari scope-nya sebelum kode dijalankan. Namun, perilakunya berbeda antara var, let, dan const.

Jika kamu menggunakan var, variabel akan di-hoist dan diberi nilai undefined. Tapi jika kamu menggunakan let atau const, mereka juga di-hoist tetapi masuk ke dalam Temporal Dead Zone (TDZ).

console.log(angka); // Output: undefined (karena var di-hoist)
var angka = 10;

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

Meskipun errornya bukan "not defined" secara eksplisit dalam beberapa engine, dalam praktiknya, mencoba menggunakan variabel sebelum baris deklarasinya adalah penyebab utama aplikasi kamu berhenti berfungsi. Biasakan untuk selalu mendeklarasikan variabel di baris paling atas sebelum logika dimulai.

4. Kesalahan Tipografi (Typo)

Jangan tertawa, tapi sekitar 30% error not defined terjadi karena jari kita terpeleset saat mengetik. JavaScript sangat sensitif terhadap huruf besar dan kecil (case-sensitive).

let totalHarga = 50000;

// Salah panggil karena huruf 'h' kecil
console.log(totalharga); // ReferenceError: totalharga is not defined

Kamu mungkin merasa sudah membuat variabel totalHarga, tapi saat dipanggil sebagai totalharga, JavaScript menganggap itu adalah entitas baru yang belum pernah kamu buat. Menggunakan ekstensi seperti ESLint atau fitur Auto-complete di VS Code sangat membantu mengurangi drama akibat typo ini.

5. Variabel yang Bergantung pada Kondisi

Terkadang kita mendeklarasikan variabel hanya jika sebuah kondisi terpenuhi. Jika kondisi tersebut false, maka variabel tersebut tidak akan pernah dibuat.

let statusLogin = false;

if (statusLogin) {
    var userToken = "ABC123";
}

// Jika statusLogin false, dan kita menggunakan 'let' di dalam if, 
// maka memanggil userToken di bawah ini akan memicu error.
console.log(userToken);

Masalah ini sering muncul dalam logika yang kompleks. Solusi terbaik adalah dengan menginisialisasi variabel dengan nilai kosong atau null di luar blok kondisi terlebih dahulu.

6. Urutan Pemuatan Script

Dalam pengembangan web, kita sering membagi kode ke dalam beberapa file JavaScript. Jika kamu mencoba mengakses variabel yang ada di file-b.js dari file-a.js, pastikan file-b.js sudah dimuat terlebih dahulu di file HTML kamu.

<!-- Salah: file-a mencoba akses variabel dari file-b sebelum file-b ada -->
<script src="file-a.js"></script>
<script src="file-b.js"></script>

<!-- Benar -->
<script src="file-b.js"></script>
<script src="file-a.js"></script>

Jika kamu menggunakan modul (ES Modules), masalah ini biasanya tertangani otomatis, tetapi untuk penggunaan script konvensional di platform seperti Blogger atau WordPress custom, urutan ini sangatlah krusial.

7. Asynchronous Code

Dunia modern web sangat bergantung pada proses Asynchronous seperti mengambil data dari API (fetch). Seringkali kita mencoba mencetak variabel yang nilainya baru akan ada setelah permintaan API selesai.

let dataUser;

fetch('https://api.contoh.com/user')
    .then(res => res.json())
    .then(data => {
        dataUser = data;
    });

console.log(dataUser); // Kemungkinan besar undefined atau memicu error di baris setelahnya

Meskipun variabelnya mungkin defined (karena dideklarasikan di atas), namun jika kamu mencoba mengakses properti dari variabel tersebut sebelum datanya datang (misal: dataUser.name), aplikasi kamu akan meledak. Selalu gunakan async/await untuk memastikan data sudah siap sebelum digunakan.

Kesimpulan

Memahami mengapa variabel kamu kadang not defined adalah langkah untuk menjadi developer yang lebih handal. Sebagai rangkuman, berikut adalah checklist yang bisa kamu gunakan saat menghadapi error ini:

Cek Scope: Apakah variabel tersebut berada di dalam fungsi atau blok lain?
Cek Typo: Apakah penulisan huruf besar dan kecilnya sudah konsisten?
Cek Inisialisasi: Sudahkah kamu menggunakan let, const, atau var sebelum memanggilnya?
Cek Urutan Script: Jika menggunakan banyak file, apakah urutannya sudah benar?
Gunakan Strict Mode: Menambahkan 'use strict'; di bagian atas script akan membantumu mendeteksi variabel yang lupa dideklarasikan.

Jangan takut dengan error. Setiap kali kamu melihat pesan "not defined", anggap saja itu adalah teka-teki kecil yang akan membuat pemahamanmu tentang JavaScript semakin tajam. Selamat coding, dan semoga baris kodemu selalu bersih dari error merah

Apakah kamu punya pengalaman unik atau error JavaScript yang paling susah didebug? Bagikan ceritamu di kolom komentar ya!

Aurealisa ID

Fakta Gambar (Science Fact), Kutipan (Quote Of The Day), Ulasan (Science Review), Tips, Artikel.

Ruang Debug