Mert Özen Her Satırda Daha İleri
Frontend JavaScript Temel — #06

JavaScript Koşul İfadeleri: if/else, Ternary Operatörü ve switch

Mert Özen 3 Kas 2026 8 dk 3 görüntülenme
JavaScript Koşul İfadeleri: if/else, Ternary Operatörü ve switch

if/else if/else zincirini, ternary operatörünü, switch'te fall-through ve break'i, koşullarda truthy/falsy tuzaklarını, erken return fikrini ve okunabilir koşul yazmayı örneklerle görüyoruz.

Sürüm notu: Bu yazıdaki kodlar ES2026 ve güncel tarayıcılar (Chrome, Edge, Firefox, Safari) içindir.

Önce Tahmin Et

Haftanın gününü numarasından bulan küçük bir kod:

const day = 2;
switch (day) {
  case 1:
    console.log("Monday");
  case 2:
    console.log("Tuesday");
  case 3:
    console.log("Wednesday");
  default:
    console.log("Unknown");
}

Bu kod konsola ne yazdırır? Sadece "Tuesday" mi? Okumaya devam etmeden önce bir tahmin yap. Cevabı, switch'in içeride nasıl ilerlediğini konuştuğumuzda vereceğiz.

if: Kodun Yol Ayrımı

Şimdiye kadar yazdığımız kodlar yukarıdan aşağıya, her satırı çalıştırarak ilerledi. Gerçek programlar ise sürekli karar verir: kullanıcı giriş yaptıysa profili göster, sepet boşsa uyarı ver, şifre kısaysa kabul etme. Bunun temel aracı if. Bunu tarayıcının konsoluna yapıştırıp dene:

const temperature = 32;
if (temperature > 30) {
  console.log("It's very hot today, don't forget to drink water.");
}
console.log("Weather checked.");

Parantezin içindeki ifade koşuldur. Motor onu çalıştırır, sonuç truthy ise süslü parantezin içine girer, değilse bloğu atlayıp yoluna devam eder. Son satır ise koşuldan bağımsız; her durumda çalışır. temperature'ı 20 yapıp tekrar dene, ilk mesajın kaybolduğunu göreceksin.

Daha önce gördüğümüz block scope burada da geçerli: if bloğunun içinde let ya da const ile tanımladığın bir değişken, bloğun dışından görülmez.

else ve else if: Birden Fazla Yol

Koşul tutmadığında da bir şey yapmak istiyorsan else eklersin. İkiden fazla seçenek varsa araya else if girer:

const score = 72;
if (score >= 90) {
  console.log("A");
} else if (score >= 70) {
  console.log("B");
} else if (score >= 50) {
  console.log("C");
} else {
  console.log("Fail");
}

Çıktı B. Motor koşulları yukarıdan aşağıya tek tek dener ve ilk tutan koşulun bloğunu çalıştırır; geri kalanlara hiç bakmaz. Bu yüzden sıralama önemli. Koşulları ters sırayla yazıp önce score >= 50'yi kontrol etseydin, 92 alan bir öğrenci de "C" alırdı, çünkü 92 de 50'den büyük ve o koşul ilk sırada tutardı.

Bunu bir otoyoldaki çıkış tabelaları gibi düşün. Her tabelada "bu senin çıkışın mı?" diye sorarsın; ilk "evet" dediğin yerde yoldan çıkarsın ve sonraki tabelaları hiç görmezsin. else ise yolun sonu: hiçbir çıkışı almadıysan oraya varırsın.

Koşullarda Truthy ve Falsy

if'in parantezine bir karşılaştırma yazmak zorunda değilsin. Daha önce gördüğümüz truthy/falsy kuralı burada devreye girer: parantezdeki değer neyse, motor onu truthy ya da falsy olarak yorumlar.

const userName = "";
if (userName) {
  console.log("Hello " + userName);
} else {
  console.log("Please enter your name.");
}

Boş string falsy olduğu için "Please enter your name." görürsün. Bu kısa yazım çok yaygın ve okunaklı, ama falsy listesini aklında tutmazsan seni yanıltabilir:

const discount = 0;
if (discount) {
  console.log("Discount: " + discount + "%");
} else {
  console.log("No discount info.");
}

