JavaScript temelleri

HTML yapıyı, CSS görünüşü verdi. Davranış JavaScript'in işidir. JavaScript on günde tasarlanmış, sonra dünyanın en çok kullanılan diline dönüşmüş bir dildir; bu geçmiş, bugün hâlâ taşıdığı tuhaflıkların sebebidir. Dili "öğrenmek" birkaç saatlik iştir; güvenilir JavaScript yazmak ise otomatik tip dönüşümünü, hangi karşılaştırmanın ne yaptığını, sayıların neden yanlış toplandığını ve kapsam kurallarını bilmeyi gerektirir. Bu ders sıfırdan başlar ama her başlıkta o başlığın tuzağıyla birlikte ilerler.

01Ne öğreneceksin

02JavaScript nerede çalışır, sayfaya nasıl eklenir

JavaScript, tarayıcının JavaScript motorunda çalışır (Chrome'da V8, Firefox'ta SpiderMonkey). Aynı motor tarayıcı dışında da kullanılır — Node.js budur ve 12. hattın konusudur. Dilin kendisi (ECMAScript) ile tarayıcının sunduğu arayüzler (DOM, fetch, localStorage) farklı şeylerdir: Array ve Math her yerde vardır, document yalnız tarayıcıda.

<!-- Uygulama betiği: ayrıştırmayı durdurmaz, sıra korunur -->
<script src="uygulama.js" defer></script>

<!-- Modül: defer gibi davranır, ayrıca kendi kapsamı ve SIKI MODU vardır -->
<script src="uygulama.js" type="module"></script>

<!-- Bağımsız üçüncü parti: sırası önemsizse -->
<script src="analitik.js" async></script>

1. derste bu tablonun tamamını görmüştün; buradaki pratik kural: uygulama betiklerinde defer ya da type="module". İkisi de belge ayrıştırıldıktan sonra çalıştığı için document.querySelector çağrıların null dönmez.

Öğrenirken en hızlı yol tarayıcı konsoludur (F12 → Console). console.log tek araç değildir: console.table dizileri tablo hâlinde, console.dir nesneyi ağaç hâlinde, console.time/ timeEnd süre ölçer, console.assert yalnız koşul yanlışsa yazar. Değişkeni etiketiyle basmanın kısayolu ise süslü parantezdir: console.log({ toplam, adet }).

03Değişkenler: var, let, const

const vergiOrani = 0.20;      // yeniden ATANAMAZ — varsayılan tercih
let toplam = 0;               // yeniden atanabilir
var eski = "kullanma";        // eski sözdizimi

Yukarı kaldırma (hoisting): bildirimler kapsamın başına taşınmış gibi davranır. var ile bildirilen değişken bildirim satırından önce de erişilebilir ve değeri undefined'dır — bu, hatayı gizler. let ve const de kaldırılır ama bildirime kadar geçici ölü bölgede (temporal dead zone) durur ve erişim hata fırlatır; yani hatayı gösterir.

console.log(a);   // undefined  — sessiz, yanıltıcı
var a = 1;

console.log(b);   // ReferenceError: Cannot access 'b' before initialization
let b = 1;

var'ın fonksiyon kapsamlı olmasının klasik sonucu:

for (var i = 0; i < 3; i++) { setTimeout(() => console.log(i), 0); }
// 3, 3, 3   — tek bir i vardır, döngü bittiğinde 3'tür

for (let i = 0; i < 3; i++) { setTimeout(() => console.log(i), 0); }
// 0, 1, 2   — her yineleme kendi i'sini alır

Bu, 14. derste kapanış (closure) konusunda tekrar karşına çıkacak.

const ne sabitler? Yalnız bağlamayı — yani "bu ad artık başka bir değere işaret edemez". Nesnenin içeriği değişebilir:

const kullanici = { ad: "Ayşe" };
kullanici.ad = "Fatma";       // GEÇERLİ — nesnenin içi değişti
kullanici = {};               // TypeError — bağlama değişemez

const liste = [1, 2];
liste.push(3);                // geçerli
Object.freeze(kullanici);     // yüzeysel dondurma; iç nesneler hâlâ değişebilir

Pratik kural: her değişkeni const ile başlat; yeniden atamak gerektiğinde let'e çevir. var'ı yalnız eski kodu okurken görürsün.

04Tipler

JavaScript dinamik tiplidir: değişkenin değil, değerin tipi vardır ve çalışma anında değişebilir. Yedi ilkel tip ve nesneler vardır:

