Bir röportajda size sorulabilecek JavaScript'e genel bakış

Bu makalede, her gün etkileşimde bulunmadığımız bazı önemli javascript kavramları hakkında daha fazla yazacağım.

ReactJs, Angular gibi Javascript çerçeveleri kullanıyoruz, adını siz koyun ve herhangi bir teknik görüşmeden önce, aşina olduğumuz kitaplık/çerçeve kavramlarını hatırladığımızdan emin oluruz, ancak JavaScript'in bazı temel kavramlarını ihmal ederiz.

En azından bu daha önce başıma geldi, röportajımı bazı React röportaj sorularını gözden geçirerek, useEffect"Temizlikleri her zaman unuturum" ifadesini nasıl doğru kullanacağımı hatırlayarak ve hızlı bir gözden geçirme useMemoveya useRefbazen kafamı kurcalamayarak planladım. onlara. Belli bir zamana kadar 2 yıl önce bir iş başvurusunda bulundum ve teknik mülakatta bana sorulacak kütüphaneyi/çerçeveyi bilmiyordum. Görüşmeyi yapan kişi, dilin herhangi bir çerçevesine kafa yorabilecek bir JavaScript mühendisi arıyordu. İyi gitmedi ve JS'nin özünü anlamak için çalışmam gerektiği açıktı.

Bu makalede ve bundan sonrakilerde, size ileri düzey bir javascript mühendisinin aşina olması gereken bazı temel kavramlar hakkında kısa bilgiler vereceğim.

JavaScript Motoru nedir?

• Motor basitçe javascript dosyasını bilgisayara çevirir, diğer dillerde olduğu gibi, birden fazla javascript motoru vardır ama en ünlüsü Chrome'un kullandığı V8 Motorudur , C++ ile yazılmıştır ve 2008'de yayınlanmıştır. javascript'in yaratıcısı tarafından oluşturulan ve Firefox tarafından kullanılan Spider Monkey adlı “Brendan Eich” . Tarayıcının yalnızca HTML'yi değil javascript'i de anlamasını sağlayan ilk JavaScript motoruydu.
• Motora bir javascript dosyası veriyoruz ve anlamlarını belirlemek için kodu belirteçlere bölen sözcüksel analiz yapıyor.
• Belirteçler AST "Soyut Sözdizimi Ağacında" oluşturulur
• Sonra bir Tercümana, Profil Oluşturucuya veya Derleyiciye gider ⇒ CPU "makine dili" tarafından anlaşılabilen sıfır ve birlerden oluşan bazı kodlar alır

Kodu bilgisayarların anlayabileceği makine diline dönüştürmenin iki yolu vardır:

• Tercüman ⇒ Satırları satır satır okur.
• Derleyiciler ⇒ Kodun tamamını alır, ne yapmaya çalıştığımızı anlamaya çalışır, başka bir dile çevirir ve sonunda aynı sonuçları elde etmek için satır satır yorumlar. Bu dil, makine kodu gibi daha düşük seviyeli bir dilde olabilir.

JIT derleyici "Tam Zamanında" derleyici

Tarayıcılar, motorları daha hızlı hale getirmek için derleyicileri karıştırmaya başladı, hem “Tercüman” hem de “Derleyiciler”den en iyi şekilde yararlanıyor, bu şekilde javascript kodunu çalıştırma hızını artırıyor. Bu nedenle, JavaScript dili yalnızca yorumlayıcı bir dil değildir, aynı zamanda derlenebilir .

Çağrı yığınları ve bellek yığınları

Bir çağrı yığını , kodumuzda neler olup bittiğini satır satır takip etmek ve sırayla çalıştırmak için kullanılan bir yerdir. Kodunuz yürütülürken işlevleri ve değişkenleri depolar ve İlk Giren Son Çıkar modunda çalışır, bunun iyi yanı motora kod dosyasında nerede durduğunu, çağrı yığınının tepesinde ne varsa, söylemesidir. javascript'in çalıştığı veya yürüttüğü şey budur. Bellek yığınları , değişkenlerimizi ve verilerimizi saklayabileceğimiz bilgileri depolayıp yazarken, javascript motorunun her türlü veriyi sırasız bir şekilde depolamasını sağlayan ücretsiz bir mağaza olarak düşünün
.

Ve asıl zorluk, çağrı yığınının veya bellek yığınının ne olduğunu anlamazsanız, aşağıdakiler gibi zayıf mühendislik becerilerini gösteren bazı ciddi sorunlarla karşılaşabilirsiniz:

Yığın Taşması:
Hayır, her gün ziyaret ettiğiniz ünlü site değil, sırayla neyi yanlış yaptığınıza dair hiçbir fikriniz olmadan konsolunuzda beliren büyük kırmızı hatadır. İç içe geçmiş işlevleri tekrar tekrar çağırmaya
çalıştığımızda olur . Başarı durumu veya dönüş durumu olmayan özyinelemeli bir işlev gibi bir şey.

function inception(){
 inception();
}
// By this way, we would keep adding things to the stack more and more.

let arrayOfTrials = [];
while(1) {
 arrayOfTrials.push("hi");
}

1. Genel değişkenler giderek daha fazla bellek parçası ekleyeceğinden ortama değişkenler eklemeye devam edin.
2. Belgenizdeki öğelerden birine olay dinleyicileri eklemek ve ihtiyacınız olmadığında bunları asla kaldırmamak hafızanızı doldurur.
3. Hangisini kullanmak setInterval(), siz onu temizleyene kadar işlevi çağırmaya devam eden bir yöntemdir ve yöntemi kullanarak temizlemeyi unutursunuz clearInterval().

Javascript çöp toplayan bir dildir, yani JS nesnelerle bir işlev içinde bellek ayırdığında, nesneler bellek yığınlarında depolanır. İşlevi bitirdiğimizde ve artık bu nesneye ihtiyacımız olmadığında, JS onu bizim için otomatik olarak temizler ve yalnızca hala yararlı olan veriler kalır. Belleğimizi temizlemekten ve bellek sızıntılarını önlemek için biraz yer kazanmaktan sorumludur.
Bu, çöp toplamayı kontrol ettiğiniz ve belleğin hangi kısmını kaldıracağınızı belirlediğiniz C gibi düşük seviyeli diller için geçerli değildir. Tehlikelidir ama bu nedenle C'deki programlar çok hızlıdır ve bellek açısından verimlidir.

JavaScript Motorunun kendisi senkronizedir, teker teker, sırayla, bir seferde yalnızca bir şey olabilir. Bu, JavaScript Runtime'dan farklıdır .

Sonraki makalelerde, JavaScript Runtime, JavaScript'in temeli ve çok daha gelişmiş kavramlar hakkında daha fazla konuşacağım.

Çözüm

Her zaman çerçevenizde veya kitaplığınızda kullandığınız dilin kökenine dönün, şirketlerin ön uçlarda React Developer veya Angular2+ Engineer gibi belirli bir alan aradığını biliyorum, ancak kendinizi yeni bir kitaplığa veya çerçeveye uyarlamak her zaman daha iyidir. özünü anlamadığınız bir dille çalışmak yerine.

Kendinizi bir çerçeve mühendisi olarak görmeyin, derine inin, nedenini öğrenin ve belirli bir dilin kavramlarını anlayın, işte o zaman güçlü şeyler yapabilirsiniz!

Asla unutmayın, JavaScript'e her zaman güvenebilirsiniz.