Birçok kişinin JavaScript'in garip ve bazen değersiz olduğundan şikayet ettiğini duyacaksınız. İnsanlar böyle şikayet ediyorlar çünkü olayların kaputun altında nasıl çalıştığını anlamıyorlar. Her ne kadar JavaScript'teki bazı senaryoların farklı işlendiğini kabul etsem de, bu onu garip değil, kendi yolunda güzel yapıyor.

Bir programlama dilini sevmeye başlamak için, içine derinlemesine bakarak ve kavramlarını tek tek ustalaştırarak başlamalısınız.

Bu makale biraz uzun görünebilir ancak her satırına değeceğine eminim. Bu makaleyi hazırlarken edindiğim tüm kaynaklara selam olsun. Makale serimin sonunuda kaynaklara değineceğim. 

Hazırsak başlayalım;

1-) Primitive Data Types - Basit ve ilkel Veri Türleri

const foo = "bar"; 
foo.length; // 3 
foo === "bar"; // doğru

Yukarıdaki örnekte, JavaScript sabiti geçici bir sarmalayıcı nesneye sarar ve ardından o nesnenin length özelliğine erişir. Bu adım tamamlandığında, nesne güvenli bir şekilde atılır.

İlkel veri türleri hakkında derinlemesine bilgi sahibi olarak, bunların ikili temsillerine kadar bellekte nasıl saklandığını bileceksiniz. Ayrıca bu “garip” durumların nasıl oluştuğunu ve bunların arkasındaki mantıksal nedeni de bileceksiniz.

2-) Value Types and Reference Types  - Değer Türleri ve Referans Türleri

Kısa bir süre önce, "referansla geç" -  “pass by reference” kavramının JavaScript'te nasıl çalıştığı konusunda biraz karışıklık yaşadım. C ve Java gibi dillerde “referansla geç” -  “pass by reference”  ve “değere göre geç” -  “pass by value” kavramlarının farkında olmama rağmen, JavaScript'te nasıl çalıştığından emin değildim.

JavaScript'te ilkel olmayan değerlere atanan değişkenlere bu değere referans verildiğini biliyor muydunuz? Başvuru, değerin depolandığı bellek konumunu gösterir.

var arr1 = [1,2,3];
var arr2 = arr1;
arr2.push(10);
console.log(arr2);
//[1, 2, 3, 10]
console.log(arr1);
//[1, 2, 3, 10]

Yukarıdaki örnekten de görebileceğiniz gibi, arr1. de yapılan tüm değişiklikler arr2de yansıtılacaktır. Bunun nedeni, gerçek değerin kendisini değil, yalnızca değere yapılan referansı tutmalarıdır.

Bu değer türleri ve referans türleri kavramını anlayarak, değişkenlere değerlerin ve bellek referanslarının nasıl atandığını daha iyi anlayacaksınız.

3-) Type Coercion - Çıktı veya Baskı Türleri

Bu kavram genellikle kapalı veya açık çıktı türleri arasındaki farklılıkları anlamaktır.  Bu, JavaScript'te insanların bir şeyler yanlış yaptığı birkaç alandan biridir. Bu, örtük tip zorlama kavramı için özellikle geçerlidir, çünkü farklı veri tipleriyle farklı şekillerde davranır.

Number('789')   // açık
+'789'          // örtülü
789 != '456'    // örtülü
9 > '5'         // örtülü
10/null          // örtülü
true | 0        // örtülü

 

4-) Eşitlik Karşılaştırması ve 'typeof' Operatörü

Bu kavram temel olarak çift eşit ve üçlü eşitlerin kullanımını ve bunları ne zaman ve neden kullanmanız gerektiğini açıklar. Yüzeyde aynı görünseler ve çoğu zaman aynı sonuçları verseler de, bilmeden kullanırsanız size beklenmedik hatalar verebilirler.

Ayrıca typeofoperatörü kullanabilmeli ve çıktıların olanaklarını bilmelisiniz. Nesneler devreye girdiğinde kafa karıştırıcı olabilir.

typeof 3 // "number" 
typeof "abc" // "string" 
typeof {} // "object" 
typeof true // "boolean" 
typeof undefined // "tanımsız" 
typeof function () {} // "function"
typeof [] // "object" 
typeof null // "object"

5-) Javascript Scope / Kapsamı 

