7 Error JavaScript Paling Sering Muncul & Cara Mengatasinya (Lengkap)

JavaScript adalah bahasa pertama bagi banyak programmer Indonesia — tapi pesan error-nya bisa bikin frustrasi, apalagi kalau baru pertama kali muncul di console browser. Kabar baiknya, hampir semua error JavaScript yang ditemui pemula itu-itu saja polanya. Artikel ini merangkum 7 error JavaScript paling sering muncul lengkap dengan arti pesannya, penyebabnya, contoh kode pemicu dan perbaikannya yang sudah terverifikasi, serta cara mencegahnya terulang.

Untuk setiap error, ikuti pola troubleshooting yang sama: baca pesan error → reproduksi → perbaiki → cegah. Semua contoh kode di bawah sudah dijalankan dan diverifikasi menghasilkan pesan error maupun solusi yang ditampilkan.

Pola Umum: Cara Membaca Pesan Error JavaScript

Sebelum masuk ke daftar error, pahami dulu anatomi pesannya. Di console browser (Chrome/Edge/Firefox), error JavaScript hampir selalu diawali kata Uncaught — artinya error-nya tidak ditangkap oleh try...catch — lalu diikuti tipe error dan pesannya. Tipe-tipe yang paling sering kamu temui:

TypeError berarti kamu melakukan operasi pada nilai yang tipenya tidak cocok (misal memanggil sesuatu yang bukan fungsi). ReferenceError berarti kamu merujuk variabel yang tidak ada atau belum dideklarasikan. SyntaxError berarti kodemu tidak bisa dibaca sama sekali oleh JavaScript — biasanya



salah ketik tanda kurung atau kurawal. RangeError berarti sebuah nilai keluar dari batas yang diizinkan, paling sering karena rekursi tak berujung.

Console browser adalah sahabat terbaikmu: buka DevTools (F12 → tab Console), dan di samping setiap error ada nama file dan nomor baris — klik untuk langsung melompat ke baris penyebabnya. Satu kebiasaan yang menyelamatkan banyak pemula: jangan menebak-nebak, selalu baca pesan error kata per kata — JavaScript biasanya sudah memberitahu persis apa yang salah dan di properti/variabel apa.

1. TypeError: Cannot read properties of undefined

Pesan error yang muncul:

Uncaught TypeError: Cannot read properties of undefined (reading 'name')

Kode pemicu:

const user = undefined;
console.log(user.name); // error di sini

Artinya: kamu mencoba membaca properti (name) dari nilai undefined. Ini error JavaScript paling terkenal sedunia — biasanya terjadi karena data yang kamu kira ada ternyata belum terisi: respons API yang belum datang, hasil fungsi yang mengembalikan undefined, atau salah nama variabel.

Cara memperbaiki: cara modern dan paling aman adalah optional chaining (?.) yang diperkenalkan di ES2020:

// Aman: tidak error walau user undefined
console.log(user?.name); // undefined, bukan error

// Dengan nilai default via nullish coalescing
console.log(user?.name ?? "Nama belum diisi");

Alternatif klasik — cek dulu sebelum dipakai:

if (user) {
  console.log(user.name);
}

Pencegahan: biasakan memakai ?. setiap mengakses data yang datang dari luar (API, input user, hasil query). Kalau datanya seharusnya selalu ada, tambahkan validasi di awal fungsi supaya masalahnya ketahuan di sumbernya.

2. ReferenceError: x is not defined

Pesan error yang muncul:

Uncaught ReferenceError: myVar is not defined

Kode pemicu:

console.log(myVar); // myVar tidak pernah dideklarasikan

Artinya: kamu memakai variabel yang tidak dikenal JavaScript — belum dideklarasikan dengan let/const/var, salah ketik nama, atau variabelnya dideklarasikan di scope lain yang tidak bisa diakses dari baris ini.

Cara memperbaiki: cek tiga hal berurutan — (1) apakah namanya salah ketik, (2) apakah sudah dideklarasikan, (3) apakah bisa diakses dari scope ini:

// 1 & 2: deklarasikan dulu
const myVar = "halo";
console.log(myVar);

// 3: masalah scope — variabel di dalam fungsi
//    tidak bisa dipakai di luarnya
function hitung() {
  const hasil = 10;
}
console.log(hasil); // ReferenceError
// Perbaikan: kembalikan nilainya
function hitungBenar() {
  const hasil = 10;
  return hasil;
}
console.log(hitungBenar()); // 10

Pencegahan: selalu deklarasikan variabel dengan const (atau let bila memang berubah) — jangan pernah memakai variabel tanpa deklarasi.

3. SyntaxError: Unexpected token

Pesan error yang muncul:

Uncaught SyntaxError: Unexpected token '}'

Kode pemicu:

const a = }; // kurawal tutup tanpa pasangan

Artinya: JavaScript bahkan tidak bisa memahami kodemu — ada yang salah secara tata bahasa: kurung/kurawal tidak berpasangan, koma tertinggal, atau tanda kutip tidak ditutup. SyntaxError muncul sebelum satu baris pun dijalankan — seluruh script mogok total.

Cara memperbaiki: lihat token yang disebut di pesan error, lalu periksa baris di sekitarnya — penyebab aslinya sering satu-dua baris sebelum baris yang dilaporkan:

