Javascript notları

Merhaba!

Açık konuşmak gerekirse yıllardır javascript’i az çok kullanmama rağmen çok önemsememiştim; çok zor olduğunu düşünmüyordum. Ama son zamanlarda işin içine biraz daha girince javascript’i etkin bir şekilde kullanabilmek için detaylı bir çalışmaya ihtiyacım olduğunu farkettim.

Herkesin bildiği gibi artık frontend dünyasında server tabanlı java kütüphaneleri (jsf, primefaces, icefaces) eskisi kadar kullanılmıyor. Bunların yerini javascript kütüphaneleri (reactjs, angular, vuejs) aldı. Hatta yalnızca frontend’de değil backend tarafında da NodeJS gibi teknolojilerle birlikte javascript giderek yükselen bir programlama dili haline geldi.

Javascript’i detaylı bilmeden de ReactJS gibi kütüphanelerle güzel uygulamalar yapmak mümkün. Ancak bu benim çok hoşuma giden bir yöntem değil. O nedenle bir süre önce javascript üzerine çalışmaya karar verdim.

Mozilla developer networkte javascript rehberini ve Udemy’deki bu eğitimi tavsiye ederim. Bu eğitimde javascript’e dair hemen hemen her konuya değiniliyor.

Bu yazıda javascript çalışırken aldığım notları ve bazı kavramları paylaşacağım.

Giriş

Javascript yazım olarak C, C++ ve Java programlama dillerine benziyor; oldukça esnek bir dil ve yazması da çok keyifli. İlk bakışta hoşuma gitmeyen tek şey esnekliğinden dolayı okunabilirliğinin düşük olması. Okunabilirliği arttırmak için her yere comment yazmak gerekiyor.

2 temel data tip’i var. Bunlar primitive ve Object.

Primitive data tipleri; Boolean, null, undefined, Number, BigInt, String ve Symbol. Bunların dışında kalan her şey Object tipinde oluyor.

Değişkenler

Javascript “dynamically typed” bir dil, o nedenle değişken tanımlarken değişkenin tip’i yazılmıyor. 3 tür değişken tanımlanabiliyor. Bunlar var, let ve const.

  • var: Global veya local
  • let: Block scoped local
  • const: Block scoped local read-only
if(true) {
    var name = "yusuf kemal";
    let surname = "özcan";
}

console.log(name);
console.log(surname);

Output:

yusuf kemal
/home/yko/Documents/projects/JSnotes/app.js:7
console.log(surname);
            ^

ReferenceError: surname is not defined

Blok içerisinde var ile tanımladığımız name değişkeni blok dışında da kullanılabilirken, let ile tanımladığımız surname değişkeni sadece if bloğu içerisinde kullanılabiliyor.

Fonksiyonlar

Javascript’te fonksiyon tanımlamak için 2 yöntem kullanılabilir. Bunlardan ilki fonksiyon tanımlama (function definition), diğeri fonksiyon ifadesi (function expression).

Function Definition

Diğer programlama dillerine benzer şekilde bir ad’ı olan ve parametre alıp, sonuç değer döndürebilen bir tanımdır.

function sum(a, b) {
  return a + b;
}

Function Expression

Bir fonksiyon adı olmadan da fonksiyon oluşturabiliriz. Recursion gibi durumlar için fonksiyon adı da verilebiliyor. Function definition’dan en önemli farkı bir parametreye atanıp kullanılabiliyor olması. Java 8 ile gelen functional interface kavramı ile birlikte java dünyasında da fonksiyonları parametrelere atayıp stream’lerde kullanabilir hale gelmiştik. Kullanım olarak birbirine çok benziyor.

var sum = function (a, b) { return a + b;}

Hoisting

İlk bakışta ilginç gelen kavramlardan biri hoisting. var ile tanımlanmış değişkenler henüz tanımlanmadan da kullanılabiliyor; javascript runtime hata vermiyor. Default değer olarak undefined atanıyor.

console.log(name);
var name = "yusuf";

Output: undefined

Aslında yukarıdaki kod js runtime tarafından şu şekilde yorumlanıyor;

var name;
console.log(name);
name = "yusuf";

Değişkenler gibi fonksiyon tanımlamalarında(function definition) da aynı durum geçerli.

hello();

function hello() {
  console.log("Hello world!");
}

Output: Hello world!

Ancak eğer bir fonksiyon ifadesi (function expression) bu şekilde kullanılırsa hata alınır. Çünkü hoisting işlemi yapıldığında fonksiyon değişkeni default olarak undefined değerini alıyor. undefined bir fonksiyon olmadığı için de hata oluşuyor.

console.log(helloFunc);
helloFunc();

var helloFunc = function hello() {
  console.log("Hello world!");
}

Output:

undefined
/home/yko/Documents/projects/JSnotes/app.js:2
helloFunc();
^

TypeError: helloFunc is not a function

Execution Context

Javascript programlarının nasıl çalıştığını tam olarak anlamak için belki de en önemli kavramlardan birisi execution context. Tanım olarak javascript kod’unun içinde çalıştığı ortam diyebiliriz. Her js kod’u bir execution context içerisinde çalışır.

  • Global Execution Context: Herhangi bir fonksiyonun içerisinde olmayan kod’lar global execution context içerisinde çalışır. Js runtime tarafından oluşturulur.
  • Functional Execution Context: Her fonksiyon çalıştırıldığında kendi execution context’ini oluşturur.

Her execution context içerisinde değişken ve fonksiyon-obje tanımlarının bilgileri bulunur. Js runtime engine creation phase ve execution phase aşamalarında kod’u analiz eder ve bu bilgileri execution context’te tutar. Creation ve execution phase kavramlarından yazının 2. bölümünde detaylı bahsedeceğim.

Execution Stack

Execution context’lerinin eklendiği ve çalışması bittiğinde çıkarıldığı yapıdır. Fonksiyonlar çalıştıkça kendi yarattıkları execution context’lerini execution stack’e koyarlar ve çalışmaları bitince silerler.

Bir örnek üzerinden gidelim;

var name = "yusuf"

function sum(a, b) {

    function print(val) {
        console.log(val);
    }

    print(a + b);
}

sum(1, 2);
console.log(name);

Yukarıdaki program çalışmaya başladığı zaman execution stack’te sadece global execution context bulunur. 12. satır’a gelindiğinde sum fonksiyonu kendine ait yeni bir execution context oluşturur ve execution stack’e koyar. Sum fonksiyonu çalışırken kendi içerisinde yeni bir fonksiyon çağrımı yapar. 9. satırda print fonksiyonu da kendine ait yeni execution context’i execution stack’e atar. Çalışmasını bitiren fonksiyonun context’i stack’ten silinerek program sonlanır.

Hoşçakalın!

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s