Koşullu İfadeler
Koşullu İfadeler (Conditional Statements), JavaScript’te programın akışını belirli koşullara göre yönlendiren temel yapılardır. Tıpkı bir ev inşa ederken hangi odanın nerede olacağını planlamak veya bir mektup yazarken alıcının durumuna göre ifadeleri seçmek gibi, koşullu ifadeler de hangi kod bloğunun çalışacağını belirler.
Kişisel bir web sitesinde, ziyaretçinin oturum durumuna göre farklı mesajlar göstermek için koşullu ifadeler kullanılabilir. Blog sitelerinde popüler veya önerilen içerikleri vurgulamak için, e-ticaret sitelerinde indirim veya kampanyaları uygulamak için ve haber sitelerinde kullanıcıların ilgi alanlarına göre içerik filtrelemek için bu yapılar kritik öneme sahiptir.
Bu eğitimde okuyucu, if, else if, else ve switch yapıları ile mantıksal operatörleri (&&, ||, !) kullanarak gelişmiş koşullu mantık oluşturmayı öğrenecektir. Bu bilgiler, kodu daha okunabilir, sürdürülebilir ve esnek hale getirir. Tıpkı bir odayı dekore ederken detayları planlamak gibi, her koşullu ifade programın akışını düzenler ve uygulamayı kullanıcı deneyimine göre şekillendirir.
Temel Örnek
javascript// Determine user access level
let userRole = "admin"; // possible values: admin, editor, guest
if (userRole === "admin") {
console.log("Hoş geldiniz! Tam erişim hakkınız var."); // admin message
} else if (userRole === "editor") {
console.log("Hoş geldiniz! İçerik düzenleyebilirsiniz."); // editor message
} else {
console.log("Hoş geldiniz! Sadece içerikleri görüntüleyebilirsiniz."); // guest message
}Bu örnekte, userRole değişkeni kullanıcı tipini belirler. if ifadesi, userRole değişkeni “admin” ise bloğu çalıştırır. === operatörü hem değer hem tip kontrolü yapar. Eğer bu koşul sağlanmazsa, else if kullanıcı “editor” ise ilgili bloğu çalıştırır. Tüm diğer durumlar için else bloğu çalışır.
Bu yapı, farklı kullanıcı tipleri için farklı davranışlar uygulamak için idealdir. Operatörler ve mantıksal ifadelerle, bloglarda veya kişisel web sitelerinde içerik gösterimini koşullara göre özelleştirmek mümkün olur. Koşullu ifadeler, program akışını kontrol etmenin temel yoludur ve mantıksal düşünmeyi pekiştirir.
Pratik Örnek
javascript// E-commerce discount system
let userType = "vip"; // possible values: regular, vip
let purchaseAmount = 250; // amount in TL
if (userType === "vip" && purchaseAmount > 200) {
console.log("Tebrikler! %20 indirim kazandınız."); // VIP high purchase
} else if (userType === "vip") {
console.log("Bir sonraki alışverişinizde %10 indirim kazanıyorsunuz."); // VIP lower purchase
} else if (purchaseAmount > 200) {
console.log("Ücretsiz kargo hakkınız var."); // high purchase regular user
} else {
console.log("Özel tekliflerden yararlanmak için alışverişinizi artırın."); // default message
}Bu örnek, e-ticaret senaryosunda koşullu ifadelerin kullanımını gösterir. İlk koşul, kullanıcı VIP ve alışveriş tutarı 200 TL’den fazla ise %20 indirim uygular. İkinci else if VIP kullanıcılar için %10 indirim uygular. Üçüncü else if ise yüksek tutarlı alışveriş yapan normal kullanıcıya ücretsiz kargo sağlar. Son olarak else, tüm diğer durumlar için varsayılan mesaj gösterir.
Koşulların sıralaması önemlidir; doğru sırayla yazılmadığında mantık hataları oluşabilir. Bu yapı, promosyonlar, kullanıcı izinleri ve içerik özelleştirme gibi gerçek dünya uygulamaları için esneklik sağlar. Mantıksal operatörler ile karmaşık koşullar yönetilebilir ve kod okunabilirliği korunur.
İyi uygulamalar: karşılaştırmalarda === kullanmak, karmaşık ifadelerde parantezlerle mantığı netleştirmek, tekrar eden kod bloklarını fonksiyonlara taşımak, her koşulu yorum satırlarıyla açıklamak. Değişkenleri kullanmadan önce doğrulamak hata riskini azaltır ve güvenilirliği artırır.
Yaygın hatalar: else bloğunu atlamak, == kullanmak, aşırı iç içe koşullar yazmak, null veya undefined durumlarını kontrol etmemek. Hata ayıklamak için console.log ile tüm koşulları test edin. Basit koşullardan başlayıp karmaşıklığı artırmak okunabilirliği ve sürdürülebilirliği artırır.
📊 Hızlı Referans
| Property/Method | Description | Example |
|---|---|---|
| if | Koşul doğruysa kod bloğunu çalıştırır | if(age >= 18){console.log("Yetişkin")} |
| else if | Önceki koşullar yanlışsa ve bu doğruysa çalışır | else if(age >= 13){console.log("Ergen")} |
| else | Tüm koşullar yanlışsa çalışır | else{console.log("Çocuk")} |
| switch | Değişken değerine göre blok seçer | switch(day){case "Mon": console.log("Pazartesi"); break;} |
| && | Tüm koşullar doğruysa true döner | if(isVIP && amount>200){...} |
| En az bir koşul doğruysa true döner | if(isVIP | amount>200){...} |
Koşullu ifadeler, dinamik ve etkileşimli uygulamalar geliştirmek için kritik öneme sahiptir. Kod akışını kontrol eder, içerik ve izinleri özelleştirir. if, else if, else, switch ve mantıksal operatörleri etkin kullanmak, kodu okunabilir ve esnek hale getirir.
Bu bilgiler, HTML DOM manipülasyonu ve backend ile iletişimde doğrudan kullanılır; kullanıcı etkileşimlerine göre sayfaları güncelleyebilir veya veri tabanından alınan bilgilere göre kararlar alabilirsiniz. İleri seviye olarak fonksiyonlar, olay yönetimi ve asenkron programlama (Promises/async-await) konularına geçmek faydalıdır. Pratik yapmak ve gerçek projelerde uygulamak bilgiyi pekiştirir.
🧠 Bilginizi Test Edin
Bilginizi Test Edin
Bu konudaki anlayışınızı pratik sorularla test edin.
📝 Talimatlar
- Her soruyu dikkatle okuyun
- Her soru için en iyi cevabı seçin
- Quiz'i istediğiniz kadar tekrar alabilirsiniz
- İlerlemeniz üstte gösterilecek