Bir web sitesinin ziyaretçilere göre farklı tepkiler vermesini, bir kullanıcının yaşına göre uygun içeriği göstermesini ya da hava durumuna göre arka plan rengini değiştirmesini nasıl sağladığımızı hiç merak ettiniz mi? Gündelik hayatta sürekli kararlar alırız; örneğin, “Eğer yağmur yağıyorsa şemsiyemi alırım, aksi halde şemsiyemi evde bırakırım” diye düşünürüz. Yazılım dünyasında da programlarımızın akıllı davranabilmesi ve sadece her defasında aynı statik işlemi yapmak yerine durumlara göre tepki verebilmesi için karar mekanizmalarına ihtiyaç duyarız.
JavaScript dilinde, kodumuzun farklı senaryolara göre farklı yollar izlemesini sağlayan bu çok önemli yapılara koşul ifadeleri (logic statements / conditional statements) denir. Modern ve dinamik web uygulamaları geliştirmek istiyorsanız öğrenmeniz gereken en temel yapı taşlarından biri bu koşul ifadeleridir.
Bu rehberde, ilk defa kod yazacak birinin bile rahatlıkla anlayabileceği şekilde tasarlanmış bol örneklerle; if-else, ternary (üçlü) operatör ve switch mantığını en ince ayrıntılarına kadar inceleyeceğiz.
1. Temel Karar Mekanizması: if ve if else İfadeleri
Kodumuzda kararlar almanın en temel yolu if (eğer) ve if else (eğer değilse) yapılarıdır. Bu yapının çalışma mantığı şablon olarak şuna benzer: Eğer (if) belli bir koşul doğruysa belirli bir eylem gerçekleşir, değilse (else) başka bir eylem gerçekleşir.
Aşağıdaki JavaScript kod örneğinde az önce bahsettiğimiz yağmur (rain) durumunu kod diline nasıl aktardığımıza bakalım:
let rain = true;
if(rain){
console.log("** Dışarı çıkarken şemsiyemi alıyorum **");
} else {
console.log("** Şemsiyemi evde bırakabilirim **");
}
Bu örnekte rain (yağmur) değişkeninin değeri true (doğru) olarak ayarlanmıştır. JavaScript kodu okumaya başladığında if kelimesinin yanındaki parantezlerin içindeki koşulu değerlendirir ve bu ifadenin bir Boolean (true ya da false) olup olmadığına bakar. Değer true olduğu için, sadece if bloğuna ait olan süslü parantezler {} içindeki kod çalıştırılır ve konsola “** Dışarı çıkarken şemsiyemi alıyorum **” yazdırılır. Eğer değişken false olsaydı, kod doğrudan else bloğuna atlayacaktı.
Yeni Başlayanlar İçin Kritik Bir Uyarı: Karşılaştırma yaparken yazılımcıların en sık yaptığı hatalardan biri atama operatörü (=) ile eşitlik kontrolü yapan karşılaştırma operatörlerini (== veya ===) birbirine karıştırmaktır. Örneğin, hobinizin kod yazmak olup olmadığını kontrol etmek için yanlışlıkla if(hobby = "coding") yazarsanız, JavaScript bu koşulu kontrol etmez; onun yerine hobi değişkenine “coding” kelimesini atar. Atama işlemi boş bir metin olmadığı için her zaman true olarak kabul edilir ve kodunuz her zaman bu bloğun içine girerek yanlış çalışmasına yol açar.
2. Birden Fazla Koşul İçin: else if İfadeleri
İki seçenekli (evet/hayır) durumlarda if else harika çalışır. Ancak gerçek dünyada seçenekler genellikle ikiden fazladır. Eğer bir değerin belli bir kategoriye girip girmediğini adım adım kontrol etmek istiyorsanız else if bloklarını kullanmalısınız.
Bunu bir tema parkının bilet fiyatlandırma sistemi olarak düşünebiliriz. Kurallarımız şöyle olsun: Kişi 3 yaşından küçükse giriş ücretsizdir; 3 yaşından büyük ama 12 yaşından küçükse çocuk indirimiyle 5 dolardır; 12 ile 65 yaş arasındaysa tam bilet 10 dolardır; 65 yaş ve üstü ise indirimli 7 dolardır. Bu senaryoyu JavaScript’te şu şekilde yazarız:
let age = 10;
let cost = 0;
let message;
if (age < 3) {
cost = 0;
message = "3 yaş altına giriş ücretsizdir.";
} else if (age < 12) {
cost = 5;
message = "Çocuk indirimiyle ücret 5 dolardır.";
} else if (age < 65) {
cost = 10;
message = "Normal bilet 10 dolardır.";
} else if (age >= 65) {
cost = 7;
message = "Bilet 7 dolardır.";
}
console.log(message);
Bu yapıda kod her zaman yukarıdan aşağıya doğru okunur ve sadece bir (veya sıfır) kod bloğu çalıştırılır. JavaScript 10 yaşındaki bir değer için koşulları yukarıdan kontrol etmeye başlar. age < 3 koşulu yanlıştır. Sonraki koşul olan age < 12 ise doğrudur! Koşul doğru olduğu anda o blok çalıştırılır (ücret 5 dolar olarak belirlenir) ve geri kalan tüm alt koşullar tamamen görmezden gelinir.
3. Tek Satırlık Kısa Kararlar: Koşullu Ternary (Üçlü) Operatör
Bazen sadece iki ihtimali olan çok basit bir işlem için dört satırlık koca bir if else yapısı kurmak kodun uzamasına sebep olur. Bu tür durumlarda JavaScript’in üç işlenen (operand) alan tek operatörü olan Ternary Operatör kullanılır.
Kullanım şablonu şöyledir: koşul ? doğruysa_bu : yanlışsa_bu;. Buradaki soru işaretini “öyleyse”, iki nokta üst üste işaretini ise “değilse” gibi okuyabilirsiniz.
Örneğin, kullanıcının yaşının 18’den küçük olması durumunda mekana girişini reddeden tek satırlık bir kod yazalım:
let access = age < 18 ? "Reddedildi" : "İzin verildi";
Bu kod şuna eşdeğerdir: Eğer age (yaş) 18’den küçükse (true), access değişkenine “Reddedildi” ata; değilse (false) “İzin verildi” ata. Çok pratik olsa da bir uyarı yapalım: Ternary operatörü sadece bu tür çok kısa eylemler için kullanılmalıdır. İç içe geçmiş veya çok sayıda koşul barındıran durumlar için kullanılması kodun okunabilirliğini büyük ölçüde düşüreceğinden tavsiye edilmez.
4. Karmaşık Seçenekleri Yönetmek: switch İfadeleri
if else blokları genellikle Boolean (doğru/yanlış) mantığıyla çalışan sorgular için mükemmeldir. Ancak elinizde kontrol etmeniz gereken dörtten veya beşten fazla belirli değer varsa, switch ifadesini kullanmak çok daha iyi ve temiz bir çözümdür.
Aşağıdaki örnekte, günün belli saatlerindeki aktivitelere göre zamanı belirleyen bir yapı inceleyelim:
switch(activity) {
case "Get up":
console.log("Saat 6:30");
break;
case "Breakfast":
console.log("Saat 7:00");
break;
case "Lunch":
console.log("Saat 12:00");
break;
default:
console.log("Zamanı belirleyemiyorum.");
break;
}
Bu yapı şu şekilde çalışır: switch içine verilen activity değişkeninin değeri, aşağıdaki case (durum) kelimelerinin yanındaki değerlerle sırayla karşılaştırılır. Eğer activity değeri “Lunch” ise konsola “Saat 12:00” yazar.
break Neden Önemlidir? Her bir durumun sonundaki break kelimesini fark etmişsinizdir. Eğer eşleşen bir case bulduktan sonra kodun devamını durdurmak için break komutunu kullanmazsanız, eşleşme sağlansa bile JavaScript alt satırlardaki tüm kodları da acımasızca çalıştırmaya devam edecektir. Bu komut, ilgili işlemi bitirip switch yapısından çıkılmasını sağlar.
default Kullanımı: Bir switch ifadesinin içerisindeki hiçbir case değeri değişkenimiz ile eşleşmezse ne olur? Tıpkı if else mantığındaki en sondaki else gibi, eşleşme bulunamaması ihtimaline karşılık bir default (varsayılan) durumu ekleriz. Eğer kullanıcı aktivite olarak listede olmayan “Netflix İzle” değerini girerse, sistem doğrudan default bloğuna gider ve “Zamanı belirleyemiyorum.” çıktısını verir.
Sıkı Tip Kontrolü (Strict Type Checking): switch kullanırken bilmeniz gereken bir diğer kritik nokta ise karşılaştırmaların her zaman sıkı eşitsizlik (üçlü eşittir === stratejisi) ile yapılmasıdır. Yani bir eşleşme olabilmesi için değişkenin yalnızca değerinin değil, aynı zamanda veri tipinin (metin, sayı vb.) de birebir eşleşmesi şarttır.
5. switch İfadesinde Durumları (Cases) Birleştirmek
Bazen birbirinden farklı senaryolarda sistemin tamamen aynı eylemi gerçekleştirmesini isteyebilirsiniz. Bir if cümlesinde bunun için VEYA (||) operatörü kullanırız. switch ifadesinde ise durumları basitçe alt alta yazarak birleştirmek (combining cases) mümkündür.
Bir okul not sistemini değerlendiren şu örneğe bakalım:
switch(grade) {
case "F":
case "D":
console.log("Kaldınız!");
break;
case "C":
case "B":
console.log("Geçtiniz!");
break;
case "A":
console.log("Harika!");
break;
default:
console.log("Böyle bir not sistemi tanınmıyor.");
}
Eğer öğrencinin notu grade değişkeni “F” veya “D” ise, her iki durum da “Kaldınız!” çıktısını üretecek ve ardından duracaktır. Bu kullanım, geleneksel bir şekilde if(grade === "F" || grade === "D") yazmaktan görsel olarak çok daha sade ve okunabilirdir.
Özetle
JavaScript kodunuzu esnek, duruma uyum sağlayan ve mantıklı programlara dönüştüren kilit unsurlar, öğrendiğimiz bu koşul ifadeleridir. Bir doğru/yanlış durumu varsa veya bir sayı aralığını sorguluyorsanız if else kullanın. Tek satırda bitecek basit bir değer ataması için Ternary (üçlü) operatörü tercih edin. Çok sayıda kesin eşleşme aradığınız menü yönlendirmesi veya kategori seçimi gibi durumlarda ise hayatınızı kolaylaştırması için mutlaka switch ifadesinden yararlanın. Bol bol pratik yaparak bu karar yapılarını zihninizde kalıcı hale getirebilirsiniz!
