Merhaba arkadaşlar serinin bu bölümünde JavaScript'de conditional statement'ları inceleyeceğiz.
Yazıda:
-
Conditional statement kavramına ve kullanım amacına
-
Conditional statement türlerine
-
Aralarındaki farklara
-
?
(Ternary) operatörünün kullanımına -
Bazı yararlı ip uçlarına
Değineceğim.
İyi okumalar dilerim.
Bazen belirlediğimiz bir koşulun veya matematiksel ifadenin sonucuna göre program içerisinde akışı değiştirmek ve farklı işlemler yapmak isteyebiliriz. Bu gibi durumlarda conditional statement'ları kullanırız.
Örnek
%%script node
const age = 18;
/**
* Örnekte yaşın 18 rakamına eşit veya büyük olması durumunda alkol satışına izin verildiği
* görülüyor.
*
* age değişkeninin içeriğini değiştirerek sonuçları gözlemleyebilirsiniz.
*
* 💡 ? (Ternary operatörünü kullandık.)
*/
console.log(`Alkol satışı yapılabilir mi?: ${18 <= age ? "Evet alkol satışı yapılabilir." : "Hayır alkol satışı yapılamaz."}`);
Alkol satışı yapılabilir mi?: Evet alkol satışı yapılabilir.
Yukarıda age
değişkeninin 18 rakamına eşit veya büyük olması halinde alkol satışı yapılabileceğini gösteren kod bloğu örneğini görüyoruz.
JavaScript'de aşağıdaki conditional statement'ları kullanabilir ve program akışını değiştirebiliriz:
-
if
-
else
-
else if
-
switch
Şimdi bunları inceleyelim.
if
statement'ı içerisinde oluşturduğumuz koşulun gerçekleşmesi halinde if
bloğuna ait kodlar çalışacaktır.
Prototype:
if (condition1) {
// If statement'ı condition1 ile uyumlu ise buradaki kod bloğu çalışır.
}
Bir önceki örneği if
statement'ı ile oluşturalım.
Örnek
%%script node
const age = 18;
/**
* age değeri 18 rakamına eşit olduğundan if statement'ı içerisindeki koşul gerçekleşmiş olacak ve if bloğuna ait
* kodlar çalıştırılacaktır.
*/
if (18 <= age) {
console.log("Evet alkol satışı yapılabilir.");
}
Evet alkol satışı yapılabilir.
age
değişkeninin değerini 14 yapalım ve sona console.log("Hayır alkol satışı yapılamaz.")
statement'ını ekleyelim.
Örnek
%%script node
const age = 14;
// if statement'ı içerisindeki koşul gerçekleşmediği için if bloğuna ait kodlar çalışmayacaktır.
if (18 <= age) {
console.log("Evet alkol satışı yapılabilir.");
}
console.log("Hayır alkol satışı yapılamaz.");
Hayır alkol satışı yapılamaz.
Görüleceği üzere age
değişkeni 18'den küçük olduğu için if
statement'ı içerisindeki koşulu sağlamıyor. Bu sebeple if
bloğuna ait kodlar çalışmayacaktır. JavaScript çalışmaya devam edecek ve "Hayır alkol satışı yapılamaz." ifadesi konsola yazdırılacaktır.
❗ Şayet koşul sağlansaydı if
statement'dan sonra gelen kodlar yine çalıştırılacaktı.
Örnek
%%script node
const age = 18;
if (18 <= age) {
console.log("Evet alkol satışı yapılabilir.");
}
console.log("Hayır alkol satışı yapılamaz.");
Evet alkol satışı yapılabilir.
Hayır alkol satışı yapılamaz.
Birden fazla koşul gerektiren durumlarda else, else if
veya switch
statement'larından faydalanırız. Yazının ilerleyen bölümlerinde her birine değineceğiz.
if
statement'ı içerisinde oluşturduğumuz koşulun gerçekleşmemesi halinde else
bloğunun içerisindeki kodlar çalışacaktır.
Prototype:
if (condition1) {
// If statement'ı condition1 ile uyumlu ise buradaki kod bloğu çalışır.
} else {
// If statement'ı condition1 ile uyumlu değilse buradaki kod bloğu çalışır.
}
Alkol örneğimizden devam ederek else
statement'ı oluşturalım. age
değerini 14 olarak değiştirdiğimizde koşulumuz if
statement'ı ile uyuşmayacak dolayısıyla if
bloğuna ait kodlar çalışmayacaktır. JavaScript else
bloğuna ait kodları çalıştıracaktır.
Örnek
%%script node
// age değişkenin değerini değiştirerek sonuçları gözlemleyebilirsiniz.
const age = 14;
// 18 <= 14 ifadesi false olduğundan if bloğuna ait kodlar çalışmayacaktır.
if (18 <= age) {
console.log("Evet alkol satışı yapılabilir.");
}
// if statement'ının boolean olarak değeri false olduğu için else bloğuna ait kodlar çalışacaktır.
else {
console.log("Hayır alkol satışı yapılamaz.");
}
Hayır alkol satışı yapılamaz.
💡 Koşulumuz bir satırdan oluşuyorsa ?
(Ternary) operatörünü kullanabiliriz. ?
operatörü genelde bir satıdan oluşan koşullar için değişkene değer atamada kullanılır. Bu sayede kodlarımızı sadeleştirmiş oluruz.
Bir önceki örneği ?
operatörü ile birlikte yapalım.
Örnek
%%script node
const age = 14;
// Ternary operatör ile birlikte backtick karakterini kullanarak kodlarımızı sadeleştiriyoruz.
console.log(
`Alkol satışı yapılabilir mi?: ${
18 <= age
? "Evet alkol satışı yapılabilir."
: "Hayır alkol satışı yapılamaz."
}`
);
Alkol satışı yapılabilir mi?: Hayır alkol satışı yapılamaz.
Bazen ikiden fazla koşula sahip olabiliriz bu gibi durumlarda else if
veya switch
statement'ları kullanılır.
İkiden fazla koşula sahipsek else if
statement'ını kullanırız. if
statement'ı içerişindeki koşulun gerçekleşmemesi halinde else if
statement'ı kontrol edilir. Koşulun gerçekleşmesi halinde ilgili statement'a ait kod bloğu çalışır, uyuşmuyorsa bir sonraki else if
statement'ı için aynı işlem gerçekleştirilir. Şayet hiçbir statement koşul ile uyuşmuyorsa else
kod bloğu çalışır.
Prototype:
if (condition1) {
// If statement'ı condition1 ile uyumlu ise buradaki kod bloğu çalışır.
} else if (condition2) {
// If statement'ı condition1 ile uyumlu değilse fakat condition2 ile uyumluysa buradaki kod bloğu çalışır.
} else {
// Statement'ların hiçbiri koşul ile uyuşmaz ise else statement'ı içerisindeki kod bloğu çalışır.
}
Örnek
%%script node
const car = "Lada";
if (car == "Mercedes") {
console.log(`Arabanın markası: ${car}`);
}
else if (car == "Audi") {
console.log(`Arabanın markası: ${car}`);
}
else if (car == "BMW") {
console.log(`Arabanın markası: ${car}`);
}
// car değişkeni koşul ile uyuştuğundan buradaki else if bloğuna ait kodlar çalışacaktır.
else if (car == "Lada") {
console.log(`Arabanın markası: ${car}`);
}
else {
console.log(`Araba markası belirlenen koşullar ile uyuşmuyor.`);
}
Arabanın markası: Lada
Yukarıdaki örnekte if
statement'ı içerisindeki koşul false
olduğu için if
bloğuna ait kodlar çalışmayacaktır.
JavaScript bu durumda bir sonraki satıra geçecek ve else if
statement'ını kontrol edecektir. Fakat koşul yine false
olduğu için kod bloğu çalışmayacaktır. Bu işlem tüm statement'lar için tekrarlanacaktır. Ta ki belirlediğimiz koşula uygun else if
statement'ı bulunana kadar.
Koşula uygun bir else if
statement'ı bulunduğunda ilgili kod bloğu çalıştırılacak ve bu kod bloğu içerisindeki sonuç geri döndürülecektir.
Şayet koşul hiçbir statement ile uyuşmaz ise else
kod bloğu çalıştırılacaktır.
Örnek
%%script node
const car = "Lada";
if (car == "Mercedes") {
console.log(`Arabanın markası: ${car}`);
}
else if (car == "Audi") {
console.log(`Arabanın markası: ${car}`);
}
else if (car == "BMW") {
console.log(`Arabanın markası: ${car}`);
}
else if (car == "Fiat") {
console.log(`Arabanın markası: ${car}`);
}
// Hiçbir koşul car değişkeni ile uyuşmadığından else kod bloğu çalışacaktır.
else {
console.log(`Araba markası belirlenen koşullar ile uyuşmuyor.`);
}
Araba markası belirlenen koşullar ile uyuşmuyor.
Prototype:
İkiden fazla koşula sahipsek else if
yöntemine alternatif olarak switch
statement'ını kullanabiliriz.
switch (expression) {
case x:
// expression, x değeri ile uyuşursa buradaki kod bloğu çalıştırılır.
break;
case y:
// expression, y değeri ile uyuşursa buradaki kod bloğu çalıştırılır.
break;
default:
// expression hiçbir değer ile uyuşmuyorsa varsayılan olarak buradaki kod bloğu çalıştırılır.
}
switch
statement'ının çalışma mantığına incelediğimizde ilk önce expression sonucu hesaplanır. Elde edilen sonuç her bir koşul ile kıyaslanır. Sonuç ile uyuşan koşul bulunduğunda koşula ait kod bloğu çalıştırılır. Şayet sonuç ile uyuşan kod bloğu bulunamaz ise varsayılan olarak default
keyword'una ait kod bloğu çalıştırılır.
Araba örneğimizi switch
statement'ı ile oluşturalım.
Örnek
%%script node
const car = "Lada";
switch (car) {
case "Mercedes":
console.log(`Aracın: markası ${car}`);
break;
case "Audi":
console.log(`Aracın: markası ${car}`);
break;
case "BMW":
console.log(`Aracın: markası ${car}`);
break;
// expression sonucu yani car değişkeni koşul ile uyuşmasından ötürü buradaki kod bloğu çalıştırılacaktır.
case "Lada":
console.log(`Aracın: markası ${car}`);
break;
default:
console.log(`Araba markası belirlenen koşullar ile uyuşmuyor.`);
}
Aracın: markası Lada
Yukarıdaki örnekte switch
içerisindeki expression her bir koşul ile kıyaslanacak ve uyuşan koşula ait kod bloğu çalıştırılarak sonuç döndürülecektir.
Şayet expression hiçbir koşul ile uyuşmazsa default
keyword'una ait kod bloğu çalıştırılacak ve sonuç döndürülecekti.
Örnek
%%script node
const car = "Lada";
switch (car) {
case "Mercedes":
console.log(`Aracın: markası ${car}`);
break;
case "Audi":
console.log(`Aracın: markası ${car}`);
break;
case "BMW":
console.log(`Aracın: markası ${car}`);
break;
case "Fiat":
console.log(`Aracın: markası ${car}`);
break;
/**
* expression sonucu yani car değişkeni hiçbir koşul ile uyuşmamasından ötürü default kod bloğu
* çalıştırılacaktır.
*/
default:
console.log(`Araba markası belirlenen koşullar ile uyuşmuyor.`);
}
Araba markası belirlenen koşullar ile uyuşmuyor.
default
keyword'u switch
statement'ı içerisinde herhangi bir yerde kullanılabilir.
default
keyword'u switch
statement'ının herhangi bir yerinde kullanılacaksa kod bloğu içerisinde break
keyword'unun de tanımlı olması gerekir.
Örnek
%%script node
const car = "Lada";
switch (car) {
// default keyword'u başta kullanılmış.
default:
console.log(`Araba markası belirlenen koşullar ile uyuşmuyor.`);
break;
case "Mercedes":
console.log(`Aracın: markası ${car}`);
break;
case "Audi":
console.log(`Aracın: markası ${car}`);
break;
case "BMW":
console.log(`Aracın: markası ${car}`);
break;
case "Fiat":
console.log(`Aracın: markası ${car}`);
}
Araba markası belirlenen koşullar ile uyuşmuyor.
Dikkat ettiyseniz her case
bloğu içerisinde break
keyword'unu kullandık. break
keyword'u ilgili koşula uygun case
bloğunu sonlandırmak için kullanılır.
switch
yapısında son case
için break
keyword'u tanımlamamıza gerek yoktur. JavaScript son case
'e ulaştığında otomatik olarak switch
statement'ı sonlandıracaktır.
❗ break
keyword'unu kullanmazsak koşul ile uyuşan case
bloğu çalışacak ve ardından bir sonraki case
bloğu çalşmaya devam edecektir. JavaScript break
keyword'une ulaşana kadar bu durum devam edecektir. Bu bakımdan her case
bloğunda break
keyword'unun kullanılması gerekir.
Örnek
%%script node
const car = "Lada";
switch (car) {
case "Lada":
console.log(`Aracın: markası ${car}`);
case "Mercedes":
console.log(`Aracın: markası ${car}`);
case "BMW":
console.log(`Aracın: markası ${car}`);
// JavaScript break keyword'una ulaşana kadar çalışmayı sürdürür.
case "Audi":
console.log(`Aracın: markası ${car}`);
break;
default:
console.log(`Araba markası belirlenen koşullar ile uyuşmuyor.`);
}
Aracın: markası Lada
Aracın: markası Lada
Aracın: markası Lada
Aracın: markası Lada
💡 Yapılacak işlem birden fazla koşul için ortaklanarak switch
statement'ı içerisinde kullanılabilir.
Örnek
%%script node
const car = "Toyota";
switch (car) {
case "Toyota":
case "Honda":
console.log(`Araba Japon üretimi. Arabanının markası: ${car}`);
break;
case "BMW":
case "Audi":
console.log(`Araba Alman üretimi. Arabanının markası: ${car}`);
break;
default:
console.log(`Araba türü belirlenen koşullar ile uyuşmuyor.`);
}
Araba Japon üretimi. Arabanının markası: Toyota
switch
statement'ı strict özelliklidir. Yani expression içerisindeki ifade case
ile tam uyuşmalıdır. Aksi durumda uyuşma sağlanmaz.
Örnek
%%script node
const car = "Toy";
switch (car) {
case "Toyota":
case "Honda":
console.log(`Araba Japon üretimi. Arabanının markası: ${car}`);
break;
case "BMW":
case "Audi":
console.log(`Araba Alman üretimi. Arabanının markası: ${car}`);
break;
default:
console.log(`Araba türü belirlenen koşullar ile uyuşmuyor.`);
}
Araba türü belirlenen koşullar ile uyuşmuyor.
Yukarıda görüleceği üzere car değişkeni içerisindeki karakterler "Toyota" string'indeki karakterler ile kısmen uyuşmasına rağmen ilgili case
'a ait kod bloğu çalışmamaktadır. case
bloklarının çalışması için tam eşleşme sağlanması şarttır.
➖ switch
, else if
veya if else
Yapıları Arasındaki Farklar
-
else if
veyaif else
yapılarında bütün veri tipleri kullanılabilirkenswitch
statement'ında yalnızcanumber
veyastring
özellikli veri tipleri kullanılır. -
else if
veyaif else
yapılarında koşula göre yaif
ya daelse
bloğuna ait kodlar çalıştırılırkenswitch
yapısındabreak
keyword'una ulaşana kadar tüm case'ler çalıştırılır veya hiçbir koşul uyuşmazsadefault
keyword'u içerisindeki kodlar çalıştırılır. -
switch
yapısında koşulu güncellemek, silmek veya yeni bir koşul oluşturmak kolay ikenelse if
veyaif else
yapılarında zordur. -
Eğer ikiden fazla koşula sahipsek
else if
veyaif else
ile oluşturduğumuz koşulların çalışma hızıswitch
ile oluşturduğumuz yapıların hızından daha yavaş olacaktır.
Top comments (0)