typeof null === "object" dilin ilk sürümünden kalma bir hatadır ve geriye dönük uyumluluk için düzeltilmemiştir. İkinci yanılgı: dizi de nesnedir, yani typeof [] === "object". Doğru kontroller:

Array.isArray(x)                    // dizi mi
x === null                          // null mı
typeof x === "function"             // fonksiyon mu
Object.prototype.toString.call(x)   // "[object Date]", "[object Map]" … kesin tip

null ile undefined ayrımı anlamsaldır: undefined "henüz değer yok" (atanmamış değişken, dönmeyen fonksiyon, olmayan özellik), null "bilinçli olarak boş" demektir. API sözleşmelerinde (6. hat) bu ayrım önemlidir: alan yoksa undefined, alan var ama değeri boşsa null. JSON'da undefined yoktur — JSON.stringify undefined değerli özellikleri atlar, null'ları yazar. Bu, "alanı sildim ama sunucuya gitmedi" hatalarının kaynağıdır.

05Sayılar

JavaScript'te tek bir sayı tipi vardır ve IEEE 754 çift duyarlıklı kayan noktadır — yani C#'taki int/decimal ayrımı yoktur. Sonuçları bilinmelidir:

0.1 + 0.2                 // 0.30000000000000004
0.1 + 0.2 === 0.3         // false
(0.1 + 0.2).toFixed(2)    // "0.30"  — DİZE döner

9007199254740992 + 1      // 9007199254740992  — güvenli sınırın ötesi
Number.MAX_SAFE_INTEGER   // 9007199254740991

typeof NaN                // "number"
NaN === NaN               // false  — kendisine bile eşit değil
Number.isNaN(x)           // doğru kontrol
[10, 1, 2].sort()         // [1, 10, 2] — VARSAYILAN SIRALAMA DİZEYE GÖRE

Dizeyi sayıya çevirmenin üç yolu ve farkları:

Number("42")        // 42        Number("42abc") → NaN   (tamamı sayı olmalı)
parseInt("42abc")   // 42        baştan okur, ilk geçersizde durur
parseFloat("3.9km") // 3.9
+"42"               // 42        kısa ama okunurluğu düşük

Number("")          // 0   ← boş dize SIFIRA döner, bu yüzden form girdisinde tuzaktır
parseInt("08")      // 8   (modern; eski tarayıcılarda sekizlik sayılırdı — taban yazmak iyi alışkanlık)
parseInt("0.9")     // 0   ← YUVARLAMAZ, keser

06Dizeler

const ad = "Ayşe";
const mesaj = `Sayın ${ad}, başvurunuz ${new Date().getFullYear()} yılında alınmıştır.`;

// Dizeler DEĞİŞTİRİLEMEZ: her işlem YENİ dize üretir
let s = "abc";
s[0] = "X";        // sessizce hiçbir şey yapmaz
s = "X" + s.slice(1);

"  boşluklu  ".trim()
"a,b,c".split(",")            // ["a","b","c"]
"2026-114".padStart(10, "0")
"ara".includes("r")           // true
"Başvuru".startsWith("Baş")   // true
"abc".at(-1)                  // "c"  — negatif indeks

07Operatörler ve otomatik dönüşüm

JavaScript, farklı tipleri karşılaştırırken ya da toplarken sessizce dönüştürür. Dilin en çok eleştirilen yanı budur ve kuralları ezberlenmez — kaçınılır.

"5" + 3       // "53"   ← + varsa ve bir taraf dizeyse BİRLEŞTİRME
"5" - 3       // 2      ← diğer aritmetik operatörler sayıya çevirir
"5" * "2"     // 10
[] + {}       // "[object Object]"
[] == false   // true

Kural: her zaman === kullan. Tek meşru istisna x == null'dır; bu tek yazımla hem null hem undefined kontrol edilir ve yaygın kabul görür.

Doğruluk değeri

Koşulda kullanılan her değer bir mantıksal değere çevrilir. Yanlış sayılan yalnız yedi değer vardır, gerisi doğrudur:

false, 0, -0, 0n, "", null, undefined, NaN     ← yanlış (falsy)

// Doğru sayılanlar arasında ŞUNLAR DA VAR — sık şaşırtır:
[]        // boş dizi   → doğru
{}        // boş nesne  → doğru
"0"       // "0" dizesi → doğru
"false"   //            → doğru

Boş bir diziyi if (liste) ile kontrol etmek her zaman doğru döner; doğrusu if (liste.length)'tir.

||, ??, ?.

const adet1 = girdi || 10;    // girdi YANLIŞ sayılan her şeyse 10 → 0 ve "" de kaçar!
const adet2 = girdi ?? 10;    // yalnız null/undefined ise 10 → 0 korunur

