- Konu sahibi
- #1
JavaScript hatası, kodun tarayıcı veya JavaScript çalışma ortamı tarafından beklenen şekilde yorumlanamaması ya da çalıştırılırken bir işlemi tamamlayamamasıdır. Hata oluştuğunda kodun ilgili bölümü durabilir; bu nedenle sayfadaki butonun çalışmaması, verinin ekrana gelmemesi veya uygulamanın beklenmedik davranması gibi sonuçlar görülebilir. Hatanın ayrıntıları genellikle tarayıcının geliştirici araçlarındaki Console sekmesinde görünür.
Bir hata mesajı çoğunlukla hata türünü, açıklamasını ve dosya ile satır konumunu içerir. Örneğin
Kodun yazım kuralları bozuktur. Eksik parantez, kapatılmamış tırnak veya hatalı ifade buna örnektir. Kod çoğunlukla çalışmaya başlamadan önce durur.
Bu örnek, hatayı göstermek için bilerek geçersiz yazılmıştır. Tırnak kapatılmadığı için JavaScript kodu doğru biçimde ayrıştıramaz.
Kod sözdizimi bakımından geçerli olduğu hâlde çalışırken hata verir. Tanımsız bir değişkeni kullanmak
Bu da bilerek hata üreten bir örnektir. Burada
Kod hata mesajı vermeden çalışır; ancak sonuç yanlıştır. Örneğin toplam hesaplanırken çıkarma işlemi kullanılması veya koşulun ters yazılması mantık hatasıdır. Bu tür sorunlarda Console boş olabilir; değişken değerlerini
Aşağıdaki karşılaştırma, Console mesajını yorumlarken hangi yönden ilerlemeniz gerektiğini gösterir.
Kod başarılıysa ad görüntülenir. JSON bozuk olsaydı
Her zaman değil. Hatanın bulunduğu kod akışı durabilir; diğer bağımsız kodlar çalışmaya devam edebilir. Ancak başlangıç kodunda oluşan bir hata, uygulamanın büyük bölümünün başlatılamamasına yol açabilir.
Asenkron işlem, çevresindeki eşzamanlı blok tamamlandıktan sonra reddedilebilir. Bir
Bir hata mesajı çoğunlukla hata türünü, açıklamasını ve dosya ile satır konumunu içerir. Örneğin
ReferenceError: userName is not defined mesajı, userName adlı değişkenin tanımlanmadan kullanılmaya çalışıldığını gösterir. Mesajdaki dosya ve satır bilgisi, incelemeye başlanacak yeri belirtir; her zaman hatanın asıl nedeninin yalnızca o satır olduğu anlamına gelmez.JavaScript hata türleri
Sözdizimi hatası
Kodun yazım kuralları bozuktur. Eksik parantez, kapatılmamış tırnak veya hatalı ifade buna örnektir. Kod çoğunlukla çalışmaya başlamadan önce durur.
Kod:
const message = "Merhaba;
console.log(message);Bu örnek, hatayı göstermek için bilerek geçersiz yazılmıştır. Tırnak kapatılmadığı için JavaScript kodu doğru biçimde ayrıştıramaz.
Çalışma zamanı hatası
Kod sözdizimi bakımından geçerli olduğu hâlde çalışırken hata verir. Tanımsız bir değişkeni kullanmak
ReferenceError, uygun olmayan bir değer üzerinde işlem yapmak TypeError oluşturabilir.
Kod:
const user = null;
console.log(user.name);Bu da bilerek hata üreten bir örnektir. Burada
user değeri null olduğu için name özelliğine erişilemez.Mantık hatası
Kod hata mesajı vermeden çalışır; ancak sonuç yanlıştır. Örneğin toplam hesaplanırken çıkarma işlemi kullanılması veya koşulun ters yazılması mantık hatasıdır. Bu tür sorunlarda Console boş olabilir; değişken değerlerini
console.log() ile kontrol etmek gerekir.Aşağıdaki karşılaştırma, Console mesajını yorumlarken hangi yönden ilerlemeniz gerektiğini gösterir.
| Hata türü | Ne zaman ortaya çıkar? | İlk kontrol |
|---|---|---|
| Sözdizimi | Kod ayrıştırılamadığında | Parantez, tırnak ve virgüller |
| Çalışma zamanı | Kod çalışırken işlem başarısız olduğunda | Hata satırı ve değişken değerleri |
| Mantık | Kod çalışıp yanlış sonuç ürettiğinde | Koşullar, hesaplama ve beklenen sonuç |
Hata nasıl bulunur ve yorumlanır?
- Tarayıcıda geliştirici araçlarını açın ve
Consolesekmesine geçin. Kırmızı hata satırındaki mesajı ve dosya-satır konumunu okuyun. - Mesajdaki hata türünü belirleyin.
SyntaxError,ReferenceErrorveTypeErrorfarklı nedenlere işaret eder. - Hata satırındaki değişkenleri kontrol edin. Değerleri görmek için geçici olarak
console.log(variable)kullanın. - Hatanın önceki satırlarda üretilip üretilmediğini inceleyin. Örneğin boş veya
nullbir değer, sonraki satırda farklı bir hata oluşturabilir. - Düzeltmeden sonra sayfayı yeniden yükleyin ve aynı işlemi tekrar deneyin. Yeni hata oluşursa onu ayrı bir sorun olarak değerlendirin.
try...catch kullanılabilir:
Kod:
try {
const value = JSON.parse('{"name":"Ali"}');
console.log(value.name);
} catch (error) {
console.error(error.name, error.message);
}Kod başarılıysa ad görüntülenir. JSON bozuk olsaydı
catch bloğu çalışır ve hata adı ile açıklamasını Console'a yazardı. Aynı betiğin ayrıştırılmasını engelleyen bozuk tırnak gibi bir sözdizimi hatasını o betiğin içindeki try...catch yakalayamaz; betik çalışmaya başlamaz. Buna karşılık JSON.parse çalışırken bozuk veriden doğan SyntaxError yakalanabilir. try...catch mantık hatalarını otomatik olarak düzeltmez; yalnızca fırlatılan hatayı yakalar. Hatanın nedenini yine kodun ilgili akışında düzeltmek gerekir.Sık yapılan hatalar
- Sadece hata mesajını aratıp kendi dosya ve satır bağlamını incelememek.
- Her Console mesajını JavaScript hatası sanmak; bazı mesajlar uyarı veya geliştirici tarafından yazdırılmış
console.error()çıktısı olabilir. - Hata satırını düzeltip verinin o satıra hangi değerle geldiğini kontrol etmemek.
- Bir hata yakalandığında boş
catchbloğu kullanmak ve asıl problemi gizlemek.
Sık sorulan sorular
JavaScript hatası sayfanın tamamını durdurur mu?
Her zaman değil. Hatanın bulunduğu kod akışı durabilir; diğer bağımsız kodlar çalışmaya devam edebilir. Ancak başlangıç kodunda oluşan bir hata, uygulamanın büyük bölümünün başlatılamamasına yol açabilir.
Bir Promise hatasını normal try...catch neden yakalamaz?
Asenkron işlem, çevresindeki eşzamanlı blok tamamlandıktan sonra reddedilebilir. Bir
async fonksiyonda Promise'i try içinde await etmek veya zincire .catch() eklemek gerekir. Yalnızca işlemi başlatan çağrıyı senkron try içine almak sonraki reddi yakalamaz.