JavaScript Rehberi: Kod Örnekleriyle Temel Kılavuz

Tarayıcıda F12'ye basıp konsolu açtığınızda, yazdığınız her JavaScript satırı Enter'a bastığınız an çalışır; ne derleme adımı vardır ne ek bir kurulum. Bu anlık tepki, dilin öğrenilmesi en kolay dillerden biri sayılmasının başlıca sebebidir. Bu rehber, HTML ve CSS'in üzerine gelen üçüncü katmanı gerçek kod örnekleriyle baştan anlatıyor.

JavaScript tam olarak ne işe yarar?

HTML bir sayfanın iskeletini kurar, CSS o iskeletin görünümünü belirler. Sayfaya davranış katan katman JavaScript'tir: bir düğmeye basıldığında ne olacağına, bir formun hangi alanları doldurulmadan gönderilemeyeceğine, sayfa yenilenmeden hangi verinin sunucudan çekileceğine o karar verir.

Somut bir örnek: bir e-ticaret sitesinde ürün kartının kutusunu HTML oluşturur, kartın rengini ve boşluklarını CSS belirler. Kullanıcı "Sepete Ekle" düğmesine tıkladığında sepetteki ürün sayısının sayfa yenilenmeden anında değişmesini sağlayan JavaScript'tir. Bu net sınır, bir şey bozulduğunda hatanın hangi katmanda aranacağını da belirler.

JavaScript başlangıçta yalnızca tarayıcıda çalışan bir dildi, bugün öyle değil. Node.js sunucu tarafında, React Native mobil uygulamalarda, Electron ise masaüstü programlarında (VS Code dahil) aynı dili çalıştırıyor. Bir geliştirici artık tek dille hem arayüzü hem sunucu tarafındaki mantığı yazabilir; bu yaklaşıma "full-stack JavaScript" deniyor.

Python ya da Java'dan farklı olarak JavaScript ayrı bir derleme adımı istemez: kaynak kodu doğrudan tarayıcının ya da Node.js'in içindeki motor çalıştırır. Chrome'daki V8 motoru, kodu çalıştırmadan hemen önce makine koduna çevirir. Bu sayede bir dosyayı kaydedip sayfayı yenilemek çoğu zaman yeterli olur; HTML ve CSS'le birlikte sayfayı statikten etkileşimliye taşıyan üçüncü katman da böyle kurulur.

Dilin nasıl çalıştığını görmenin en hızlı yolu tarayıcı konsoludur. Chrome ya da Firefox'ta F12'ye basıp Console sekmesine geçmek, bu yazıdaki örnekleri tek tek denemek için yeterlidir.

JavaScript'in ECMAScript adında bir dil standardı vardır; her yıl yeni bir sürümü yayımlanır ve tarayıcılar bu yenilikleri zamanla destekler. 2015'te gelen ES6, bu yazıda kullanılan let/const, ok fonksiyonları ve template literal gibi sözdizimini dile kazandırdı.

Değişkenler ve veri tipleri nasıl kullanılır?

JavaScript'te değer saklamak için üç anahtar kelime kullanılır: var, let ve const. Eski kodlarda var'a hâlâ rastlanır ama güncel projelerde neredeyse hiç tercih edilmez, çünkü var'ın blok değil fonksiyon kapsamına sahip olması beklenmedik hatalara yol açar.

let kullaniciAdi = "ayse123";
const dogumYili = 1998;
let girisYapildi = false;

kullaniciAdi = "ayse_dev"; // let ile değer değiştirilebilir
// dogumYili = 1999; // HATA: const yeniden atanamaz

let ile tanımlanan bir değişkenin değeri sonradan değiştirilebilir, const ile tanımlananın değişemez. Kural basittir: değişmeyecek her şey const, değişecek olan let ile tanımlanır.

Bu ayrım, kodu ilk kez okuyan birine bile hangi değişkenin sabit kalacağını hemen gösterir; const gördüğünde o değerin fonksiyon boyunca değişmeyeceği anlaşılır. Deneyimli geliştiricilerin çoğu varsayılan olarak const kullanır, değişkenin gerçekten değişmesi gereken yerlerde let'e geçer.

JavaScript'te temel veri tipleri de sınırlı ve nettir: metin (string), sayı (number), mantıksal değer (boolean), dizi (array), nesne (object) ve henüz değer atanmamış undefined. Tip belirtmeye gerek yoktur, motor değeri gördüğü anda tipini kendisi belirler.

