Senkron ve asenkron çalışma

JavaScript temel olarak tek iş parçacıklı çalışır. Başka bir ifadeyle aynı anda yalnızca bir JavaScript komutu yürütülür. Senkron kodda her işlem, sıradaki işlemin başlamasından önce tamamlanmalıdır. Uzun süren bir görev bu sırayı bloke ederse kullanıcı arayüzü de yanıt veremez.

Asenkron yapıda ise JavaScript, bekleme gerektiren görevi tarayıcının Web API sistemine teslim eder ve diğer komutları yürütür. Görev tamamlandığında ilgili callback kuyruğa eklenir. Buradaki önemli ayrıntı şudur: Callback hemen çalışmaz; call stack, yani çağrı yığını boşaldığında çalışabilir.

Bir işlemin toplam bekleme süresini kabaca şu şekilde düşünebiliriz:

Asenkronluk $T_{bekleme}$ değerini yok etmez. Yalnızca JavaScript’in bu süre boyunca başka işlerle ilgilenebilmesini sağlar.

Callback nasıl çalışır?

Callback, başka bir fonksiyona argüman olarak verilen ve uygun zamanda çağrılan fonksiyondur. En bilinen örneklerden biri setTimeout kullanımıdır:

console.log("Sipariş alındı");

setTimeout(() => {
  console.log("Sipariş hazır!");
}, 2000);

console.log("Bu sırada başka müşteriye bakılıyor");

Çıktıda “Sipariş hazır!” mesajı en son görünür. setTimeout, callback’i iki saniye sonra doğrudan çalıştırmaz; en az iki saniye geçtikten sonra görev kuyruğuna gönderir. Event loop, çağrı yığını boş olduğunda bu görevi yürütür. Dolayısıyla yoğun bir JavaScript işlemi varsa callback daha geç başlayabilir.

Veri çekme senaryosu

Aşağıdaki fonksiyon, veri isteğinin sonucunu bir callback üzerinden dışarı iletir:

function kullaniciGetir(id, tamamlandi) {
  fetch(`https://jsonplaceholder.typicode.com/users/${id}`)
    .then(response => {
      if (!response.ok) {
        throw new Error("Kullanıcı bulunamadı");
      }
      return response.json();
    })
    .then(data => tamamlandi(null, data))
    .catch(error => tamamlandi(error, null));
}

kullaniciGetir(1, (hata, kullanici) => {
  if (hata) {
    console.error(hata.message);
    return;
  }

  console.log(`Merhaba ${kullanici.name}!`);
});

Burada tamamlandi fonksiyonu error-first callback yaklaşımını kullanır: İlk parametre hata, ikinci parametre başarılı sonuçtur. Ağ isteği sürerken tarayıcı diğer olayları işlemeye devam eder. İstek sonuçlandığında callback uygun kuyruğa alınır.

Her uzun işlem asenkron değildir

Ağ istekleri tarayıcı altyapısına devredilebilir; fakat milyonlarca elemanı hesaplayan yoğun bir döngü otomatik olarak arka plana taşınmaz. Böyle bir CPU işlemi ana iş parçacığını yine dondurur. Ağır hesaplamalar için Web Worker, görevleri parçalara bölme veya sunucu tarafında işleme gibi çözümler gerekir.

Callback’ler küçük senaryolarda anlaşılırdır; ancak iç içe kullanıldıklarında “callback hell” adı verilen karmaşık bir yapı oluşturabilir. Modern JavaScript’te Promise ve async/await, aynı asenkron mantığı daha okunabilir biçimde ifade eder. Yine de event loop ve callback temelini anlamak, bu modern yapıların perde arkasında neden ve nasıl çalıştığını kavramanın en sağlam yoludur.

Asenkron çalışma neden gereklidir?

Senkron bir programda her işlem, kendisinden önceki işlemin bitmesini bekler. Uzun süren bir ağ isteği bütün akışı engellerse kullanıcı arayüzü donabilir. Asenkron modelde ise bekleyen görev kenara alınır ve çalışma zamanı diğer işleri yürütmeye devam eder.

Bir işlemin toplam süresini kabaca şu şekilde düşünebiliriz:

Bağımsız görevler paralel biçimde başlatıldığında ideal süre, görev sürelerinin toplamı yerine en uzun göreve yaklaşır:

Elbette JavaScript’in ana iş parçacığı aynı anda iki JavaScript komutu çalıştırmaz. Ağ, zamanlayıcı ve dosya sistemi gibi işlemler çalışma ortamına devredilir; tamamlanan görevlerin devamı olay döngüsü tarafından uygun zamanda yürütülür.

Async ve await ne yapar?

async ile işaretlenen bir fonksiyon her zaman Promise döndürür. Fonksiyon doğrudan bir değer döndürse bile bu değer çözülmüş bir Promise içine sarılır. await ise Promise sonuçlanana kadar yalnızca ilgili asenkron fonksiyonun ilerleyişini bekletir; uygulamanın tamamını kilitlemez.

