JavaScript Dikkat Edilmesi Gerekenler

Paylaş

JavaScript ile kodlama yaparken dikkat edilmesi gereken kurallar ve doğru kullanımı ile ilgili bilgiler yer alıyor.

JavaScript ile kodlama yaparken global değişkenler, new anahtar kelimesi, karşılaştırma == ve eval kullanımında dikkat edilmesi gereken kurallar vardır.

Global değişen kullanmayın

Global değişken ve fonksiyonlar diğer JavaScript kodları tarafından değiştirilebilir ve kodların yanlış çalışmasına neden olabilir.

Global değişkenlerin kullanımını en aza indirin.

Bir fonksiyon içerisinde kullanılan değişkenler daima yerel değişken olarak bildirilmelidir.

Yerel değişken bildirimi için var anahtar kelimesinin kullanılması gerekir aksi takdirde değişken global değişken olacaktır.

Değişkenleri en başta oluşturun

Değişkenleri komut veya fonksiyonun en başında oluşturun.

Yazılan kodlar daha okunabilir olacak ve kod karmaşıklığını en aza indirecektir.

// Değişkenler oluşturuldu
var adi, soyAdi, fiyat, indirim, urunFiyat;

// Değişkenler tanımlandı
adi = "Yusuf";
soyAdi = "SEZER";

fiyat = 9.90;
indirim = 0.25;

urunFiyat = fiyat * 10 / indirim;

Bu kural döngü değişkenlerinde de geçerlidir.

// Değişkenler oluşturuldu
var i;

// Değişkenler tanımlandı ve kullanılıyor
for (i = 0; i < 9; i++) { }

JavaScript varsayılan olarak tüm değişkenleri üste taşır (hoisting).

Değişken tanımlama

Değişkenleri oluşturduktan sonra varsayılan değer tanımlayın.

Değişkenler daha güvenilir ve tanımsız olmayacaktır.

// Değişkenler oluşturuldu ve tanımlandı
var adi = "", soyAdi = "", fiyat = 0, indirim = 0, urunFiyat = 0;

Değişkenleri oluşturduktan sonra tanımlamak değişken türü ve amacı ile ilgili bilgi verir.

Number, String ve Boolean veri türünü nesne olarak tanımlamayın

Sayı, metin ve mantık veri türlerini daima temel veri türü olarak tanımlayın ve kullanın.

Sayı, metin ve mantık veri türlerini nesne olarak kullanmak kod yavaşlığına ve diğer yan etkilere neden olur.

<script>
  var a = "Yusuf";
  var b = new String("Yusuf");
  alert(a === b);  // false; a string, b object.
</script>

Veya daha kötüsü;

<script>
  var a = new String("Yusuf");
  var b = new String("Yusuf");
  alert(a === b);  // false; nesne veri türü karşılaştırılmaz.
</script>

JavaScript new anahtar kelimesi kullanmayın

new Object() yerine {} kullanın.
new String() yerine “” kullanın.
new Number() yerine 0 kullanın.
new Boolean() yerine false kullanın.
new Array() yerine [] kullanın.
new RegExp() yerine /()/ kullanın.
new Function() yerine function (){} kullanın.

<script>
  var a1 = {};
  var a2 = "";
  var a3 = 0;
  var a4 = false;
  var a5 = [];
  var a6 = /()/;
  var a7 = function (){};
</script>

Otomatik tip dönüşümlerine dikkat edin

JavaScript otomatik tip dönüşümleri ile sayılar yanlışlıkla metin veri türüne dönüştürülebilir ve istenmeyen sonuçlar verebilir.

JavaScript değişkenleri esnektir. Bir değişken bir veri türünden başka veri türüne otomatik olarak dönüştürülür.

<script>
  var a = "Yusuf"; // a'nın veri türü string
  a = 5;           // a'nın veri türü number
</script>

JavaScript matematiksel işlemleri yaparken sayıları metin veri türüne dönüştürebilir.

<script>
  var a = 5 + 7;    // Sonuç: 12  a'nın veri türü number
  var a = 5 + "7";  // Sonuç: 57  a'nın veri türü string
  var a = "5" + 7;  // Sonuç: 57  a'nın veri türü string
  var a = 5 - 7;    // Sonuç: -2  a'nın veri türü number
  var a = 5 - "7";  // Sonuç: -2  a'nın veri türü number
  var a = "5" - 7;  // Sonuç: -2  a'nın veri türü number
  var a = 5 - "x";  // Sonuç: NaN a'nın veri türü number
</script>

Bir metin veri türünden başka bir metin veri türünü çıkartmak hata oluşturmaz ancak sonuç NaN (Not a Number) olacaktır.

<script>
  var a = "Yusuf" - "SEZER";  // Sonuç: NaN a'nın veri türü number
</script>

Karşılatırmada === kullanın

İki farklı değeri == ile karşılaştırıldığında karşılaştırma yapılmadan önce veri türü dönüşümü yapılır.

Ancak === ile karşılaştırma yapıldığında veri türü dönüşümü yapılmadan değerler karşılaştırılır.

<script>
  0 == "";    // true
  1 == "1";   // true
  1 == true;  // true

  0 === "";   // false
  1 === "1"   // false
  1 === true; //false
</script>

Varsayılan parametre değeri

Fonksiyon parametreleri eksik gönderilirse eksik parametre tanımsız undefined olur.

Tanımsız değişken fonksiyonu çalışmaz hale getirebilir.

Fonksiyon parametrelerine varsayılan değer atayarak bu sorun çözülebilir.

<script>
  function Topla(a, b) {
    if(b === undefined) {
      b = 0;
    }
    return a + b;
  }
  alert(Topla(2));
</script>

switch deyimine varsayılan ekleyin

switch deyimine default deyimi gerek olmasa bile ekleyin.

</script>
  var tarih = new Date();
  var gun = tarih.getDay();
  switch(gun) {
    case 0:
      alert("pazar");
    break;
    case 1:
      alert("pazartesi");
    break;
    case 2:
      alert("salı");
    break;
    case 3:
      alert("çarşamba");
    break;
    case 4:
      alert("perşembe");
    break;
    case 5:
      alert("cuma");
    break;
    case 6:
      alert("cumartesi");
    break;
    default:
      alert("hata oluştu");
  }
</script>