Burada 0 geçerli bir bilgi, "indirim yok" demek. Ama 0 falsy olduğu için kod "bilgi yok" diyor. Değerin sıfır olabildiği yerlerde niyetini açıkça yaz: if (typeof discount === "number") gibi. Tersi de bir tuzak: boş bir array truthy'dir, yani if (cart) sepet boş olsa bile içeri girer. Array'in dolu olup olmadığını sormak istiyorsan if (cart.length > 0) yazarsın; length'i array'ler yazısında detaylandıracağız.

Ternary: Tek Satırlık Karar

Bazen koşula göre sadece bir değer seçmek istersin. Bunun için dört satırlık if/else yerine ternary operatörünü kullanabilirsin:

const age = 20;
const ageGroup = age >= 18 ? "adult" : "child";
console.log(ageGroup);

Okunuşu şöyle: "koşul doğru mu? Doğruysa bu, değilse şu." Soru işaretinin solu koşul, iki noktanın iki yanı da seçenekler. Ternary JavaScript'te üç parçalı tek operatördür, adı da buradan gelir. if'ten en önemli farkı bir ifade olması, yani bir değer üretmesidir; bu yüzden doğrudan bir değişkene atayabilir, bir console.log'un içine yazabilirsin.

Ternary iki seçenek arasında hızlı bir seçim için idealdir. İç içe kullanmaya başladığında ise okunabilirlik hızla düşer:

const degrees = 25;
const feel = degrees > 30 ? "hot" : degrees > 15 ? "mild" : "cold";
console.log(feel);

Çalışır ve mild yazdırır, ama okuyan kişinin satırı iki kez okuması gerekir. Üç ya da daha fazla seçenek varsa if/else if daha açık bir tercihtir.

switch: Tek Değer, Çok Seçenek

Aynı değişkeni bir dizi sabit değerle karşılaştırıyorsan switch daha düzenli bir yazım sunar:

const fruit = "apple";
switch (fruit) {
  case "apple":
    console.log("Apples are $3");
    break;
  case "banana":
    console.log("Bananas are $5");
    break;
  default:
    console.log("We don't have that fruit.");
}

Motor parantezdeki değeri sırayla her case ile karşılaştırır. Bu karşılaştırma === ile yapılır, yani tip de tutmalı. Eşleşme bulamazsa default'a gider; default zorunlu değildir ama "hiçbiri" durumunu düşündüğünü göstermek için yazmak iyi bir alışkanlıktır.

Şimdi break'in ne işe yaradığına ve baştaki soruya gelelim. Cevap: konsolda alt alta "Tuesday", "Wednesday" ve "Unknown" görürsün. switch eşleşen case'i bulduğunda oradan içeri girer ve aşağı doğru akmaya başlar. Önüne çıkan sonraki case etiketlerini kontrol etmez, bir break görene ya da switch'in sonuna gelene kadar her satırı çalıştırır. Buna fall-through denir.

case'leri bir kaydıraktaki giriş noktaları gibi düşün. Hangi noktadan girdiğini case belirler, ama bir kez kaymaya başladın mı, break seni durdurana kadar aşağı inersin. Tahmin kodunda hiç break olmadığı için 2. noktadan giren kod en alta kadar kaydı.

Fall-through her zaman bir hata değil. Birden fazla değerin aynı sonucu vermesini istediğinde bilerek kullanılır:

const dayName = "Saturday";
switch (dayName) {
  case "Saturday":
  case "Sunday":
    console.log("Weekend");
    break;
  default:
    console.log("Weekday");
}

"Saturday" eşleşir, altında hiç satır olmadığı için "Sunday" case'inin bloğuna akar ve "Weekend" yazdırır. Ne zaman switch, ne zaman if? Bir değeri sabit seçeneklerle birebir karşılaştırıyorsan switch; aralık, büyüklük-küçüklük ya da birden fazla değişken söz konusuysa if.

Erken Çıkış ve Okunabilir Koşullar