async function kullaniciGetir(id) {
  const yanit = await fetch(`/api/kullanicilar/${id}`);

  if (!yanit.ok) {
    throw new Error(`HTTP hatası: ${yanit.status}`);
  }

  return await yanit.json();
}

Bu fonksiyon önce HTTP yanıtını, ardından JSON dönüşümünü bekler. Kod yukarıdan aşağı okunur; fakat iki bekleme sırasında da çalışma ortamı başka görevlerle ilgilenebilir.

Hataları kontrollü biçimde yakalamak

Asenkron işlemler ağ kesintisi, yetki problemi veya geçersiz veri nedeniyle başarısız olabilir. try/catch/finally, bu durumları senkron kodlara benzer şekilde yönetir.

async function profiliGoster(id) {
  try {
    const kullanici = await kullaniciGetir(id);
    console.log(`${kullanici.ad} profili yüklendi.`);
  } catch (hata) {
    console.error("Profil yüklenemedi:", hata.message);
  } finally {
    console.log("Yükleme işlemi sona erdi.");
  }
}

finally bloğu başarıdan bağımsız olarak çalıştığı için yükleme göstergesini kapatmak veya kaynakları temizlemek açısından kullanışlıdır.

Bağımsız görevleri sıraya dizmeyin

Her await ifadesini art arda kullanmak bazen gereksiz beklemeye yol açar. Birbirine bağlı olmayan görevler önce başlatılmalı, sonra birlikte beklenmelidir.

async function paneliHazirla() {
  const kullaniciIstegi = fetch("/api/kullanici");
  const bildirimIstegi = fetch("/api/bildirimler");

  const [kullaniciYaniti, bildirimYaniti] = await Promise.all([
    kullaniciIstegi,
    bildirimIstegi
  ]);

  return {
    kullanici: await kullaniciYaniti.json(),
    bildirimler: await bildirimYaniti.json()
  };
}

Promise.all, işlemleri eşzamanlı başlatır; ancak içlerinden biri reddedilirse tamamı hata verir. Tüm sonuçları başarı veya hata durumlarıyla incelemek gerekiyorsa Promise.allSettled tercih edilebilir.

Küçük ama önemli alışkanlıklar

await yalnızca gerçekten sonuca ihtiyaç duyulan yerde kullanılmalıdır. Hatalar sessizce yutulmamalı, mümkünse anlamlı bağlamla yeniden fırlatılmalıdır. Ayrıca uzun listelerde sınırsız sayıda isteği aynı anda başlatmak sunucuyu zorlayabilir; görevleri gruplara ayırmak veya eşzamanlılık sınırı uygulamak daha güvenlidir.

Async/await sihir değil, Promise tabanlı akışın daha okunabilir bir yüzüdür. Olay döngüsünü, bağımlı görevleri ve hata yayılımını anladığınızda karmaşık asenkron süreçler ürkütücü bir labirent olmaktan çıkıp düzenli bir yapılacaklar listesine dönüşür.

DOM tam olarak nedir?

DOM, yani Document Object Model, tarayıcının HTML belgesini bellekte temsil etmek için oluşturduğu nesne modelidir. Tarayıcı HTML kodunu okur, etiketler arasındaki ebeveyn-çocuk ilişkilerini analiz eder ve hiyerarşik bir ağaç meydana getirir.

Örneğin aşağıdaki belgeyi düşünelim:

<body>
  <main>
    <h1>Ürünler</h1>
    <ul id="liste">
      <li>Klavye</li>
    </ul>
  </main>
</body>

Bu yapıda body, main elemanının; main ise h1 ve ul elemanlarının ebeveynidir. li düğümü de ul altında bulunur. DOM yalnızca etiketlerden oluşmaz: metinler, yorumlar ve belgenin kendisi de birer düğümdür.

Bir ağacın toplam düğüm sayısını basitçe $N = E + T + C$ biçiminde düşünebiliriz. Burada $E$ elemanları, $T$ metin düğümlerini, $C$ ise yorum düğümlerini temsil eder. Gerçek DOM modeli daha ayrıntılı olsa da bu yaklaşım yapının neden beklenenden kalabalık olabileceğini anlatır.

Elemanları seçmek ve değiştirmek

DOM manipülasyonunun ilk adımı hedefi bulmaktır. querySelector, CSS seçicilerini desteklediği için oldukça kullanışlıdır. querySelectorAll ise eşleşen bütün elemanları bir NodeList içinde döndürür.

const baslik = document.querySelector("h1");
const liste = document.querySelector("#liste");

baslik.textContent = "Teknoloji Ürünleri";
baslik.classList.add("vurgulu");

const yeniUrun = document.createElement("li");
yeniUrun.textContent = "Mekanik Fare";
liste.appendChild(yeniUrun);

Bu kod önce başlığı ve listeyi bulur. Ardından başlığın güvenli biçimde metnini değiştirir, bir CSS sınıfı ekler ve bellekte yeni bir li üretip listeye bağlar. textContent, verilen değeri HTML olarak yorumlamadığı için kullanıcı kaynaklı içeriklerde genellikle innerHTML kullanımından daha güvenlidir.