Scope olayları JS yolculuğunuzun başlangıcında mükemmelleştirilmesi gereken kavramlardan biri olduğuna inanıyorum. Wissam'a göre , kapsamın basit tanımı, derleyicinin ihtiyaç duyduklarında değişkenleri ve işlevleri aradığı yerdir.

Kapsamları anlamak, JavaScript'i daha verimli ve etkili bir şekilde kullanmanıza olanak tanır. Global kapsam ve sözcüksel kapsam olarak da bilinen blok ve işlev kapsamı hakkında bilgi edinmelisiniz. JS kapsamı ilk başta oldukça kafa karıştırıcı görünebilir, ancak işlerin kaputun altında nasıl çalıştığını anladıktan sonra, çalışmak çok heyecan verici olacaktır.

6-) Statements and Expressions

Bunlar JavaScript'teki iki ana sözdizim kategorisidir. Bu ikisi ile ifadelerin nasıl değerlendirildiğini bilmelisiniz. Bu, kodunuzun ifadeler ve ifadeler olarak nasıl yapılandırıldığını genel olarak anlamanıza olanak tanır. Kodunuzun çoğunun ifade olduğunu göreceksiniz, buna karşılık daha az sayıda ifadeniz var. Ayrıca, bu ikisinin yanlış kullanımından kaynaklanan hatalardan kaçınabilirsiniz.

7-) İleti Kuyrukları ve Olay Döngüleri

JavaScript kodu yürütmesini toplama ve olayları işleyerek ve sıraya alt görevleri yürütmekle görevli bir olay döngü dayanan bir eşzamanlılık modeli vardır. Bu model, C ve Java gibi diğer dillerdeki modellerden oldukça farklıdır.

İleti kuyrukları, yukarıdaki eşzamanlılık modelinde, en eskisinden başlayarak iletileri işlemek için kullanılır. Bir olay meydana geldiğinde mesajlar eklenir ve buna bir olay dinleyicisi eklenir.

Bu kavramları anlayarak JS'nin kaputun altında nasıl çalıştığını ve kodunuzu yorumlamayı nasıl başardığını daha iyi anlayabilirsiniz.


8-) Time Intervals - Zaman Aralıkları

JavaScript'te bir arama veya işlev zamanlamak için iki yöntem kullanırsınız.

  • setTimeout belirli bir zaman aralığından sonra bir işlevi çalıştırmamızı sağlar.
  • setInterval bir işlevi belirli bir zaman aralığından sonra tekrar tekrar çalıştırmamızı, ardından o aralıkta sürekli tekrarlamamızı sağlar.

Bunlar biraz önceki mesaj kuyrukları ve olay işleyicileri kavramı ile ilgilidir. Bu nedenle, zaman aralığı yöntemlerini anlayarak, bunların nasıl çalıştığını anlayabilir ve kullanım durumlarımızda verimli bir şekilde kullanabiliriz.

9-) JavaScript Engines - JS Motorları

Evet bu aşamaya kadar geldiysek artık JavaScript'i derinleştirmeye başlayabiliriz. JavaScript motoru, JavaScript kodunu çalıştıran bir bilgisayar programı veya yorumlayıcıdır. Bir JavaScript motoru çok çeşitli dillerde yazılabilir. Örneğin, Chrome tarayıcısına güç veren V8 motoru C ++ ile, Firefox tarayıcısına güç veren SpiderMonkey motoru C ve C ++ ile yazılmıştır.

Etkili kod yazmak için hangi JavaScript motorunda çalıştığınızı anlamanız önemlidir. Bir web görünümü kullanan mobil geliştiriciler özellikle bunun farkında olmalıdır.

10-) DOM and Layout Trees

Çoğumuz Belge Nesne Modeli'ni (DOM) duyduk, ancak çok azımız bunu derinlemesine biliyoruz. Tarayıcıda gördüğünüz şeyin DOM olmadığını biliyor musunuz? Daha çok, aslında DOM ve CSSOM'un bir birleşimi olan render ağacı.

DOM'nin nasıl çalıştığını, nasıl yapılandırıldığını ve bir sayfanın nasıl oluşturulduğunu anlayarak, web sayfamızı JavaScript yardımıyla dinamik olarak değiştirebiliriz. Bu, özellikle uygulama performansımızın yüksek bir standartta olduğundan emin olmak için gereklidir.