JavaScript hap yazısı : Ternary Operator💡

Herkese merhaba, uzun zamandır Leyla’dan sebep ara verdiğim yazılara yine ufak bir hap yazısı ile dönüş yapmak sonrasında da daha derinlere inmek üzere yazıyorum.

Bu yazımda sizlere, nedense bana yazarken çok keyif veren, vaktinde anlamaya çalışırken nispeten beynimi yakan Ternary Operator’dan bahsedeceğim.

Öncelikle belirteyim ki sonra laf söz olmasın, ternary operator sadece JavaScript’e özgü bir şey değil. Gerçekten eski bir programlama konsepti diyebilirim.

Ternary Operator (bundan sonra TO diyeceğim), adından da anlaşılacağı üzere 3 adet parametre alan tek JS operatorüdür. Sıklıkla if karşılaştırmalarında kullanılır ve satır sayısı olarak da hatırı sayılır bir katkı sağlar.

Bir MDN örneği ile kısaca bir göz atalım sonra detaylarına inelim :

function getFee(isMember) {
 return (isMember ? “$2.00” : “$10.00”);
}
console.log(getFee(true));
// expected output: “$2.00”
console.log(getFee(false));
// expected output: “$10.00”
console.log(getFee(1));
// expected output: “$2.00”

getFee isimli fonksiyon bir parametre alıyor. Bu parametre eğer true ise 2$ değil ise 10$ diye bir dönüş yapıyor. Bu methodu uzun uzadıya şu şekilde de yazabilirdik.

function getFee(isMember) {
  if (isMember === true){
    return "$2.00";
  } else {
    return "$10.00";
  }
}

Gördüğünüz üzere, 5 satırda yaptığımız işlemi tek satır ile yaptık. Bir dosyada bunun gibi bir çok kontrolünüz olduğunu düşünün?

Biraz daha basitleştirelim ki, benim gibi kafalar yanmasın :)

birDegerlendirmeYap() ? trueIseCalistir() : falseIseCalistir();

Aslında aynı konuşma cümlesi gibi bunu hafızanıza yerleştirebilirsiniz. İlk soru işaretine kadar, “Bu veriler istediğim eşitliği sağlıyor mu ? ” o zaman bunu yap. Eğer çalıştırmıyorsa o zaman tamam, diğer olarak şunu yap.

CloseBrace üzerinden aldığım şu örneğe bir bakalım:

1- const person = 'Perseus';
2- person === 'Medusa' ? console.log('Yep, Medusa!') : 
3- console.log(`Nope, not Medusa. That's ${person}.`);

Satır 1 : person değişkenine Perseus diye bir string atadık.

Satır 2: person değişkeni Medusa mı diye bakıyoruz. Eğer true ise konsolumuza evet person Medusaymış diye basacak.

Satır 3: satır 2'nin sonundaki iki noktaya dikkat! Eğer false ise burası çalışacak ve “Hayır, person Medusa değil, person şu!” diye person değerini basacak.

Yukarıdaki gibi her casedeki işlemleri uzun uzun yapmamıza gerek yok, buradaki durumlar için yukarıda belirttiğim gibi fonksiyonlar da çağırabiliriz.

Tekrar göstermek gerekirse :

function logIt(name){
  //do stuff
}
function createIt(name){
  //do stuff
}
const person = 'Perseus';
person === 'Medusa' ? logIt(person) : createIt(person);

Ayrıca her iki koşulda da bir fonksiyon çalıştıracaksınız diye bir şey yok. False durumunda null gönderebilirsiniz. Bunu React yazarken sıklıkla görürsünüz, eğer bir component gerekli şartları yerine getirmiyorsa o null dönerek boş render edilir. Burada onu rahatlıkla yapabilirsiniz.

and ve or ile birlikte kullanımı

Gerçek hayatta koşul ifadeleri tek bir koşul içermeyebiliyor çoğu zaman. Bunları da ternary operatör ile rahatlıkla kullanabilirsiniz. Örnekler pek anlamlı olmayabilir ancak önemli olan syntax gösterimi. O yüzden hemen örnekleyelim:

const person = 'Perseus';
const weather = 'Rainy';
//and kullanımı
person === 'Medusa' && weather === 'Snowy' ? makeIt(person) : doIt(person);
//or kullanımı
person === 'Medusa' || person === 'Kyle' ? makeIt(person) : doIt(person);

MDN üzerinde, bir üst seviye kullanımları (iç içe kullanımı, birden fazla kullanımı vs) mevcut ancak derdim en başta kafanızı karıştırmak değil, varlığından haberdar olmayanların ya da basit hali bile karmaşık gelenlere aslında ne kadar basit olduğunu göstermek. Eğer istek gelirse diğer durumlar için de bir devam yazısı yazabilirim.

Teşekkürler,
Murat

Kaynaklar :

Conditional (ternary) Operator

CloseBrace - JavaScript Tutorials and Resources