Olaylarla etkileşim kurmak

Dinamiklik yalnızca içerik değiştirmek değildir; kullanıcı davranışına tepki vermek de gerekir. Olay dinleyicileri tam bu noktada sahneye çıkar:

const buton = document.querySelector("#urun-ekle");
let sayac = 1;

buton.addEventListener("click", () => {
  const eleman = document.createElement("li");
  eleman.textContent = `Yeni ürün ${sayac}`;
  liste.appendChild(eleman);
  sayac += 1;
});

Her tıklamada yeni bir liste elemanı oluşturulur. Böylece HTML dosyasını yeniden yüklemeden arayüz güncellenir. Olaylar genellikle hedef elemandan üst düğümlere doğru yayılır; bu davranışa event bubbling denir. Çok sayıda benzer eleman varsa her birine dinleyici eklemek yerine ortak ebeveyne tek dinleyici bağlamak, yani olay delegasyonu kullanmak daha verimli olabilir.

Performans ve güvenlik

DOM işlemleri ücretsiz değildir. Çok sayıda değişiklik tarayıcının yerleşimi yeniden hesaplamasına neden olabilir. $n$ eleman üzerinde tek tek ve ağır işlemler yapmak yaklaşık $O(n)$ maliyet oluştururken, her adımda tüm ağacı yeniden taramak maliyeti büyütebilir. Eleman referanslarını saklamak, değişiklikleri gruplamak ve gerektiğinde DocumentFragment kullanmak daha akıcı arayüzler sağlar.

Sonuç olarak DOM, HTML ile JavaScript arasındaki köprüdür. Ağacı doğru okuyup güvenli yöntemlerle değiştirdiğinizde statik belgeler; filtrelenen listelere, açılır menülere ve etkileşimli uygulamalara dönüşür. Kısacası HTML sahneyse, DOM dekor düzeni; JavaScript ise dekoru hareket ettiren çalışkan sahne görevlisidir.

Nesne yönelimli düşüncenin temeli

Nesne yönelimli programlama, ilişkili durum ve davranışları aynı yapı içinde toplar. Örneğin bir banka hesabının bakiyesi durum, para yatırma işlemi ise davranıştır. Bunu kabaca şu şekilde ifade edebiliriz:

JavaScript’te nesneler başka bir nesneyi prototip olarak kullanabilir. Bir özellik nesnenin kendisinde bulunamazsa motor, prototip zincirinde yukarı doğru arama yapar. Zincirin derinliği $d$ ise en kötü durumdaki aramayı basitleştirilmiş biçimde $T(d)=O(d)$ olarak gösterebiliriz.

ES6 öncesinde yapıcı fonksiyon ve prototype kullanmak yaygındı:

function Kullanici(ad, puan) {
  this.ad = ad;
  this.puan = puan;
}

Kullanici.prototype.selamla = function () {
  return `Merhaba, ben ${this.ad}!`;
};

Bu kod geçerlidir; ancak yapıcı ile prototip metotları farklı yerlerde tanımlandığı için yapı büyüdükçe takip edilmesi zorlaşabilir.

Class ve constructor kullanımı

Aynı modeli ES6 sınıf sözdizimiyle daha toplu yazabiliriz:

class Kullanici {
  constructor(ad, puan = 0) {
    this.ad = ad;
    this.puan = puan;
  }

  selamla() {
    return `Merhaba, ben ${this.ad}!`;
  }

  puanEkle(miktar) {
    this.puan += miktar;
  }
}

const ada = new Kullanici("Ada", 10);
ada.puanEkle(5);
console.log(ada.puan); // 15

constructor, new ile nesne oluşturulduğunda otomatik çalışan özel metottur. Başlangıç değerlerini nesneye yerleştirir. Sınıf gövdesindeki normal metotlar her nesne için yeniden kopyalanmaz; sınıfın prototype nesnesine eklenerek örnekler arasında paylaşılır.

Kalıtım: extends ve super

Bir sınıfın davranışlarını genişletmek için extends kullanılır. Alt sınıfın yapıcısında this kullanılmadan önce super() çağrılmalıdır; çünkü önce üst sınıfın nesne kurulumunu tamamlaması gerekir.

class Yonetici extends Kullanici {
  constructor(ad, puan, yetki) {
    super(ad, puan);
    this.yetki = yetki;
  }

  selamla() {
    return `${super.selamla()} Yetkim: ${this.yetki}`;
  }
}

const linus = new Yonetici("Linus", 100, "sistem");
console.log(linus.selamla());

Burada Yonetici.prototype, dolaylı olarak Kullanici.prototype nesnesine bağlanır. Dolayısıyla kalıtımın motoru yine prototip zinciridir; extends yalnızca bu bağlantıyı güvenli ve anlaşılır biçimde kurar.

Küçük ama önemli ayrıntılar

