JavaScript'te en sık yapılan 10 hata

[ocalocal]

1. == Yerine === Kullanmayı Unutmak

== karşılaştırma operatörü tür dönüşümü yapar. Bu da beklenmedik sonuçlara neden olabilir.

Örneğin:

Kod: Tümünü seç

console.log(0 == '0');   // true
console.log(0 === '0');  // false

Çözüm: Her zaman katı karşılaştırma yapan === ve !== kullanın.

2. var Kullanmak

var ile tanımlanan değişkenler fonksiyon veya global scope’a aittir. Bu da istenmeyen çakışmalara neden olabilir.
Örnek:

Kod: Tümünü seç

for (var i = 0; i < 5; i++) {}
console.log(i); // 5

Çözüm: Her zaman let veya const kullanın.

Kod: Tümünü seç

for (let i = 0; i < 5; i++) {}
console.log(i); // ReferenceError

3. Asenkron Kod Yapısını Anlamamak

setTimeout, fetch veya async fonksiyonlarıyla çalışırken asenkron yapıyı göz ardı etmek çok yaygın bir hatadır.

Yanlış:

Kod: Tümünü seç

let data;
fetch('api/url')
  .then(response => response.json());
console.log(data); // undefined

Doğru:

Kod: Tümünü seç

async function getData() {
  const response = await fetch('api/url');
  const data = await response.json();
  console.log(data);
}
getData();

4. this Anahtar Sözcüğünü Yanlış Anlamak

this bağlamı fonksiyona bağlıdır ve çağrıldığı yere göre değişir.
Yanlış:

Kod: Tümünü seç

const obj = {
  name: "Test",
  getName: function() {
    setTimeout(function() {
      console.log(this.name); // undefined
    }, 1000);
  }
};
obj.getName();

Doğru:

Kod: Tümünü seç

const obj = {
  name: "Test",
  getName: function() {
    setTimeout(() => {
      console.log(this.name); // "Test"
    }, 1000);
  }
};

5. null ve undefined Arasındaki Farkı Bilmemek

null geliştirici tarafından atanır, undefined ise değer atanmamış bir değişkeni temsil eder.
Kontrol ederken bunu göz önünde bulundurun:

Kod: Tümünü seç

if (variable == null) {
  // hem null hem undefined için çalışır
}

6. Objeleri Kopyalarken Referans Sorunları

Obje ve diziler referans tipindedir. Kopyalama yaparken doğrudan atama yapmak aynı referansı paylaşır.

Yanlış:

Kod: Tümünü seç

let a = { name: "Ali" };
let b = a;
b.name = "Veli";
console.log(a.name); // "Veli"

Doğru:

Kod: Tümünü seç

let a = { name: "Ali" };
let b = { ...a };
b.name = "Veli";
console.log(a.name); // "Ali"

7. Global Scope’u Kirletmek

Tüm değişkenleri globalde tanımlamak isim çakışmalarına yol açar.

Yanlış:

Kod: Tümünü seç

count = 0;

Doğru:

Kod: Tümünü seç

let count = 0;

8. Hataları Yakalamamak (try...catch Eksikliği)

Asenkron işlemlerde hata yönetimini göz ardı etmek yaygın bir hatadır.

Yanlış:

Kod: Tümünü seç

async function fetchData() {
  const res = await fetch('url');
  const data = await res.json();
}

Doğru:

Kod: Tümünü seç

async function fetchData() {
  try {
    const res = await fetch('url');
    const data = await res.json();
  } catch (e) {
    console.error("Veri çekme hatası:", e);
  }
}

9. Dizi Metotlarını Yanlış Kullanmak

forEach bir değer döndürmez, ama genellikle map ile karıştırılır.

Yanlış:

Kod: Tümünü seç

const doubled = [1, 2, 3].forEach(x => x * 2);
console.log(doubled); // undefined

Doğru:

Kod: Tümünü seç

const doubled = [1, 2, 3].map(x => x * 2);
console.log(doubled); // [2, 4, 6]

10. DOM İşlemlerinde Fazla Manipülasyon Yapmak

Tek tek DOM güncellemek performans sorunlarına neden olur.

Yanlış:

Kod: Tümünü seç

for (let i = 0; i < 1000; i++) {
  document.body.innerHTML += "<div>Eleman</div>";
}

Doğru:

Kod: Tümünü seç

let html = "";
for (let i = 0; i < 1000; i++) {
  html += "<div>Eleman</div>";
}
document.body.innerHTML = html;

Aman ha dikkat edin