ayarlar.sayfa ??= 1;          // yoksa ata (birleşik atama)

kullanici?.adres?.sehir       // ara değer null/undefined ise undefined döner, hata fırlatmaz
kullanici.kaydet?.()          // metot varsa çağır
liste?.[0]

|| ile ?? farkı gerçek hata üretir: kullanıcı bir sayı alanına 0 yazdığında girdi || 10 onu 10 yapar; sıfır geçerli bir değerdir ve sessizce kaybolur. Varsayılan değer verirken ?? kullan.

?.'in sınırı: yalnız null ve undefined'ı korur. Hatanın kaynağını gizleyebildiği için zincirin tamamına serpiştirmek iyi bir fikir değildir — veri gerçekten isteğe bağlıysa kullan, "olmalıydı ama yok" durumunda hata görmek daha iyidir.

08Koşullar ve döngüler

if (puan >= 85)      { durum = "yüksek"; }
else if (puan >= 50) { durum = "geçer"; }
else                 { durum = "yetersiz"; }

const etiket = puan >= 50 ? "geçti" : "kaldı";     // üçlü operatör

switch (tur) {
  case "yeni":
  case "yenileme":            // birleşik durum — bilinçli düşme
    islet();
    break;                    // BREAK UNUTULURSA sonraki case'e DÜŞER
  default:
    hata();
}

switch'in iki tuzağı: (1) break unutmak sessizce sonraki bloğu da çalıştırır; (2) karşılaştırma === iledir — switch("1") ile case 1: eşleşmez. Ayrıca case içinde let/const bildirmek için blok parantezi gerekir (case "x": { const a = 1; break; }).

const notlar = [70, 85, 92];

for (const n of notlar) { if (n > 90) break; }        // değer
for (const i in notlar) { console.log(i); }            // "0","1","2" — DİZE anahtar!
notlar.forEach((n, i) => console.log(i, n));
for (const [i, n] of notlar.entries()) { }             // hem indeks hem değer

for...in neden dizide kullanılmaz: anahtarları dize olarak verir, sırayı garanti etmez ve kalıtılan özellikleri de dolaşır. Nesne dolaşmak istiyorsan modern karşılığı Object.keys/values/entries ile for...of'tur.

for (const [anahtar, deger] of Object.entries(nesne)) { … }

forEach'in iki sınırı pratikte önemlidir: içinde break kullanılamaz (erken çıkmak için some/find gerekir) ve await beklenmez — asenkron işlemde döngü bitmeden ilerlenir. 17. derste göreceğin bu tuzak, "veriler eksik geliyor" hatalarının klasik kaynağıdır.

09Sıkı mod ve savunma alışkanlıkları

"use strict";     // dosya ya da fonksiyon başında

x = 5;            // sıkı modda ReferenceError — sıkı mod olmadan KÜRESEL değişken yaratırdı

Sıkı mod, dilin bazı sessiz hatalarını gerçek hataya çevirir: bildirilmemiş değişkene atama, salt okunur özelliğe yazma, aynı ada sahip iki parametre. ES modülleri (type="module") ve sınıflar zaten sıkı moddadır; yani modern kodda ayrıca yazmana genelde gerek kalmaz.

Bilinmesi gereken son davranış otomatik noktalı virgül eklemedir: JavaScript satır sonlarına noktalı virgülü kendisi ekler, ama birkaç durumda yanlış yerde ekler:

return
  { ad: "Ayşe" };     // undefined döner! return'den sonra satır sonu → noktalı virgül eklenir

Bu yüzden return ile değeri aynı satıra yaz. Genel olarak biçimlendirmeyi elle tartışmak yerine bir biçimlendiriciye bırakmak (editörde kaydederken otomatik biçimlendirme) ve statik bir denetleyici kullanmak yaygın ekip pratiğidir; ikisi de bu dersteki tuzakların çoğunu yazarken yakalar. Tipleri derleme anında yakalayan çözüm ise 9. hattın konusu olan TypeScript'tir — bu hattaki tuzakların büyük kısmının var oluş sebebi odur.

10Mini alıştırma — Tuzakları konsolda gör

11Kendini sına

var, let ve const arasındaki farklar nelerdir?