Sınıflar otomatik olarak strict mode içinde çalışır. Ayrıca sınıf bildirimi, fonksiyon bildiriminin aksine tanımlanmadan önce güvenle kullanılamaz. static ile yazılan metotlar örneklere değil doğrudan sınıfa aittir:

class MatematikAraci {
  static ikiKat(sayi) {
    return sayi * 2;
  }
}

console.log(MatematikAraci.ikiKat(6)); // 12

Sonuç olarak ES6 sınıfları JavaScript’i klasik sınıf tabanlı bir dile dönüştürmez. Prototip modeline daha tanıdık, düzenli ve bakımı kolay bir arayüz sunar. Sihir yoktur; yalnızca prototiplerin üzerine giydirilmiş oldukça şık bir takım elbise vardır.

``

Birinci sınıf vatandaş ne demektir?

Bir programlama dilinde bir değer aşağıdaki işlemleri destekliyorsa genellikle birinci sınıf kabul edilir:

• Bir değişkene atanabilir.
• Veri yapılarında saklanabilir.
• Fonksiyonlara parametre olarak geçirilebilir.
• Başka bir fonksiyondan döndürülebilir.

JavaScript fonksiyonları bu koşulların tamamını karşılar. Matematiksel açıdan bir fonksiyonu $f: A \rightarrow B$ biçiminde gösteririz. Bu ifade, $f$ fonksiyonunun $A$ kümesindeki bir girdiyi $B$ kümesindeki bir çıktıya dönüştürdüğünü söyler. Programlamadaki önemli fark, $f$ değerinin kendisini de taşıyabilmemizdir.

const topla = function (a, b) {
  return a + b;
};

const hesapla = topla;
console.log(hesapla(4, 6)); // 10

Burada topla fonksiyonu çalıştırılmadan hesapla değişkenine atanır. Parantez kullanılmaması kritiktir: topla fonksiyonun kendisini, topla() ise fonksiyon çağrısının sonucunu ifade eder.

Fonksiyonları parametre olarak geçirmek

Bir fonksiyona başka bir fonksiyon verilmesine callback yaklaşımı denir. Callback alan fonksiyon ise yüksek dereceli fonksiyondur. Bu yapı, davranışı veriden ayırarak tekrar kullanılabilir kod üretmemizi sağlar.

function uygula(sayi, islem) {
  return islem(sayi);
}

const ikiyleCarp = x => x * 2;
const karesiniAl = x => x ** 2;

console.log(uygula(5, ikiyleCarp)); // 10
console.log(uygula(5, karesiniAl)); // 25

uygula, hangi hesabın yapılacağını bilmez; yalnızca aldığı davranışı çalıştırır. Matematiksel olarak bunu $uygula(x, f) = f(x)$ şeklinde düşünebiliriz. Böylece aynı mekanizma, farklı fonksiyonlarla farklı sonuçlar üretir.

Fonksiyondan fonksiyon döndürmek

Fonksiyonlar sonuç olarak da üretilebilir. Bu teknik yapılandırılabilir ve özelleştirilebilir işlemler oluşturmak için kullanışlıdır.

function carpaniOlustur(carpan) {
  return sayi => sayi * carpan;
}

const ucleCarp = carpaniOlustur(3);
console.log(ucleCarp(7)); // 21

Döndürülen fonksiyon, dış fonksiyon tamamlandıktan sonra bile carpan değerini hatırlar. Bu davranışa closure denir. Adeta fonksiyon küçük bir sırt çantası taşır ve doğduğu kapsamın değişkenlerini yanında götürür.

Arrow function avantajları

Arrow function sözdizimi özellikle kısa callback ifadelerinde kodu sadeleştirir.

Tek ifadeli arrow function’larda return ve süslü parantezler çıkarılabilir:

const fiyatlar = [100, 200, 300];
const kdvliFiyatlar = fiyatlar.map(fiyat => fiyat * 1.20);

Ancak arrow function her durumda daha iyi değildir. Nesne metotlarında dinamik this gerekiyorsa klasik fonksiyon tercih edilmelidir.

const kullanici = {
  ad: "Ada",
  selamla() {
    console.log(`Merhaba, ${this.ad}!`);
  }
};

Sonuç olarak birinci sınıf fonksiyonlar; callback, closure, olay yönetimi ve fonksiyonel programlama gibi pek çok yaklaşımın temelidir. Arrow function’lar bu gücü kısa bir sözdizimiyle sunar, fakat this ve constructor farklılıkları unutulmamalıdır. Fonksiyonları yalnızca çalışan bloklar değil, taşınabilen ve birleştirilebilen değerler olarak gördüğünüzde JavaScript çok daha esnek bir oyun alanına dönüşür.

Dizi nedir?

Dizi, birden fazla değeri sıralı biçimde saklayan veri yapısıdır. JavaScript’te köşeli parantezlerle oluşturulur ve her elemanın sıfırdan başlayan bir indeksi vardır.

const diller = ["JavaScript", "Python", "Go"];

console.log(diller[0]); // JavaScript
console.log(diller.length); // 3