Metin birleştirirken tek ya da çift tırnak yerine ters tırnak (backtick) kullanmak kodu daha okunur yapar. Template literal denen bu sözdizimi, ${} içine doğrudan değişken yazmaya izin verir:

const urunAdi = "Kablosuz Mouse";
const stokAdedi = 12;

console.log(`${urunAdi} için stokta ${stokAdedi} adet var.`);

Bu yöntem, eski "metin" + degisken + "metin" birleştirmesine göre hem daha az hataya açıktır hem daha kolay okunur. Değişken isimlendirmede yaygın kural camelCase'dir: kullaniciAdi örneğinde olduğu gibi ilk kelime küçük harfle başlar, sonraki kelimelerin ilk harfi büyük yazılır.

Fonksiyonlar ve koşullar kod akışını nasıl yönetir?

Fonksiyon, tekrar tekrar kullanılacak bir kod bloğuna isim vermenin yoludur. Aynı hesaplamayı on farklı yerde kopyalamak yerine bir kez yazıp çağırmak hem hatayı azaltır hem kodu okunur kılar.

Fonksiyon adı da önemlidir. kdvHesapla gibi ne yaptığını açıkça söyleyen bir isim, altı ay sonra o koda dönen bir geliştiricinin yorum satırı okumadan işlevi anlamasını sağlar.

function kdvHesapla(fiyat, oran = 0.20) {
  return fiyat + fiyat * oran;
}

console.log(kdvHesapla(100)); // 120
console.log(kdvHesapla(100, 0.10)); // 110

Ok fonksiyonu (arrow function) sözdizimi kısa işlemlerde daha az yazım gerektirir ve günümüz kod tabanlarının çoğunda tercih edilir:

const kdvHesapla = (fiyat, oran = 0.20) => fiyat + fiyat * oran;

İkinci parametredeki oran = 0.20 ifadesi varsayılan değer atamasıdır; fonksiyon çağrılırken bu parametre boş bırakılırsa devreye girer.

Koşullu ifadeler, programın hangi durumda ne yapacağına karar verir. if/else yapısı en temel karar mekanizmasıdır:

const yas = 17;

if (yas >= 18) {
  console.log("Reşit");
} else if (yas >= 13) {
  console.log("Genç");
} else {
  console.log("Çocuk");
}

Karşılaştırma yaparken === kullanmak önemlidir, çünkü == tip dönüşümü yaparak "5" == 5 gibi beklenmedik sonuçlar üretebilir. === hem değeri hem tipi karşılaştırır, bu yüzden güvenli tercih budur.

Mantıksal operatörler (&&, ||, !) koşulları birleştirmek için kullanılır. yas >= 18 && aktif === true ifadesi her iki koşul da doğruysa çalışır, || ise koşullardan en az biri doğru olduğunda devreye girer. if (!kullaniciAdi) gibi bir kontrol ise değişken boş string, null veya undefined olduğunda çalışır ve formdan gelen eksik veriyi yakalar.

Diziler ve nesneler veriyi nasıl organize eder?

Gerçek uygulamalarda veri tek başına dolaşmaz, dizi ya da nesne içinde taşınır. Dizi sıralı bir liste tutar, nesne ise anahtar-değer çiftleriyle bir varlığı tanımlar.

Bir API'den dönen yanıt neredeyse her zaman nesne dizisi biçimindedir: her ürün bir nesnedir, tüm ürünler de bu nesnelerin oluşturduğu bir dizidir.

const sepet = ["klavye", "mouse", "monitör"];

const urun = {
  isim: "Mekanik Klavye",
  fiyat: 1450,
  stokta: true
};

console.log(urun.isim); // "Mekanik Klavye"
console.log(sepet[0]); // "klavye"

Dizi üzerinde gezinmek için klasik for döngüsü hâlâ çalışır, ama forEach ve map gibi dizi metotları aynı işi daha az kodla yapar:

const fiyatlar = [1450, 320, 890];

fiyatlar.forEach((fiyat) => {
  console.log(`Ürün fiyatı: ${fiyat} TL`);
});

const kdvliFiyatlar = fiyatlar.map((fiyat) => fiyat * 1.20);
console.log(kdvliFiyatlar); // [1740, 384, 1068]