Koşullar iç içe girdikçe kod sağa doğru kayar ve okunması zorlaşır. Bunun en etkili ilacı erken çıkış: önce olmaması gereken durumları ele alıp hemen işi bitirmek. Bunu en net şekilde fonksiyonlarla görürüz. Fonksiyonları ilerleyen yazılarda detaylandıracağız; şimdilik return'ü "sonucu ver ve fonksiyondan çık" diye oku:

function calculateDiscount(amount, isMember) {
  if (amount <= 0) {
    return 0;
  }
  if (!isMember) {
    return amount;
  }
  return amount * 0.9;
}
console.log(calculateDiscount(200, true));
console.log(calculateDiscount(200, false));
console.log(calculateDiscount(-5, true));

Çıktı 180, 200 ve 0. Önce geçersiz tutarı, sonra üye olmayanı eleyip asıl işi en sona bıraktık. Aynı mantığı iç içe if/else ile yazsaydın üç kat girinti ve iki else gerekirdi. Bu desene guard clause da denir: kapıdaki görevli uygun olmayanları baştan geri çevirir, içeride sadece asıl iş kalır.

Okunabilirlik için birkaç alışkanlık daha: uzun bir koşulu anlamlı bir isimle değişkene al. if (age >= 18 && hasLicense && !isBanned) yerine önce const canDrive = age >= 18 && hasLicense && !isBanned; yaz, sonra if (canDrive) de. Koşulu olabildiğince olumlu kur; if (!isNotClosed) gibi çift olumsuzlar okuyanın kafasını yorar. Ve tek satırlık bloklarda bile süslü parantezi atlama; sonradan eklenen ikinci satır sessizce bloğun dışında kalır.

Sık Düşülen Tuzaklar

Karşılaştırma yerine atama yapmak. if (x = 5) yazarsan x'e 5 atanır ve 5 truthy olduğu için koşul her zaman tutar. Karşılaştırma için === kullan.

|| ile kısaltmaya çalışmak. if (color === "red" || "blue") "renk kırmızı ya da mavi mi?" diye sormaz. Sağ taraftaki "blue" tek başına bir string ve boş olmadığı için truthy; koşul her renk için tutar. Doğrusu her iki tarafa da karşılaştırmayı yazmak: color === "red" || color === "blue".

switch'te tipi unutmak. switch === kullandığı için switch ("2") içindeki case 2: eşleşmez. Formlardan gelen değerler genellikle string'dir; karşılaştırmadan önce tipi eşitle.

if'ten sonra noktalı virgül koymak. if (false); { ... } yazarsan noktalı virgül boş bir komut olarak if'in gövdesi olur, süslü parantezli blok ise koşuldan bağımsız her seferinde çalışır.

case'ler arasında aynı ismi tanımlamak. Bütün switch tek bir bloktur. İki farklı case'te let message yazarsan SyntaxError: Identifier 'message' has already been declared alırsın. Her case'in gövdesini kendi süslü parantezine alırsan sorun çözülür.

Küçük Bir Deneme

★☆☆ Bir hour değişkeni tanımla (0–23 arası). Saate göre "Good morning", "Good afternoon" ya da "Good evening" yazdıran bir if/else if/else zinciri kur. Sınır değerleri (12, 18) hangi mesaja düşüyor, kontrol et.

★★☆ Çalıştırmadan önce çıktıyı tahmin et, sonra dene:

const choice = "2";
switch (choice) {
  case 1:
    console.log("one");
    break;
  case 2:
    console.log("two");
  case "2":
    console.log("text two");
  default:
    console.log("default");
}

★★★ Bir kargo ücreti hesaplayan shippingFee(amount, city) fonksiyonu yaz: tutar 0 ya da altındaysa 0 döndür, tutar 500 ve üstündeyse kargo bedava olsun, şehir "Istanbul" ise 40, diğer şehirler için 60 döndür. Önce iç içe if/else ile, sonra erken return ile yaz ve iki versiyonu yan yana koyup hangisinin daha kolay okunduğuna karar ver.

Koşullar, kodun hangi yoldan gideceğini seçiyor. Ama bazen aynı yolu defalarca yürümen gerekir: bir listedeki her ürünü yazdırmak, bir sayıyı hedefe ulaşana kadar artırmak. Bir sonraki yazıda döngülere geçiyoruz: for, while, for...of, for...in ve sonsuz döngü tuzağı.