Bir dizide $n$ eleman varsa geçerli indeksler $0$ ile $n-1$ arasındadır. Örneğin üç elemanlı bir dizinin son elemanı diller[2] olur. Son elemana daha okunaklı biçimde diller.at(-1) kullanılarak da erişilebilir.

Diziler yalnızca metin değil; sayı, nesne ve hatta başka diziler barındırabilir. Yine de uygulamada aynı amaca hizmet eden verileri bir arada tutmak kodun anlaşılmasını kolaylaştırır.

Yüksek mertebe metot nedir?

Yüksek mertebe fonksiyon, başka bir fonksiyonu parametre olarak alabilen veya sonuç olarak fonksiyon döndürebilen fonksiyondur. Dizi metotları, her eleman için çalıştırılacak bir geri çağırma fonksiyonu alır.

Bu metotlar kaynak diziyi doğrudan değiştirmez. Böylece beklenmedik yan etkiler azalır ve veri akışı daha kolay takip edilir.

map: Her elemanı dönüştür

map, dizideki her elemanı verilen fonksiyondan geçirir. Matematiksel olarak bir $f$ fonksiyonunun tüm elemanlara uygulanması gibi düşünülebilir:

const fiyatlar = [100, 250, 80];
const kdvliFiyatlar = fiyatlar.map((fiyat) => fiyat * 1.20);

console.log(kdvliFiyatlar); // [120, 300, 96]

Burada her fiyat yüzde 20 KDV eklenerek dönüştürülür. Orijinal fiyatlar dizisi değişmez.

filter: İstenmeyenleri ele

filter, geri çağırma fonksiyonu true döndüren elemanları yeni diziye taşır. Bir sınıftaki başarılı notları seçelim:

const notlar = [45, 82, 67, 30, 91];
const basariliNotlar = notlar.filter((not) => not >= 50);

console.log(basariliNotlar); // [82, 67, 91]

Koşul bir süzgeç gibi çalışır. En kötü durumda bütün elemanlar incelendiği için zaman karmaşıklığı $O(n)$ olur.

reduce: Diziyi tek sonuca indir

reduce, biriktirici ve mevcut eleman üzerinden ilerler. İkinci argüman başlangıç değeridir; verilmesi, özellikle boş dizilerde hata riskini azaltır.

const sepet = [
  { ad: "Klavye", fiyat: 900 },
  { ad: "Fare", fiyat: 500 },
  { ad: "Kulaklık", fiyat: 1200 }
];

const toplam = sepet.reduce(
  (biriken, urun) => biriken + urun.fiyat,
  0
);

console.log(toplam); // 2600

Toplam, matematiksel olarak $\sum_{i=1}^{n} fiyat_i$ işlemidir. Biriktirici başlangıçta 0 değerini alır ve her ürünün fiyatıyla güncellenir.

Metotları zincirlemek

Asıl eğlence metotlar birleştiğinde başlar. Önce pahalı ürünleri seçip sonra adlarını dönüştürebiliriz:

const pahaliUrunAdlari = sepet
  .filter((urun) => urun.fiyat >= 800)
  .map((urun) => urun.ad.toUpperCase());

console.log(pahaliUrunAdlari); // ["KLAVYE", "KULAKLIK"]

Her zincir halkası yeni bir sonuç üretir. Ancak her metot diziyi ayrı dolaştığından devasa veri kümelerinde gereksiz zincirler maliyet yaratabilir. Günlük uygulamalarda ise okunabilirlik kazancı çoğunlukla daha değerlidir.

Kısacası map dönüştürür, filter seçer, reduce biriktirir. Hangi metodu kullanacağınıza karar verirken “Yeni bir liste mi, seçilmiş elemanlar mı, yoksa tek bir sonuç mu istiyorum?” sorusunu sormanız yeterlidir.

JavaScript nerede çalışır?

JavaScript kodunu çalıştıran temel bileşene JavaScript motoru denir. Google Chrome ve Node.js, V8 motorunu kullanır. Firefox ise SpiderMonkey adlı farklı bir motora sahiptir. Motor, yazdığımız kaynak kodunu bilgisayarın işleyebileceği komutlara dönüştürür.

Bir programın yaklaşık çalışma süresini teorik olarak şöyle düşünebiliriz:

Modern motorlar, sık kullanılan kodları çalışma sırasında optimize eden JIT (Just-in-Time) derleme yöntemlerinden yararlanır. Dolayısıyla JavaScript yalnızca “satır satır okunan basit bir betik dili” değildir.

Tarayıcı konsoluyla ilk buluşma

Chrome, Edge veya Firefox’ta F12 tuşuna basarak geliştirici araçlarını açın ve Console sekmesine geçin. Burada herhangi bir dosya oluşturmadan JavaScript çalıştırabilirsiniz:

const ad = 'Ada';
const dersSayisi = 3;

console.log(`Merhaba ${ad}! Bugün ${dersSayisi} ders var.`);
console.table({ ad, dersSayisi });

