عملگرهای زیادی در جاوااسکریپت وجود دارد که یکی از آن‌ها عملگر ternary است. در این مقاله قصد داریم تا با این عملگر بیشتر آشنا شویم و بدانیم استفاده از آن چگونه می‌تواند هنگام ساخت برنامه‌ها مفید باشد.

عملگر Ternary چیست؟

عملگر ternary در جاوااسکریپت یک عملگر شرطی است که هر یک از دو عبارت، یک عبارت true و یک عبارت false را بر اساس یک عبارت شرطی که ما ارائه می‌کنیم ارزیابی می‌کند.

در ادامه یک سینتکس داریم:

condition ? trueExpression : falseExpression

ما شرطی را داریم که مقدار true یا false برمی‌گرداند. مقادیر درست در اینجا شامل مقادیر trueو non false است و مقادیر نادرست  هم عبارتند از false، null، ۰و غیره.

بعد از شرط، یک علامت سوال داریم که می‌توانیم آن را به عنوان “پرسش شرط” در نظر بگیریم، و به دنبال آن هم trueExpression. این عبارت در صورتی اجرا می‌شود که عبارت شرط true ارزیابی شود.

بعد از عبارت true، یک :و به دنبال آن falseExpression داریم. این عبارت در صورتی اجرا می‌شود که عبارت شرط falseارزیابی شود.

عملگر ternary مقداری را return می‌کند که می‌توانیم آن را به یک متغیر نسبت دهیم. باید به این نکته توجه کنیم که بدون تخصیص مقدار بازگشتی به یک متغیر نمی‌توانیم از عملگر استفاده کنیم:

const result = condition
  ? trueExpression
  : falseExpression

مقدار بازگشتی به ارزیابی عبارت شرط بستگی دارد. اگر شرط trueباشد، مقدار بازگشتی از trueExpression به متغیر اختصاص داده می‌شود. در غیر این صورت، مقدار بازگشتی از falseExpression به متغیر اختصاص داده می‌شود.

نحوه استفاده از عملگر Ternary به جای دستور if

عملگر ternary می‌تواند در برخی موارد جایگزین خوبی برای دستورifباشد. این موضوع باعث می‌شود تا بتوانیم کد خود را کوتاه‌تر، تمیزتر و خواناتر بنویسیم.

در ادامه یک مثال را باهم بررسی می‌کنیم:

const score = 80
let scoreRating

if (score > 70) {
  scoreRating = "Excellent"
} else {
  scoreRating = "Do better"
}

console.log(scoreRating)
// "Excellent"

ما در این مثال یک متغیر scoreبا مقدار ۸۰ و یک متغیر scoreRatingداریم. سپس یک دستور ifداریم که score > 70را بررسی می‌کند. اگر این شرط trueارزیابی شود، مقدار “Excellent“ و در غیر این صورت مقدار “Do better“ به متغیر scoreRating تخصیص داده می‌شود.

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

همانطور که می‌دانیم سینتکس عملگر ternary عبارت است از: عبارت شرطی، علامت سوال، عبارت true، : و در نهایت عبارت false. با توجه به این موضوع اکنون مثالی که داریم به صورت زیر خواهد بود:

const score = 80

const scoreRating =
  score > 70 ? "Excellent" : "Do better"

console.log(scoreRating)
// Excellent

این روشی است که ما از عملگر ternary استفاده می‌کنیم. عبارات true و false در اینجا رشته‌هایی هستند که بسته به شرط ما، یعنی score > 70به متغیر scoreRatingتخصیص داده می‌شوند.

عبارت true و false می‌تواند هر نوع عبارتی از اجرای تابع گرفته تا عملیات محاسباتی و غیره باشد. در ادامه یک مثال داریم که اجرای یک تابع را نشان می‌دهد:

function printPoor() {
  console.log("Poor result")
  return "poor"
}

function printSuccess() {
  console.log("Nice result")
  return "success"
}


const pass = false;

const result = pass ? printSuccess() : printPoor()
// Poor result (console.log executed)

console.log(result)
// poor

اینجا می‌بینیم که وقتی شرط مقدار falseرا برمی‌گرداند، عبارت printPoor()اجرا می‌شود که Poor resultرا در کنسول چاپ می‌کند. از آنجایی که عبارت falseمقدار poorرا برمی‌گرداند، می‌توانیم آن مقدار را که به متغیر resultتخصیص داده و مشاهده کنیم.

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

