JS'de konsolda neden bu değerler yazıyor?

Hesapsız biri

Attopat
Katılım
27 Haziran 2022
Mesajlar
37
1. Kod;

JavaScript:
for (var i = 0; i<3; i++){
    setTimeout(() => document.write(i),1);
}

for (let i = 0; i<3; i++){
    setTimeout(() => document.write(i),1);
}


Çıktısı;
Kod:
333012

Neden böyle bir çıktı veriyor?


2. Kod;
JavaScript:
     function Insan(ad, soyad){
            this.ad = ad;
            this.soyad = soyad;
        }
        kisi = new Insan('Ali','Veli');
        Insan.IsmiGetir = function (){
            return `${this.ad} ${this.soyad}`;
        };
        console.log(kisi.IsmiGetir());
Çıktısı;
Kod:
Uncaught TypeError: kisi.IsmiGetir is not a function

Neden böyle bir çıktı veriyor?
 
var ve let keywordlerinin değişken scope'u yani değişkenlerin geçerlilik alanları farklı. var tüm block için ortak değişken kullanırken let döngüdeki her bir iterasyon için i değişkenine ayrı bir bellek alanı tahsis etmiş etmiş. Bu nedenle sonuçlar farklı.

var kullanılan ilk döngüde 1ms sonraki ekrana bastırma işlemi gerçekleşmeden önce döngü üç defa çalışıp ortak i değişkenine 3. çalışmadan sonra 3 değeri yazılıyor. 1ms sonra da bu basılıyor. let ile yapılan döngüde ise bellekte 3 farklı i değişkeni oluşuyor. 1ms sonra basma işlemleri yapıldığında bu değerler ayrı ayrı yazılıyor.

Normalde böyle bir kullanım karşımıza çok çıkmaz bu örnek herhalde temel kullanım farklılıklarını göstermek için verilmiş. Gerçek hayatta çok özel bir nedeniniz yoksa modern js'de var kullanmanın bir sebebi yok, her yerde let veya const kullanabilirsiniz.


İkincisinde IsmiGetir fonksiyonu doğrudan Insan fonksiyonuna tanımlanmış. Bundan oluşturulan nesnelerde kullanılabilmesi için prototype üzerinden tanımlanması gerekiyor. Şu şekilde tanımlanırsa beklendiği gibi çalışır.

JavaScript:
function Insan(ad, soyad){
 this.ad = ad;
 this.soyad = soyad;
}
kisi = new Insan('Ali','Veli');
Insan.prototype.IsmiGetir = function (){
 return `${this.ad} ${this.soyad}`;
};
console.log(kisi.IsmiGetir());

prototype temelli kalıtım js'nin en gıcık özelliklerinden biri olarak düşünülüyor çünkü diğer nesneye yönelik dillere pek benzemiyor. Js'de nesneye yönelik programlama çok tercih edilen bir programlama tarzı değil zaten. İlla kullanılacaksa anlaşılırlığı arttırmak için ES6'te zaten class keyword'u de dile eklendi. O da kullanılabilir. Tabi yine nesneye yönelik programlama yapmış olmuyorsunuz arkaplanda yine prototype temelli çalışıyor.
 
Son düzenleme:

Technopat Haberler

Yeni konular

Geri
Yukarı