اگر با هر کدام از زبان‌های برنامه‌نویسی کار کرده باشیم قطعا از ساختارهای شرطی if/else استفاده کردیم و با آنها آشنایی داریم. این ساختارهای شرطی را می‌شود به سادگی با استفاده از عملگرهای سه‌گانه پیاده سازی کرد. در زبان جاوااسکریپت (و خیلی از زبان‌های دیگر) عملوندهای متفاوت نیاز به عملگرهای محاسباتی و یا انتسابی دارند. این عملگرها به ۳ دسته تقسیم می‌شوند:

• عملگرهای یگانه: به یک عملوند در قبل یا بعد خود نیاز دارند.
• عملگرهای دوگانه: به دو عملوند در دو طرف عملگر نیاز دارند.
• عملگرهای سه‌‍گانه: به سه عملوند در قالب یک ساختار شرطی نیاز دارند.

age++ //Unary operator (increment)
2 + 3 //Binary Operator (addition)
night ? 'good night' : 'good morning' //Ternary/Conditional operator

عملگرهای سه‌گانه

با استفاده از عمگرهای سه‌گانه می‌توانیم به راحتی ساختارهای شرطی متفاوتی را با یک خط کد پیاده سازی کنیم. در واقع با توجه به درست یا غلط بودن یک عبارت، دستور خاصی را اجرا کنیم. در حالت عادی یک ساختار شرطی IF/ELSE به شکل زیر پیاده‌سازی می‌شود.

var day = true;
if(day){
  alert(day time')
} else{
  alert(night time')
}
// day time

با استفاده از عملگرهای سه‌گانه می‌توانیم ساختار شرطی فوق را در یک خط کد پیاده‌سازی کنیم.

var day = true; //condition
alert(day ? 'day time' : 'night time') // It is day-time

مفهوم این خط(A:B?C) به این شکل است که اگر شرط A صحیح بود، عمل B انجام می‌شود و در غیر این صورت (else) عمل C انجام می‌شود. در مثال فوق از آنجایی که متغیر day برابر با true است، در نتیجه عبارت “day time” در خروجی نمایش داده می‌شود.

اختصاص دادن مقدار به متغیر

در مثال قبل نتیجه مقایسه برابر با یک عبارت بود. حال اگر بخواهیم با توجه به نتیجه مقایسه، یک متغیر را مقداردهی کنیم باید عملگر سه‌گانه را به شکل زیر بنویسیم.

var myName = false;
var age = false;
var message = myName ? "I have a name" : "I don't have a name!"
console.log(message) // I have don't have a name!


myName = true;
message = myName ? age = true : ‘You don’t have a name!'
console.log(message) // true

همانطور که می‌بینید در خط سوم متغیر message با توجه به درست یا غلط بودن متغیر myName مقدارگذاری می‌شود. همچنین در خط ششم اگر مقدار myName برابر با true باشد، متغیر age هم برابر با true می‌شود و در غیر اینصورت عبارت “You don’t have a name!” در متغیر message قرار می‌گیرد.

استفاده در توابع

یکی دیگر از جاهایی که ساختار شرطی در آن استفاده می‌شود توابع هستند. یک تابع که در آن از ساختار شرطی ساده استفاده شده باشد به شکل زیر تعریف می‌شود.

var dog = true;
function myPet(){
  if(dog){
    return 'Nice Dog';
  } else {
    return 'I need a dog';
  }
}
console.log(myPet()) // Nice Dog

اما با استفاده از عملگرهای سه‌گانه می‌توان تابع myPet را به شکل زیر پیاده‌سازی کرد:

var dog = false;
function myPet(){
  return dog ? 'Nice dog' : 'I need a dog';
}
console.log(myPet()) // Nice dog

ساختار شرطی با چندین شرط

ساختار شرطی IF/ELSE IF را نیز می‌توان با عملگرهای سه‌گانه به راحتی پیاده‌سازی کرد.

var myName = true;
var myAge = true;
var message = '';
if (myName){
  if(myAge){
    message = "You have a name and age"
  }else{
    message = "You have a name"
  }
} else {
  "Oh, you don’t have a name and age"
}
console.log(message) //You have a name and age

حال با استفاده از عملگرهای سه‌گانه می‌توان ساختار فوق را به شکل کوتاه‌تری پیاده‌سازی کرد.

var myName = true;
var myAge = true;
var message = myName? (myAge ? "You have a name and age" : "You have a name") : "Oh, you don’t have a name and age"
console.log(message) // You have a name and age

شاید ابتدا استفاده از عملگرهای سه‌گانه کمی سخت به نظر برسد اما با کمی تمرین و تمرکز و درک مفهوم آن، می‌توان به راحتی از این عملگرها استفاده کرد. یک مثال ساده دیگر یادگیری عملگرهای سه‌گانه را بهتر می‌کند.

var email = false;
var phoneNumber = true;
var message = email ? 'Thanks for reaching out to us by email' : phoneNumber ? 'Thanks for reaching out to us by phone' : 'Please fill in your email or phone-number'
console.log(message) //Thanks for reaching out to us by phone

در مثال بالا از ساختار IF/ELSE IF/ELSE استفاده شده است.

چندین عملیات در یک شرط

تقریبا در اکثر مواقع در هنگام درست یا غلط بودن یک شرط چندین دستور اجرا می‌شود. برای مثال اگر کاربر در سایت ثبت‌نام کرد، ابتدا برای او پیام ثبت‌نام ارسال شود، سپس نام او را بپرسد و در نهایت به او خوش‌آمدگویی کند. پیاده‌سازی این ساختار با IF/ELSE به شکل زیر است.

var registered = true;
if(registered){
  alert('You have been successfully registered');
  var name = prompt('What is your name?');
  alert('Hello ' + name)
}else {
  alert('Please register first')
}//Hello ???

اما با استفاده از عملگرهای سه‌گانه می‌توان ساختار فوق را به شکل زیر نوشت.

var registered = true;
var name = '';
home ?(
  alert('You have been successfully registered'),
  name = prompt(‘What is your name?’),
  alert('Hello ' + name)
):
  alert('Please register first')//Hello ???

دقت کنید که برای استفاده از متغیرها در عملگرهای سه‌گانه باید ابتدا آن ها را تعریف کرده باشید.