• forEach: her eleman için bir işlem çalıştırır, yeni dizi döndürmez.
• map: her elemanı dönüştürüp yeni bir dizi döndürür.
• filter: belirli koşulu sağlayan elemanları eler.
• reduce: diziyi tek bir değere indirger, toplam hesaplamak gibi.

Bu dört metot günlük JavaScript yazımının büyük bölümünü oluşturur ve klasik döngülere göre çok daha az hataya açıktır. Nesnenin içindeki bir değere erişmenin iki yolu vardır: nokta notasyonu (urun.fiyat) ve köşeli parantez notasyonu (urun["fiyat"]). Anahtar adı bir değişkenden geliyorsa köşeli parantez zorunlu hale gelir, çünkü nokta notasyonu yalnızca sabit isimlerle çalışır.

DOM ile sayfa nasıl etkileşimli hale gelir?

Tarayıcı HTML'i yüklerken bellekte bir ağaç yapısı kurar: DOM (Document Object Model). JavaScript bu ağaca erişip elemanları okuyabilir, değiştirebilir, silebilir ya da yenisini ekleyebilir.

Bu ağaç, HTML dosyasındaki etiketlerin birebir kopyası değildir; tarayıcının bellekte tuttuğu ve JavaScript'in değiştirebildiği canlı bir kopyadır.

const buton = document.querySelector("#gonder-btn");
const mesajKutusu = document.querySelector(".mesaj");

buton.addEventListener("click", () => {
  mesajKutusu.textContent = "Form gönderildi.";
  mesajKutusu.classList.add("basarili");
});

document.querySelector, CSS seçici sözdizimiyle tek bir elemanı bulur; birden fazla eleman gerektiğinde querySelectorAll kullanılır ve sonuç bir liste olarak döner. addEventListener ise o elemana bir olay dinleyicisi bağlar: tıklama, yazı yazma, form gönderme gibi kullanıcı hareketlerini yakalar.

Bu iki fonksiyon birlikte, statik bir HTML sayfasını etkileşimli bir arayüze çeviren temel mekanizmayı oluşturur. React, Vue ve Svelte gibi framework'ler arka planda hâlâ aynı DOM API'sini kullanır; farkları, bu işlemleri soyutlayıp geliştiriciye daha az tekrar yaptırmalarıdır.

addEventListener yalnızca tıklamayı değil, input (yazı kutusundaki her tuş vuruşu), submit (formun gönderilmesi), scroll (sayfa kaydırma) gibi düzinelerce olayı dinleyebilir. Yeni başlayanların sık yaptığı hata, script etiketini <head> içine koyup DOM henüz oluşmadan elemana erişmeye çalışmaktır; script'i </body> kapanışından hemen önce eklemek bu hatayı önler.

Asenkron işlemler ve API çağrıları nasıl yapılır?

Bir sunucudan veri çekmek zaman alır: ağ gecikmesi, sunucu yükü, kullanıcının internet hızı devreye girer. JavaScript bu bekleme sırasında sayfayı kilitlememek için asenkron çalışır; fetch ile başlatılan bir istek arka planda sürerken kullanıcı sayfayla etkileşime devam edebilir.

async function kullaniciGetir(id) {
  try {
    const yanit = await fetch(`https://jsonplaceholder.typicode.com/users/${id}`);
    if (!yanit.ok) {
      throw new Error(`Sunucu hatası: ${yanit.status}`);
    }
    const veri = await yanit.json();
    console.log(veri.name, veri.email);
    return veri;
  } catch (hata) {
    console.error("İstek başarısız:", hata.message);
  }
}

kullaniciGetir(1);

async anahtar kelimesi bir fonksiyonu asenkron olarak işaretler, await ise Promise'in sonucunu bekler ama bu bekleme sırasında tarayıcı donmaz. try/catch bloğu, ağ hatası ya da sunucu tarafındaki 404/500 gibi durumları yakalayıp uygulamanın çökmesini engeller.

Eski kod tabanlarında aynı işlem .then() zinciriyle yazılırdı; async/await aynı sonucu daha okunur bir sırayla verir. MDN'in async function dokümantasyonu bu konudaki tüm kenar durumları örnekleriyle listeler.