// Salah: kurung tutup fungsi kurang satu
function sapa(nama) {
  console.log("Halo " + nama);
 // lupa } di sini

// Benar:
function sapa(nama) {
  console.log("Halo " + nama);
}

Pencegahan: pakai editor dengan bracket matching dan format-on-save seperti Prettier.

4. TypeError: x is not a function

Pesan error yang muncul:

Uncaught TypeError: foo is not a function

Kode pemicu:

const foo = 42;
foo(); // foo adalah angka, bukan fungsi

Artinya: kamu memanggil sesuatu dengan tanda kurung () padahal nilainya bukan fungsi. Penyebab klasik: variabel yang tadinya berisi fungsi tertimpa nilai lain, atau salah nama.

Cara memperbaiki: pastikan yang dipanggil benar-benar fungsi dengan cek typeof:

const mungkinFungsi = 42;

if (typeof mungkinFungsi === "function") {
  mungkinFungsi();
} else {
  console.log("bukan fungsi, nilainya:", mungkinFungsi);
}

Kasus umum di dunia nyata — memanggil method pada objek yang ternyata bukan objek yang kamu kira:

// Misal data.user ternyata undefined karena API berubah
data.user.getName(); // TypeError
// Perbaikan: gabungkan dengan optional chaining dari error no. 1
data.user?.getName?.(); // aman

5. RangeError: Maximum call stack size exceeded

Pesan error yang muncul:

Uncaught RangeError: Maximum call stack size exceeded

Kode pemicu:

function rekursi() {
  return rekursi(); // memanggil diri sendiri tanpa henti
}
rekursi();

Artinya: sebuah fungsi memanggil dirinya sendiri (rekursi) tanpa kondisi berhenti, sehingga tumpukan pemanggilan penuh dan JavaScript menyerah.

Cara memperbaiki: setiap rekursi wajib punya base case:

// rekursi yang benar: berhenti saat n <= 1
function faktorial(n) {
  if (n <= 1) return 1; // base case
  return n * faktorial(n - 1);
}
console.log(faktorial(5)); // 120

6. TypeError: Cannot set properties of null (script jalan sebelum DOM siap)

Pesan error yang muncul:

Uncaught TypeError: Cannot set properties of null (setting 'textContent')

Kode pemicu:

// di head atau sebelum elemennya ada di HTML
const judul = document.getElementById("judul");
judul.textContent = "Halo!"; // judul = null

Artinya: getElementById mengembalikan null karena elemen yang dicari belum ada saat script dijalankan. Browser membaca HTML dari atas ke bawah — kalau tag script-mu ada di head atau di atas elemennya, kodemu jalan duluan.

Cara memperbaiki — tiga solusi resmi, pilih satu:

// Solusi 1 (paling mudah): taruh script di akhir body
// Solusi 2: tunggu DOM siap dulu
document.addEventListener("DOMContentLoaded", () => {
  const judul = document.getElementById("judul");
  judul.textContent = "Halo!"; // elemen sudah ada
});

<!-- Solusi 3: atribut defer - dieksekusi setelah HTML selesai diparsing -->
<script src="app.js" defer></script>

7. Access to fetch blocked by CORS policy

Pesan error yang muncul:

Access to fetch at 'https://api.contoh.com/data' from origin 'http://localhost:3000' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.

Kode pemicu:

fetch("https://api.contoh.com/data")
  .then(res => res.json())
  .then(console.log);
// fetch-nya "gagal" - padahal API-nya hidup dan kodemu benar

Artinya: ini bukan bug di kodemu — ini fitur keamanan browser bernama CORS. Halaman web hanya boleh memanggil API di origin yang sama. Kalau frontend-mu di http://localhost:3000 memanggil API di https://api.contoh.com, browser memblokir responsnya kecuali server API secara eksplisit mengizinkan.

Cara memperbaiki yang BENAR — di sisi server:

// Contoh: server Node.js + Express
const cors = require("cors");
app.use(cors({
  origin: "http://localhost:3000" // hanya origin ini yang diizinkan
}));

# Contoh: server Python + FastAPI
from fastapi.middleware.cors import CORSMiddleware
app.add_middleware(
    CORSMiddleware,
    allow_origins=["http://localhost:3000"],
    allow_methods=["*"],
    allow_headers=["*"],
)

Untuk development, alternatif yang sah adalah proxy: minta frontend memanggil /api/data (origin sama), lalu dev-server meneruskannya ke API asli.

⚠️ Peringatan: jangan memakai ekstensi browser atau flag --disable-web-security sebagai solusi — itu hanya untuk debug lokal. Kalau API-nya bukan milikmu dan tidak mengirim header CORS, hubungi pemilik API atau gunakan backend perantara milikmu sendiri.

Tabel Ringkas: Gejala → Langkah Pertama

Gejala	Langkah pertama
Cannot read properties of undefined	Pakai ?. / ??, cek sumber datanya
x is not defined	Cek typo, deklarasi, dan scope variabel
Unexpected token	Cek kurung/kurawal berpasangan di sekitar baris error
x is not a function	Cek typeof — apa benar isinya fungsi?
Maximum call stack size exceeded	Cari rekursi/panggilan siklik tanpa kondisi berhenti
Cannot set properties of null	Pastikan script jalan setelah DOM siap (defer)
blocked by CORS policy	Perbaiki di server: header Access-Control-Allow-Origin

Kesimpulan

Tujuh error di atas mencakup sebagian besar masalah JavaScript yang ditemui pemula sehari-hari. Kuncinya: baca pesan error kata per kata, manfaatkan console DevTools untuk melompat ke baris penyebabnya, dan perbaiki di sumber masalahnya — bukan gejalanya.

Kalau kamu baru belajar JavaScript, simpan tabel ringkas di atas sebagai contekan. Dan ingat dua aturan emasnya: jangan pernah mengakses data tanpa memastikan ia ada (?. adalah temanmu), dan jangan pernah mematikan keamanan browser untuk mengakali CORS — perbaiki di server.