Javascript soru işareti (shorthand operator) ve opsiyonel zincirleme (optional chaining) kullanımı

Javascript’te henüz yeni iseniz bir değişkenden sonra gelen soru işareti kafanızı karıştırabilir . Bu yazımda bu duruma açıklık getireceğiz . Javascript’te soru işareti genellikle bir koşula göre değişkenlere değer atamak için , iki nokta üst üste (:) ve bir soru işareti (?) ile beraber kullanılır. Bu duruma üçlü operatör (ternary operator) denir .

const isRed = false;

const text = isRed ? 'Yes,red' : 'No,something else.';

console.log(text);
//Output : "No,something else."

Verilen ifade koşulu sağlıyor ise soru işaretinden (?) sonra bulunan değeri döndürür . İfade sağlanmıyor ise iki nokta üst üsteden (:) sonraki değeri döndürür.

Bu tür Javascript koşul bildirimi kısa yol (shorthand) olarak kullanılır . Bu kullanımı aynı şekilde if else kullanarak uzun uzadıya tanımlayabilirsiniz .

const isRed = false;
let text;
if(isRed){
text='Yes,red';
}else{
text='No,something else.';
}
console.log(text)
//Output : "No,something else."

Bir diğer güzel özellik ise Javascript’te tanımlanmış bir objede mevcut olmayan alt objenin çağrılmasından ortaya çıkacabilecek hataların önüne geçilmesini sağlayan opsiyonel zincirleme operatörü (optional chaining operator) dür . Kısa bir not : bu özellik henüz standartlaşmış bir javascript özelliği değildir . Projenizde kullanmanız için babel gibi bir javascript compiler’ı kullanmanız gerekir .

const person = {
name :'Mehmet Yilmaz',
phone:{
type:'work',
number:'00905555555'
},
};

const phoneType = person.phone?.type;
const phoneNumber = person.phone?.number;
console.log(phoneType);
//Output "work"
console.log(phoneNumber);
//Output "00905555555"

Eğer person objesinin “type” ve “number” objeleri olmasaydı(ki çoğu zaman böyle bir durumla karşılaşmak mümkün) ve biz bu alanları yukarıdaki gibi kontrol etmeseydik bir istisna(exception) ile karşılaşacaktık .

const person = {
name :'Mehmet Yilmaz',
};

const phoneType = person.phone?.type;
const phoneNumber = person.phone?.number;
console.log(phoneType);
//Output "undefined"
console.log(phoneNumber);
//Output "undefined"

Bu özellik ile javascript’te bir objeye ait alt obje olmadığı zamanlarda oluşabilecek istisnalardan(exceptions) kaçınmak için “ve operatörünü” (&&) veya “üçlü operatörünü” (?:) (ternary operator) kullanmak gerekiyordu .

const person = {
name :'Mehmet Yilmaz',
};

const phoneType = person.phone && person.phone.type;
console.log(phoneType);
// Output "undefined"

const phoneType = person.phone ? person.phone.type : undefined;

console.log(phoneType);
// Output "undefined"

Özetle
Bahsettiğim bu iki kullanım bizleri if-else bloklarından kurtararak daha okunabilir daha temiz kodlar yazmamızı sağlıyor.
Başka bir yazıda görüşmek üzere .