نحوه استفاده از عملگرهای Ternary تودرتو

اگر بخواهیم به یک عبارت if...else if...elseبا عملگر ternary دست پیدا کنیم، چه کاری باید انجام دهیم؟ برای این کار می‌توانیم از عملگرهای ternary تودرتو استفاده کنیم. با این حال، باید مراقب نحوه استفاده از آن باشیم، زیرا می‌تواند خواندن کد ما را سخت‌تر کند.

در ادامه یک مثال را باهم بررسی می‌کنیم:

const score = 60
let scoreRating

if (score > 70) {
  scoreRating = "Excellent"
} else if (score > 50) {
  scoreRating = "Average"
} else {
  scoreRating = "Do better"
}

console.log(scoreRating)
// "Average"

ما اینجا یک عبارت if-else-if-elseداریم که در آن ابتدا شرط score > 70را بررسی می‌کنیم. اگر این شرط مقدار trueرا برگرداند، “Excellent” را به متغیر scoreRatingاختصاص می‌دهیم. اما اگر شرطی که داریم مقدار falseبرگرداند، بررسی می کنیم که score > 50است یا نه. اگر این شرط دوم مقدار true را برگرداند، “Average” را به متغیر اختصاص می‌دهیم، اما اگر این نیز false را برگرداند، در نهایت(else) “Do better” را به متغیر تخصیص می‌دهیم.

اکنون می‌خواهیم این کار را با عملگر سه‌‌تایی انجام دهیم:

const score = 60

const scoreRating =
  score > 70
    ? "Excellent"
    : score > 50
    ? "Average"
    : "Do better"

console.log(scoreRating)
// "Average"

همانطور که می‌بینید ما اینجا دو ?و دو :داریم. در عملگر ternary اول، عبارت شرطی score > 70را بررسی می‌کنیم. بعد از اولین علامت سوال، عبارت true را داریم که “Excellent” می‌باشد. بعد از : اول، عبارت بعدی قرار است عبارت false باشد. برای عبارت false، یک عبارت شرطی دیگر با استفاده از عملگر ternary تعریف می‌کنیم.

شرط دوم در اینجا score > 50است. بعد از علامت سوال دوم، عبارت true را داریم که “Average” می‌باشد. پس از : دوم، اکنون یک عبارت false دیگر داریم که شامل “Do better” است.

با این کار، اگر شرط اول trueباشد، “Excellent” به متغیر scoreRatingتخصیص داده می‌شود. اگر شرط اول falseباشد، یک شرط دیگر را بررسی می‌کنیم. اگر شرط دوم true باشد، “Average” به متغیر برگردانده می‌شود. اما اگر این شرط دوم نیز false باشد، عبارت false نهایی “Do better” را داریم که به متغیر تخصیص پیدا می‌کند.

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

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

تصور کنید در مثال قبلی یک عملگر ternary اضافه‌تر داشتیم:

const score = 45

const scoreRating =
  score > 70
    ? "Excellent"
    : score > 50
    ? "Average"
    : score > 40
    ? "Fair"
    : "Do better"

console.log(scoreRating)
// "Fair"

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

در چنین مواردی که به چندین شرط نیاز داریم، استفاده از دستور ifیا switchبهتر است. اگرچه استفاده از این روش‌ها تعداد خط کد طولانی‌تری دارند، اما باعث می‌شوند کد خواناتری داشته باشیم.

جمع‌بندی

عملگر ternary این امکان را به ما می‌دهد تا بتوانیم عبارات شرطی را ارزیابی کنیم و در برخی موارد حتی می‌تواند جایگزین دستور ifشود. این موضوع به ما کمک می‌کند تاکد کوتاه‌تر (حتی در یک خط) و تمیزتر بنویسیم.

در این مقاله سعی کردیم مثال‌هایی را ا استفاده از if و عملگر ternary در جاوااسکریپت بررسی کرده و با نحوه کارکرد آن‌ها آشنا شویم. همچنین باید به این نکته توجه کنیم که هنگام استفاده از عملگرهای ternary تودرتو خیلی مراقب باشیم زیرا در این صورت کد ما ممکن است از خوانایی قابل قبولی برخوردار نباشد.