Web Projelerinde Karşılaşılan En Yaygın JavaScript Hataları ve Anlamları
JavaScript, web geliştiricilerin hem en iyi dostu hem de zaman zaman baş belasıdır. Çünkü her şeyin merkezindedir: butonlar, formlar, dinamik içerikler, API çağrıları, hatta hataların ta kendisi... Özellikle yeni başlayanlar için JavaScript hata mesajları anlaşılması güç, çözümü ise daha da karmaşık olabilir.
Bu yazıda, web projelerinde en çok karşılaşılan JavaScript hatalarını, bunların arka planında yatan nedenleri ve çözüm yollarını en basit ve pratik hâliyle anlatmaya çalışacağım. Okuyup bitirdiğinizde, tarayıcı konsolunda çıkan o korkunç kırmızı mesajlar size artık o kadar da ürkütücü gelmeyecek.
1. ReferenceError: x is not defined
Anlamı: JavaScript, 'x' adında bir değişken arıyor ama hiçbir yerde tanımlanmadığını görüyor. Yani JavaScript diyor ki: “Ben bu değişkeni hiç tanımıyorum, kardeşim.”
Nasıl oluşur?
console.log(myVar); // ReferenceError: myVar is not defined
Yukarıdaki satırda myVar hiçbir yerde tanımlanmadığı hâlde kullanılıyor.
Çözüm: Değişkeni kullanmadan önce let, const ya da var ile tanımladığınızdan emin olun.
2. TypeError: Cannot read property 'x' of undefined
Anlamı: JavaScript bir nesnenin içindeki bir özelliğe (property) erişmeye çalışıyor ama o nesne aslında undefined. Yani “olmayan bir şeyin içinden bir şey almaya çalışıyorsun” diyor.
Nasıl oluşur?
let user;
console.log(user.name); // TypeError: Cannot read property 'name' of undefined
Çözüm: Önce o nesne gerçekten tanımlı mı kontrol etmelisiniz:
if (user) {
console.log(user.name);
}
3. TypeError: x is not a function
Anlamı: Bir şeyin fonksiyon olduğunu düşündünüz, ama JavaScript diyor ki: “Bu çağırmaya çalıştığın şey fonksiyon değil.”
Nasıl oluşur?
let greet = "Merhaba!";
greet(); // TypeError: greet is not a function
Çözüm: Bir fonksiyonu çağırmadan önce onun gerçekten bir fonksiyon olduğundan emin olun. Aynı isimde değişken tanımlamak, fonksiyon tanımını ezebilir.
4. SyntaxError: Unexpected token
Anlamı: JavaScript dosyanızda sözdizimi (syntax) hatası var. Genellikle bir karakter eksik, fazla ya da yanlış yerde. Noktalı virgül, süslü parantez, tırnak... küçük şeyler büyük sorunlar.
Nasıl oluşur?
let x = [1, 2, 3;
Çözüm: Editörünüzü kullanarak hatalı satırları kontrol edin. IDE veya linter’lar (ESLint gibi) bu hataları hızlıca yakalar.
5. Uncaught RangeError: Maximum call stack size exceeded
Anlamı: Fonksiyonlar sonsuz döngüde birbirini çağırıyor. Yani JavaScript’in çağrı yığını (call stack) taştı. Tarayıcı çığlık atıyor: “Yeter artık!”
Nasıl oluşur?
function sayHi() {
sayHi();
}
sayHi(); // RangeError: Maximum call stack size exceeded
Çözüm: Sonsuz döngüye giren recursive fonksiyonları dikkatle kontrol edin. Mutlaka çıkış koşulu (base case) olmalı.
6. Uncaught SyntaxError: Unexpected end of input
Anlamı: JavaScript, kod dosyasının sonuna geldi ama bir şeylerin eksik olduğunu düşünüyor. Örneğin bir parantez ya da süslü parantez kapanmamış.
Nasıl oluşur?
function test() {
console.log("hello");
// ama burada parantez kapanmıyor
Çözüm: Tüm açılan parantezlerin ve süslü parantezlerin doğru şekilde kapandığından emin olun.
7. Uncaught TypeError: Assignment to constant variable
Anlamı: const ile tanımladığınız bir değişkenin değerini değiştirmeye çalışıyorsunuz. JavaScript buna izin vermez çünkü const sabittir.
Nasıl oluşur?
const score = 100;
score = 150; // TypeError: Assignment to constant variable
Çözüm: Eğer değişkenin değerini sonradan değiştirmek istiyorsanız let kullanın. const sadece sabit kalacak değerler için kullanılmalıdır.
8. Uncaught TypeError: Failed to fetch
Anlamı: JavaScript ile yapılan bir fetch() çağrısı başarısız oldu. Bunun birçok nedeni olabilir: internet bağlantısı yok, yanlış URL, sunucu kapalı, CORS hatası...
Nasıl oluşur?
fetch("https://api.sahte-site.com/data")
.then(response => response.json())
.then(data => console.log(data));
// TypeError: Failed to fetch
Çözüm:
- URL doğru mu kontrol edin.
- Sunucu çalışıyor mu emin olun.
- Tarayıcı ağ sekmesinde hata detaylarını kontrol edin (CORS olabilir).
try/catch ile hataları yakalayın:
try {
const response = await fetch(url);
} catch (error) {
console.error("Bağlantı hatası:", error);
}
9. Error: 'document is not defined'
Anlamı: JavaScript kodunuz tarayıcıda değil, sunucu tarafında (örneğin Node.js) çalışıyor. Bu yüzden document gibi browser'a özel objelere erişilemiyor.
Nasıl oluşur?
// Node.js ortamında:
console.log(document); // ReferenceError
Çözüm: Kodun gerçekten bir tarayıcıda mı, yoksa sunucu tarafında mı çalıştığını bilin. Tarayıcıya özel objeler sadece frontend'de kullanılabilir.
10. Error: Unexpected identifier
Anlamı: JavaScript beklenmedik bir şeyle karşılaştı. Bu genellikle hatalı yazılmış bir değişken adı, eksik bir virgül veya yanlış bir sözdizimidir.
Nasıl oluşur?
let name = "Ali"
let age = 30 // <-- arada virgül yoksa bu hata oluşabilir bir objede
Çözüm: Hatalı satırları dikkatle inceleyin. Genellikle yazım hatası ya da noktalama işareti eksikliği olur.
11. Error: Script error. (cross-origin hatası)
Anlamı: Farklı bir alan adından (domain) gelen bir JavaScript dosyasında hata oldu ama detayını göremiyorsunuz. Çünkü CORS politikası nedeniyle tarayıcı sizi engelliyor.
Nasıl oluşur?
Çözüm: Harici JavaScript dosyası Access-Control-Allow-Origin başlığını doğru şekilde tanımlamalı. Alternatif olarak kendi sunucunuza alıp kullanabilirsiniz.
12. Error: JSON.parse: unexpected character
Anlamı: JSON verisini parse etmeye çalışıyorsunuz ama geçerli bir JSON değil. Belki çift tırnak yerine tek tırnak kullandınız, belki virgül eksik.
Nasıl oluşur?
JSON.parse("{name: 'Ali'}"); // SyntaxError
Çözüm: Geçerli bir JSON şu şekilde olmalı:
JSON.parse('{"name": "Ali"}');
Unutmayın: JSON içinde sadece çift tırnak geçerlidir. Tek tırnak '' JavaScript için string olabilir ama JSON için değildir.
13. Error: NaN (Not a Number)
Anlamı: JavaScript bir matematiksel işlem yaptı ama sayı beklediği yerde sayı olmayan bir şey buldu. Bu nedenle sonuç “NaN” yani “Number değil” oldu.
Nasıl oluşur?
let age = "on";
let yearsLater = age + 5; // "on5" olur ama matematiksel işlem beklenirse:
let result = parseInt(age) * 2; // NaN
Çözüm: Sayı ile işlem yapmadan önce gerçekten sayı olup olmadığını kontrol edin:
if (!isNaN(Number(age))) {
console.log(Number(age) * 2);
}
14. Error: event is not defined
Anlamı: Bir event nesnesi (örneğin click eventi) kullanmaya çalışıyorsunuz ama onu tanımlamadan önce kullanıyorsunuz.
Nasıl oluşur?
button.onclick = handleClick;
function handleClick() {
console.log(event.target); // ReferenceError: event is not defined
}
Çözüm: Fonksiyona event parametresini açıkça tanımlamalısınız:
function handleClick(event) {
console.log(event.target);
}
15. Error: CORS policy hatası (Access to fetch at '...' from origin '...' has been blocked)
Anlamı: Başka bir domain'e istek atmaya çalıştınız ama sunucu sizi engelledi. Tarayıcı bu isteğe güvenlik nedeniyle izin vermedi.
Nasıl oluşur?
fetch("https://api.diger-site.com/data") // CORS hatası
Çözüm:
- Sunucu tarafı CORS ayarlarını düzeltmeli.
- Geçici çözüm için proxy kullanabilirsiniz (örneğin CORS Anywhere).
- Ama en doğrusu API'nin CORS başlıklarını düzgün yapılandırmasıdır.
16. Error: this is undefined
Anlamı: JavaScript'te this bağlamı fonksiyon türüne göre değişir. Arrow function'da this başka şey ifade eder, normal fonksiyonda başka.
Nasıl oluşur?
const person = {
name: "Ali",
greet: () => {
console.log(this.name); // undefined
}
};
person.greet();
Çözüm: Arrow function yerine klasik fonksiyon kullanın:
greet: function () {
console.log(this.name);
}
17. Error: Cannot set property 'x' of null
Anlamı: DOM'da olmayan bir öğeye erişmeye çalışıyorsunuz. JavaScript o öğeyi null olarak görüyor ama siz hâlâ bir özelliğini değiştirmeye çalışıyorsunuz.
Nasıl oluşur?
document.getElementById("menu").innerHTML = "Yeni Menü";
// ama 'menu' diye bir ID yoksa:
TypeError: Cannot set property 'innerHTML' of null
Çözüm: Önce öğe var mı kontrol edin:
const el = document.getElementById("menu");
if (el) {
el.innerHTML = "Yeni Menü";
}
18. Error: Script loading out of order (functions not found)
Anlamı: JavaScript dosyanız DOM’dan önce yüklenmiş olabilir. Bu durumda bazı elementlere veya fonksiyonlara erişim başarısız olur.
Nasıl oluşur?
Çözüm: Script'i en sona alın veya defer ekleyin:
19. Error: Cannot read properties of null (reading 'value')
Anlamı: Form elemanına erişmeye çalışıyorsunuz ama o eleman henüz DOM'da yok.
Nasıl oluşur?
let input = document.getElementById("ad");
console.log(input.value); // null.value hatası
Çözüm: DOM yüklendikten sonra bu işlemi yapın:
window.onload = function () {
let input = document.getElementById("ad");
console.log(input.value);
};
JavaScript Hatalarını Daha Kolay Takip Etmek İçin İpuçları
Web projeleri geliştirdikçe hatalar kaçınılmazdır ama doğru yaklaşımlarla bu hataların çözümü hem kolay hem de öğretici olabilir. Aşağıda, JavaScript hatalarını yakalayıp çözmenizi kolaylaştıracak bazı önerileri bulabilirsiniz:
- Tarayıcı Konsolu: Hataların ilk ve en net göründüğü yer. Console sekmesini sık sık kontrol edin. Kırmızı uyarılar sizi doğrudan hataya götürür.
- Lint Araçları: ESLint gibi araçlarla kod yazarken hataları anında görebilirsiniz. VS Code gibi editörlerde eklenti olarak kolayca kullanılabilir.
- try...catch Kullanımı: Özellikle
fetch gibi asenkron işlemlerde hatayı yönetmek için try...catch bloğu kullanın.
- console.log() Dostunuzdur: Değişkenlerin ve nesnelerin değerlerini anlamak için bol bol
console.log() kullanın. Ne zaman neye sahip olduğunu görmek sihir gibidir.
- Kodunuzu Parçalara Ayırın: Büyük dosyalar yerine fonksiyonel modüller hâlinde geliştirin. Böylece bir hata nerede olmuş daha kolay tespit edilir.
- Tarayıcıyı Güncel Tutun: Özellikle yeni JavaScript sözdizimleri sadece modern tarayıcılarda çalışabilir. Test ettiğiniz tarayıcılar güncel olmalı.
Gerçek Bir Hata Günlüğü Örneği
Aşağıda gerçek bir web projesinde karşılaşılan hata örneğini ve çözüm sürecini detaylı olarak görebilirsiniz:
// Hata mesajı:
Uncaught TypeError: Cannot read properties of undefined (reading 'username')
at displayUser (app.js:52)
// Kod parçacığı:
function displayUser(user) {
console.log(user.username.toUpperCase());
}
// Hatanın sebebi:
Fonksiyon parametresi olarak undefined geliyor. Çünkü kullanıcı verisi henüz API'den gelmemişti.
// Çözüm:
function displayUser(user) {
if (user && user.username) {
console.log(user.username.toUpperCase());
} else {
console.warn("Kullanıcı bilgisi henüz gelmedi.");
}
}
JavaScript Hatalarından Korkmayın!
Bu yazıyı buraya kadar okuduysanız artık JavaScript hatalarına daha sağlam bir gözle bakabiliyorsunuz demektir. Her hata aslında size kodun nasıl çalıştığını anlatan bir ipucudur. İyi yazılmış hata mesajları JavaScript’in bir lütfudur, yeter ki onları okumayı öğrenin.
Hataların size söylediği şeyleri dinleyin. Her bir hata mesajı, aslında sistemin size sabırla “Şurada ufak bir sıkıntı var, bir bakar mısın?” deyişidir. Bu dili öğrenmek sizi daha iyi bir geliştirici yapar.
Sık Sorulan Sorular (SSS)
Tarayıcı konsolundaki hata mesajları her zaman doğru mudur?
Genellikle evet. Tarayıcılar hatayı nerede gördüyse orayı işaret eder ama asıl problem birkaç satır önce de olabilir. Bu yüzden bağlamı iyi takip etmek gerekir.
Hataları sıfırla düğmesiyle temizlemek yeterli mi?
Console’daki “Clear” butonu sadece mesajları temizler, hatayı ortadan kaldırmaz. Asıl önemli olan, hatayı doğuran satırı düzeltmektir.
Tek satır hata mesajı neden tüm sayfanın çalışmasını bozuyor?
Çünkü JavaScript yorumlayıcısı o satırda durur ve devam edemez. Özellikle try...catch bloğu içinde olmayan hatalar tüm script’in işleyişini durdurabilir.
Sonuç
Web projelerinde JavaScript kullanıyorsanız, hatalar kaçınılmazdır. Ama önemli olan bu hataları tanımak, anlamak ve en önemlisi korkmadan çözmeyi öğrenmektir. Bu yazı size tarayıcı konsolunda çıkan en yaygın JavaScript hatalarının ne anlama geldiğini ve onlara nasıl yaklaşmanız gerektiğini anlattı.
Artık eliniz biraz daha rahat. Unutmayın: Hatalar, bir yazılımcının yol arkadaşıdır. Yeter ki onları tanıyın, isimleriyle hitap edin ve size ne anlatmak istediklerini dinleyin. JavaScript sizi sevecek.