console.log değerleri görüntülerken console.table, nesneleri tablo biçiminde sunar. Konsol hızlı deneyler için harikadır; fakat yazdığınız komutlar kalıcı bir proje düzeni oluşturmaz.

Node.js kurulumu

Node.js, JavaScript’i tarayıcı dışında çalıştıran bir çalışma zamanıdır. Resmî Node.js sitesinden LTS sürümünü indirin. LTS, uzun süre desteklenen ve yeni başlayanlar için daha güvenli olan sürümdür. Kurulumla birlikte paket yöneticisi npm de gelir.

Terminalde kurulumu doğrulayın:

node --version
npm --version

Ardından merhaba.js adlı bir dosya oluşturup şu kodu yazın:

const sayilar = [4, 8, 15, 16, 23, 42];
const toplam = sayilar.reduce((sonuc, sayi) => sonuc + sayi, 0);

console.log('Toplam:', toplam);

Dosyayı terminalden node merhaba.js komutuyla çalıştırabilirsiniz. Buradaki toplam işleminin matematiksel gösterimi şöyledir:

VS Code’u hazırlamak

VS Code’u kurduktan sonra bir proje klasörü açın. Daha konforlu kod yazmak için şu eklentiler yararlıdır:

Prettier kurulduktan sonra ayarlardan Format On Save seçeneğini etkinleştirebilirsiniz. Böylece dosyayı her kaydettiğinizde girintiler ve boşluklar otomatik düzeltilir.

Canlı sunucuyla küçük proje

Proje klasöründe index.html ve app.js dosyaları oluşturun. HTML dosyanızın kapanış body etiketinden önce JavaScript’i bağlayın:

<button id="dugme">Tıkla</button>
<script src="app.js"></script>

app.js içinde düğmeye davranış kazandırın:

const dugme = document.querySelector('#dugme');
let sayac = 0;

dugme.addEventListener('click', () => {
  sayac += 1;
  dugme.textContent = `${sayac} kez tıklandı`;
});

index.html dosyasına sağ tıklayıp Open with Live Server seçeneğini kullanın. Sayfa genellikle localhost:5500 adresinde açılır ve kaydettiğiniz değişiklikler otomatik yenilenir. Artık konsol deneylerinden dosya tabanlı projelere geçmeye hazırsınız: tarayıcı arayüzü yönetir, Node.js araçları çalıştırır, VS Code ise tüm ekibi aynı masada buluşturur.

``

Olay dinleyicisi nedir?

Olay dinleyicisi, belirli bir DOM elemanında belirli bir olay gerçekleştiğinde çalıştırılmak üzere kaydedilen fonksiyondur. Temel yöntem addEventListener() metodudur:

const buton = document.querySelector("#kaydet");

buton.addEventListener("click", () => {
  console.log("Kaydet düğmesine tıklandı!");
});

Bu kod sürekli çalışan bir döngüyle butonu kontrol etmez. Tarayıcı, dinleyiciyi kaydeder ve tıklama gerçekleştiğinde geri çağırım fonksiyonunu görev kuyruğuna ekler. Böylece gereksiz işlemci kullanımı önlenir.

Bunu basitçe şu maliyet karşılaştırmasıyla düşünebiliriz. Sürekli kontrol yaklaşımında saniyede $n$ kontrol yapılıyorsa yaklaşık maliyet $O(n)$ olur. Olay tabanlı yaklaşımda ise yalnızca gerçekleşen $k$ olay işlenir ve maliyet $O(k)$ seviyesindedir. Genellikle $k \ll n$ olduğundan olay tabanlı tasarım daha verimlidir.

Event loop ve asenkron tepki

JavaScript çoğunlukla tek bir ana iş parçacığında çalışır. Buna rağmen kullanıcı etkileşimleri, zamanlayıcılar ve ağ istekleri birbirini tamamen kilitlemeden yönetilebilir. Tarayıcı olayları izler; hazır geri çağırımları kuyruğa koyar. Event loop, çağrı yığını boşaldığında sıradaki görevi çalıştırır.

Bir tıklama içinde fetch() kullanıldığında ağ yanıtı beklenirken arayüzün donmamasının nedeni budur:

const durum = document.querySelector("#durum");

buton.addEventListener("click", async () => {
  durum.textContent = "Kaydediliyor...";
  buton.disabled = true;

  try {
    const yanit = await fetch("/api/kaydet", { method: "POST" });
    if (!yanit.ok) throw new Error("Sunucu hatası");
    durum.textContent = "Kayıt tamamlandı.";
  } catch (hata) {
    durum.textContent = `İşlem başarısız: ${hata.message}`;
  } finally {
    buton.disabled = false;
  }
});

Burada dinleyici async olarak tanımlanır. await, ağ işleminin sonucunu beklerken JavaScript motorunun diğer olayları ele alabilmesine izin verir. Düğmenin geçici olarak devre dışı bırakılması da art arda gönderilen istekleri engeller.

Olay nesnesi ve klavye kontrolü

