JavaScript, modern web geliştirmede önemli bir yer tutuyor. Ancak, her dilde olduğu gibi, JavaScript ile de geliştiricilerin sıkça karşılaştığı bazı hatalar var. Bu hatalar bazen en deneyimli geliştiricileri bile zor durumda bırakabiliyor. Bugün, JavaScript dünyasında sıkça rastlanan 10 hatayı ve bu hataların pratik çözümlerini sizlerle paylaşacağım.
### 1. undefined ve null Arasındaki Farkı Anlamamak
JavaScript’te `undefined` ve `null` arasında bir fark olduğunu öğrenmek, hatalardan kaçınmanın ilk adımıdır. Bir değişkenin değeri atanmamışsa, `undefined` ile karşılaşırsınız. Ancak, bir değişken açıkça `null` olarak atanmışsa, bu değişkenin değeri yok demektir.
Çözüm: Değişkenlerinizi kontrol ederken, `undefined` ve `null` değerlerini doğru şekilde ayrıştırarak hataları önleyebilirsiniz.
if (myVar === null) {
console.log("Değer null");
} else if (myVar === undefined) {
console.log("Değer undefined");
}
### 2. Global Değişkenlerin Kullanımı
Birçok geliştirici, global değişkenler kullanarak işlerini hızlıca halletmeye çalışır. Ancak bu, ileride pek çok hata yaratabilir. Global değişkenlerin çakışması, kodunuzu karmaşık hale getirebilir ve bakımını zorlaştırabilir.
Çözüm: Her zaman yerel değişkenler kullanmaya özen gösterin ve fonksiyonlarınızı olabildiğince kapsüllü tutun.
function example() {
let myVar = "Local Variable";
console.log(myVar);
}
### 3. Fonksiyonlarda Parametreyi Yanlış Kullanmak
JavaScript'te fonksiyon parametrelerini yanlış kullanmak çok yaygın bir hatadır. Bir fonksiyona birden fazla parametre gönderdiğinizde, parametrelerin sırasına dikkat etmezseniz yanlış sonuçlar elde edebilirsiniz.
Çözüm: Parametrelerinizi doğru sırayla ve doğru türde gönderdiğinizden emin olun.
function calculate(a, b) {
return a + b;
}
console.log(calculate(5, 10)); // 15
### 4. Döngülerde Yanlış Kapsama Alanı (Scope)
Döngülerde değişkenlerin kapsama alanı, bazen kafa karıştırıcı olabilir. Özellikle `let` ve `var` arasındaki farklar yeni başlayanlar için problem olabilir. `var` ile tanımlanan değişkenler fonksiyon scope'unda çalışırken, `let` sadece bloğun içinde geçerlidir.
Çözüm: Her zaman `let` kullanarak daha kontrollü bir kapsama alanı elde edebilirsiniz.
for (let i = 0; i < 5; i++) {
console.log(i);
}
// 'i' sadece bu döngü içinde geçerlidir.
### 5. Asenkron Kodların Yönetilmesi
Asenkron programlama, JavaScript’in gücünü oluşturan önemli özelliklerden biridir. Ancak, `callback` fonksiyonları, `Promise` ve `async/await` kullanırken, sıklıkla hatalar yapılabilir.
Çözüm: Asenkron kodlarınızı iyi yönetmek için `Promise` ve `async/await` kullanmayı tercih edin ve `try-catch` blokları ile hata kontrolü yapın.
async function fetchData() {
try {
let response = await fetch('https://jsonplaceholder.typicode.com/posts');
let data = await response.json();
console.log(data);
} catch (error) {
console.error('Hata:', error);
}
}
### 6. NaN (Not a Number) Hatası
JavaScript'te bir sayı işlemi hatalı yapıldığında, `NaN` (Not a Number) değeri dönebilir. Bu, birçok geliştiricinin sıkça karşılaştığı bir hatadır.
Çözüm: `isNaN()` fonksiyonu ile `NaN` değerini kontrol edebilir ve hatalarınızı önleyebilirsiniz.
let result = "a" * 2; // NaN döner
if (isNaN(result)) {
console.log("Geçersiz sayı!");
}
### 7. Fazla Zaman Alacak İşlemleri Ana Thread’e Yüklemek
JavaScript, tek iş parçacıklı bir dil olduğundan, uzun süren işlemler ana iş parçacığınızı meşgul edebilir ve sayfa donmasına neden olabilir.
Çözüm: Uzun süren işlemleri `Web Workers` ile arka planda çalıştırabilirsiniz.
const worker = new Worker('worker.js');
worker.postMessage("Veri gönder");
worker.onmessage = function(e) {
console.log("Yanıt:", e.data);
};
### 8. Kapsama Alanında (Scope) Hatalar
Değişkenlerin doğru kapsama alanına yerleştirilmemesi, JavaScript’te sık karşılaşılan bir hatadır. Özellikle `var` kullanıldığında, değişkenin kapsamı istenilen yerin dışına çıkabilir.
Çözüm: `let` veya `const` kullanarak, değişkenlerin yalnızca ihtiyaç duyulan yerde kullanılmasını sağlayın.
function testScope() {
let localVar = "Bu değişken sadece bu fonksiyonda geçerlidir";
console.log(localVar); // Çalışır
}
testScope();
// console.log(localVar); // Hata! localVar dışarıda geçerli değil.
### 9. Dizi Erişiminde Hatalar
Dizi indekslemeyi unutmak veya yanlış indeksi kullanmak da JavaScript’te sıkça karşılaşılan hatalar arasında yer alır.
Çözüm: Dizilerin sıfırdan başladığını unutmayın ve daima geçerli bir indeks kullandığınızdan emin olun.
let fruits = ["Elma", "Muz", "Kiraz"];
console.log(fruits[0]); // "Elma"
### 10. Yanlış Tür Dönüşümleri (Type Coercion)
JavaScript’te tür dönüşümleri bazen beklenmeyen sonuçlara yol açabilir. Özellikle operatörler kullanıldığında, türler arasında dönüşüm yapılır ve bu da hatalar yaratabilir.
Çözüm: Tür dönüşümlerine dikkat edin ve `===` yerine `==` kullanmaktan kaçının.
console.log(5 == "5"); // true, çünkü JavaScript tür dönüşümü yapar
console.log(5 === "5"); // false, türler farklı olduğu için