Bu asenkron yapının altında Event Loop denen bir mekanizma çalışır. JavaScript tek iş parçacığıyla (single-threaded) çalışır ama bekleyen ağ isteklerini bir kenara koyup diğer kodu çalıştırmaya devam eder; bu sayede uzun süren bir istek, sayfadaki düğmelerin tıklanamaz hale gelmesine yol açmaz.

Gerçek projelerde tek bir API çağrısı nadiren yeterli olur. Promise.all, birden çok isteği paralel başlatıp hepsinin bitmesini tek seferde bekler; bu yöntem art arda await yazmaktan çok daha hızlı çalışır.

Framework'ler saf JavaScript'e ne katar, nasıl öğrenilir?

Saf JavaScript (genelde "vanilla JS" denir) küçük sitelerde yeterlidir, ama onlarca bileşenin birbirini beslediği büyük uygulamalarda DOM'u elle güncellemek hataya çok açık hale gelir. React, Vue ve Svelte gibi framework'ler veriyi bir kez tanımlayıp arayüzün o veriye göre kendini otomatik güncellemesini sağlar. Buna "declarative" (bildirimsel) yaklaşım denir: hangi adımların izleneceği değil, sonucun ne olması gerektiği yazılır.

// React ile basit bir sayaç bileşeni
function Sayac() {
  const [adet, setAdet] = React.useState(0);
  return React.createElement(
    "button",
    { onClick: () => setAdet(adet + 1) },
    `Tıklama: ${adet}`
  );
}

Bu kod parçası document.querySelector ve addEventListener ile yapılan işin aynısını yapar; fark, DOM güncellemesini React'in otomatik yönetmesidir. Node.js tarafında Express gibi kütüphaneler sunucu tarafı API yazımını birkaç satıra indirger, npm (Node Package Manager) de bu kütüphaneleri tek komutla projeye ekler.

Framework seçimi, projenin büyüklüğüyle orantılıdır. Küçük bir açılış sayfasında saf JavaScript yeterli olur; ekran sayısı arttıkça, örneğin çok sayfalı bir yönetim panelinde, React ya da Vue geliştirme süresini kısaltır. Framework öğrenmeye erken girişmek yaygın bir hatadır, çünkü React'in useState gibi kancaları bu yazıda anlatılan değişken ve DOM mantığının üzerine kuruludur.

Kurulum gerektirmeyen tek araç tarayıcı konsoludur; her yeni kavramı orada denemek en hızlı geri bildirimi verir. Kod editörü olarak Visual Studio Code başlangıç için yeterlidir, Sources sekmesi ise kodun satır satır nasıl çalıştığını görmek için kullanılır. Bir satıra "breakpoint" koymak, kod orada durduğunda değişkenlerin o anki değerini incelemeyi sağlar ve console.log yazıp sayfayı sürekli yenilemekten çok daha hızlıdır.

Öğrenme sırası şu adımları izlerse temel daha sağlam kurulur:

1. Tarayıcı DevTools (F12) ile konsolu ve Elements sekmesini keşfetmek.
2. Küçük, tek dosyalık HTML+JS projeleriyle DOM manipülasyonunu denemek.
3. MDN Web Docs JavaScript rehberi üzerinden temel sözdizimini sırayla okumak.
4. Node.js kurup terminalde node dosya.js komutuyla script çalıştırmayı denemek.
5. Bir framework'e (React veya Vue) geçmeden önce saf JavaScript ile en az birkaç küçük proje bitirmek.

En hızlı ilerleme yöntemi, her yeni kavramı gerçek bir mini projede kullanmaktır. Bir yapılacaklar listesi uygulaması let/const, diziler, forEach, DOM olayları ve localStorage'ı tek başına kapsar; bu tek proje, dağınık onlarca "temel bilgiler" videosundan daha kalıcı öğretir.

Bu proje bittiğinde sıradaki adım, aynı yapılacaklar listesini fetch ile gerçek bir API'ye bağlayıp veriyi tarayıcı yerine sunucuda saklamaktır. O noktada değişkenler, fonksiyonlar, diziler, DOM ve asenkron çağrılar tek bir akışta birleşir; bu da JavaScript'in gerçek projelerde nasıl çalıştığını gösteren en net örnektir.

Yazan Celil Uyanikoglu

25 yıldır bilgi işlem piyasasında farklı dallarda uzmanlaşan bir Bilgisayar Mühendisi