Dinleyiciye aktarılan olay nesnesi, etkileşim hakkında ayrıntılar taşır. Klavye olaylarında basılan tuş event.key, tıklamalarda hedef eleman ise event.target üzerinden okunabilir:

const arama = document.querySelector("#arama");

arama.addEventListener("keydown", (event) => {
  if (event.key === "Enter") {
    console.log("Aranan ifade:", event.target.value);
  }
});

Klavye desteği erişilebilirlik açısından kritiktir. Yalnızca fare tıklamasına göre tasarlanan bir arayüz, klavye veya yardımcı teknoloji kullanan kişileri dışarıda bırakabilir.

Yayılma ve olay delegasyonu

Bir olay hedef elemanda doğar ve varsayılan olarak üst elemanlara doğru yayılır; buna bubbling denir. Bu davranış, olay delegasyonu için kullanılabilir. Yüzlerce liste öğesine ayrı dinleyici eklemek yerine üst kapsayıcı dinlenir:

const liste = document.querySelector("#gorevler");

liste.addEventListener("click", (event) => {
  const silButonu = event.target.closest(".sil");
  if (!silButonu) return;

  silButonu.closest("li").remove();
});

Bu yöntem sonradan eklenen öğelerde de çalışır ve dinleyici sayısını azaltır. Gerekirse event.stopPropagation() yayılmayı durdurur; ancak gelişigüzel kullanılması başka bileşenlerin olayları görememesine yol açabilir.

Son olarak, artık gerekmeyen dinleyiciler removeEventListener() ile kaldırılmalıdır. Özellikle tek sayfa uygulamalarında temizlik yapılmaması bellek sızıntılarına ve aynı tepkinin birden fazla çalışmasına neden olabilir. İyi tasarlanmış olay yönetimi; hızlı, erişilebilir ve kullanıcıya gerçekten cevap veren arayüzlerin görünmez kahramanıdır.

``

Promise nedir?

Promise, henüz elimizde olmayan fakat gelecekte elde edilmesi beklenen bir değerin temsilcisidir. Gerçek hayatta restorandan aldığımız sipariş fişine benzetilebilir: Yemek henüz hazır değildir, ancak fiş işlemin başarılı şekilde tamamlanacağını veya bir sorun oluşacağını takip etmemizi sağlar.

Bir Promise üç durumdan birinde bulunur:

Bir Promise yalnızca bir kez sonuçlanır. fulfilled veya rejected durumuna geçtikten sonra tekrar değiştirilemez. Durum geçişini matematiksel olarak $pending \rightarrow fulfilled$ veya $pending \rightarrow rejected$ biçiminde gösterebiliriz. Ancak $fulfilled \rightarrow pending$ gibi bir geri dönüş mümkün değildir.

İlk Promise’imizi oluşturalım

Promise kurucusu, resolve ve reject fonksiyonlarını alan bir yürütücü fonksiyon bekler:

function siparisHazirla(stokVarMi) {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      if (stokVarMi) {
        resolve({ urun: "Kahve", durum: "Hazır" });
      } else {
        reject(new Error("Kahve çekirdeği kalmadı!"));
      }
    }, 1000);
  });
}

Burada setTimeout, bir saniye süren asenkron işlemi taklit eder. İşlem başarılıysa resolve sonuç değerini iletir; başarısızsa reject bir hata üretir. Gerçek projelerde aynı yapı ağ istekleri, veritabanı sorguları veya dosya işlemleri için kullanılabilir.

Promise sonucunu then, catch ve finally metotlarıyla yönetebiliriz:

siparisHazirla(true)
  .then((siparis) => {
    console.log(siparis.durum);
    return `${siparis.urun} müşteriye götürülüyor`;
  })
  .then((mesaj) => console.log(mesaj))
  .catch((hata) => console.error(hata.message))
  .finally(() => console.log("Sipariş işlemi sona erdi"));

Her then yeni bir Promise döndürür. Böylece sonuçlar sırayla aktarılır ve iç içe callback’ler yerine düz bir zincir kurulur. Zincirin herhangi bir noktasında hata oluşursa kontrol en yakın catch bloğuna gider. finally ise sonuç ne olursa olsun çalışır; yükleniyor göstergesini kapatmak gibi temizlik işleri için idealdir.

Callback ve Promise karşılaştırması

Birden fazla işlemi yönetmek

Bağımsız görevleri paralel başlatmak için Promise.all kullanılabilir:

const profil = fetch("/api/profil");
const bildirimler = fetch("/api/bildirimler");

Promise.all([profil, bildirimler])
  .then(([profilYaniti, bildirimYaniti]) => {
    console.log("İki istek de tamamlandı");
  })
  .catch((hata) => console.error("İsteklerden biri başarısız", hata));