Kapsam: var fonksiyon kapsamlıdır — bir if ya da for bloğu içinde bildirilse bile tüm fonksiyonda görünür; let ve const blok kapsamlıdır. Yeniden atama: const yeniden atanamaz, diğer ikisi atanabilir. Yukarı kaldırma: üçü de kaldırılır, ama var bildirimden önce undefined değeriyle erişilebilir (hatayı gizler), let ve const geçici ölü bölgede durur ve erişim ReferenceError fırlatır (hatayı gösterir). Küresel nesne: küresel kapsamdaki var window'a özellik ekler, diğerleri eklemez. Klasik örnek: var'lı bir döngüde setTimeout ile indeks yazdırırsan hep son değeri (3, 3, 3) görürsün — tek bir değişken vardır; let ile her yineleme kendi bağlamasını alır (0, 1, 2). Son olarak const yalnız bağlamayı sabitler: nesnenin içeriği değiştirilebilir (kullanici.ad = "..." geçerlidir), bunu da engellemek için Object.freeze gerekir ve o da yüzeyseldir. Pratik: her şeye const ile başla, gerekince let'e çevir, var kullanma.

== ile === farkı nedir? Hangisini kullanırsın?

=== katı eşitliktir: önce tipe bakar, tipler farklıysa doğrudan false döner. == gevşek eşitliktir: tipler farklıysa otomatik dönüşüm yapıp karşılaştırır ve bu, sezgiye aykırı sonuçlar üretir — 0 == false, "" == 0, "1" == 1, [] == false hepsi true'dur. Dönüşüm kuralları karmaşıktır ve ezberlenmez; kaçınılır. Kural: her zaman === (ve !==) kullan. Tek yaygın kabul gören istisna x == null'dır: bu tek yazım hem null hem undefined'ı yakalar ve x === null || x === undefined yazmaktan kısadır. İki ek not: NaN hiçbir şeye, kendisine bile eşit değildir — kontrol Number.isNaN() ile yapılır. Ve nesneler referansa göre karşılaştırılır: {a:1} === {a:1} false'tur; içerik karşılaştırması için elle dolaşmak ya da bir yardımcı kullanmak gerekir.

0.1 + 0.2 === 0.3 neden false? Para tutarlarını nasıl saklarsın?

JavaScript'te tek bir sayı tipi vardır ve IEEE 754 çift duyarlıklı kayan noktadır. 0.1 ve 0.2 ikilik tabanda tam olarak temsil edilemez (tıpkı 1/3'ün onluk tabanda 0,333… olması gibi); toplam 0.30000000000000004 çıkar. Bu JavaScript'e özgü bir kusur değildir, ikili kayan noktalı her dilde aynıdır. Sonuçlar: eşitlik karşılaştırması yapılmaz — gerekiyorsa Math.abs(a - b) < Number.EPSILON gibi bir tolerans kullanılır; toFixed() dize döndürür, sayı değil. Para için iki doğru yol vardır: (1) tutarı en küçük birimde tam sayı tutmak (kuruş: 19,90 TL → 1990) ve yalnız gösterirken bölmek — güvenli tam sayı sınırı (Number.MAX_SAFE_INTEGER, ~9·10¹⁵) aşılmadığı sürece kesindir; (2) ondalık aritmetik kütüphanesi kullanmak. Çok büyük tam sayılar için BigInt vardır ama ondalık çözmez. Sunucu ve veritabanı tarafında karşılığı C#'ta decimal, SQL'de DECIMAL/NUMERIC'tir. Gösterimde elle nokta-virgül değiştirmek yerine Intl.NumberFormat("tr-TR", …) kullanılır.

|| ile ?? arasındaki fark nedir? Hangi durumda gerçek hata üretir?

|| sol taraf yanlış sayılan (falsy) herhangi bir değerse sağ tarafı döndürür. Yanlış sayılan değerler: false, 0, -0, 0n, "", null, undefined, NaN. ?? (boş değer birleştirme) ise yalnız null ve undefined için sağ tarafı döndürür. Gerçek hata şurada çıkar: kullanıcı bir sayı alanına 0 yazdığında ya da bir metin alanını bilerek boş bıraktığında, const adet = girdi || 10 bu geçerli değerleri varsayılanla değiştirir — sıfır adet sipariş 10 adede döner, boş bırakılan açıklama varsayılan metne. Aynı durum false için de geçerlidir: bir ayarın kapalı olması ayar || true ile sessizce açık hâle gelir. Kural: varsayılan değer verirken ??, mantıksal "veya" gerektiğinde ||. Aynı aileden ??= ("yoksa ata") ve ?. (isteğe bağlı zincir) vardır; ?. de yalnız null/undefined'ı korur ve her yere serpiştirilmesi hatanın kaynağını gizlediği için önerilmez.

12Sınav köşesi