İşlemlerin süreleri $t_1$ ve $t_2$ ise paralel toplam süre yaklaşık $T = \max(t_1, t_2)$ olur. Sıralı çalıştırmada ise süre yaklaşık $T = t_1 + t_2$ olacaktır. Bununla birlikte Promise.all, tek bir işlem reddedildiğinde hemen reddedilir. Bütün sonuçları başarı veya hata ayrımıyla görmek için Promise.allSettled; ilk tamamlanan sonucu almak için Promise.race; ilk başarılı sonucu almak için Promise.any tercih edilebilir.

Promise’lar işlemleri sihirli biçimde hızlandırmaz; asıl güçleri zamanlamayı ve hata akışını düzenlemeleridir. Modern async/await sözdizimi de temelde Promise’lar üzerinde çalışır. Bu nedenle Promise mantığını öğrenmek, yalnızca eski callback zincirlerinden kurtulmayı değil, JavaScript’in modern asenkron dünyasını sağlam bir temelle anlamayı sağlar.

Prototip nedir?

Her sıradan JavaScript nesnesi, başka bir nesneye işaret eden dahili bir [[Prototype]] bağlantısına sahip olabilir. Bir özelliğe erişildiğinde JavaScript önce nesnenin kendi özelliklerine bakar. Özellik bulunamazsa prototipe, orada da bulunamazsa prototipin prototipine geçer. Bu yolculuk null değerine ulaşınca sona erer.

Bu bağlantılı yapı prototip zinciri olarak adlandırılır. Arama sürecini basitleştirerek şöyle gösterebiliriz:

Zincirin uzunluğu $n$ ise en kötü durumdaki özellik arama maliyeti yaklaşık $O(n)$ olur. Modern JavaScript motorları çeşitli optimizasyonlar uygulasa da gereksiz derecede uzun zincirler tasarlamak iyi bir fikir değildir.

const canli = {
  nefesAl() {
    return "Nefes alındı!";
  }
};

const kedi = Object.create(canli);
kedi.isim = "Tekir";
kedi.miyavla = function () {
  return "Miyav!";
};

console.log(kedi.isim);       // Kendi özelliği: Tekir
console.log(kedi.nefesAl());  // Prototipten gelir

Burada Object.create(canli), prototipi canli olan yeni bir nesne üretir. kedi içinde nefesAl bulunmadığı için motor, aramaya canli nesnesinde devam eder.

Sınıf tabanlı ve prototip tabanlı yaklaşım

JavaScript’teki class sözdizimi bu modeli ortadan kaldırmaz. Yalnızca prototip mekanizmasını daha tanıdık ve okunabilir biçimde kullanmamızı sağlayan bir sözdizimsel kolaylıktır.

class Hayvan {
  constructor(isim) {
    this.isim = isim;
  }

  tanit() {
    return `Ben ${this.isim}`;
  }
}

class Kopek extends Hayvan {
  havla() {
    return "Hav hav!";
  }
}

const karabas = new Kopek("Karabaş");
console.log(karabas.tanit());

Bu örnekte tanit, her nesneye ayrı ayrı kopyalanmaz. Metot Hayvan.prototype üzerinde tutulur ve örnekler tarafından paylaşılır. Kabaca bellek kullanımı, metodu her örneğe kopyalayan bir yaklaşımda $n \times m$ iken prototip paylaşımında $m + n \times r$ biçiminde düşünülebilir. Burada $m$ metot boyutunu, $r$ ise her örneğin kendi verisini temsil eder.

prototype ile [[Prototype]] aynı şey mi?

Hayır; isim benzerliği sıkça kafa karıştırır. Fonksiyonların prototype özelliği, o fonksiyon new ile çağrıldığında oluşturulacak nesnelerin prototipini belirler. [[Prototype]] ise bir nesnenin başka bir nesneye olan dahili bağlantısıdır.

function Kullanici(ad) {
  this.ad = ad;
}

Kullanici.prototype.selamla = function () {
  return `Merhaba, ben ${this.ad}`;
};

const ada = new Kullanici("Ada");

console.log(Object.getPrototypeOf(ada) === Kullanici.prototype); // true
console.log(ada.hasOwnProperty("ad"));       // true
console.log(ada.hasOwnProperty("selamla")); // false

Prototipi incelemek için standart Object.getPrototypeOf() kullanılmalıdır. Tarihsel __proto__ erişimi yaygın görünse de yeni kodlarda önerilmez.

Sağlam kullanım için ipuçları

Bir özelliğin doğrudan nesneye ait olup olmadığını kontrol etmek için Object.hasOwn(nesne, "özellik") tercih edilebilir. for...in döngüsünün prototipten gelen numaralandırılabilir özellikleri de dolaşabileceği unutulmamalıdır. Ayrıca yerleşik prototiplere, örneğin Array.prototype üzerine rastgele metot eklemek çakışmalara ve zor bulunan hatalara yol açabilir.

Özetle JavaScript kalıtımı, görünmez sınıf şablonlarından çok birbirine bağlanan nesneler üzerine kuruludur. Prototip zincirini anladığınızda new, class, extends ve metot paylaşımı sihir olmaktan çıkar; hepsi aynı mekanizmanın farklı yüzleri hâline gelir.