عملگرهای شرطی: if و ‘?’

گاهی ما نیاز داریم تا تحت شرایط مختلف کار های مختلفی انجام دهیم که برای انجام این کار در این مقاله از وبسایت ecmascript.ir به موضوع عملگر های شرطی می پردازیم و این مفاهیم را توضیح می دهیم.

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

عبارت if

عملگر if (...) یک شرط را که درون پرانتز نوشته می شود بررسی می کند و اگر حاصل true بود، مجموعه ای از کدها را اجرا می کند.

برای مثال:

let year = prompt('در چه سالی استاندارد اکمااسکریپت منتشر شد؟', '');

if (year == 2015) alert( 'احسنت! ?' );

در مثال بالا، شرطی که درون پرانتز نوشته ایم یک بررسی برابری ساده (year == 2015) است. اما شرط هایی به مراتب پیچیده تر از این هم می توانیم بنویسیم.

اگر بخواهیم بیش از یک statement بنویسیم، باید کد های خود را میان {...} قرار دهیم:

if (year == 2015) {
  alert( 'احسنت! ?' );
  alert( 'بابا باهوش!' );
}

توصیه می کنیم که همواره کدهای خود را میان {...} قرار دهید، حتی اگر می خواهید تنها یک statement بنویسید. انجام این کار باعث افزایش خوانایی کدهای شما می شود.

تبدیل به بولین

دستور if (...) شرط بین پرانتز را بررسی می کند و حاصل این شرط را به بولین تبدیل می کند.

بیایید قواعد تبدیل یک مقدار به بولین را از مطلب تبدیل دیتاتایپ مرور کنیم:

• عدد ۰، رشته ی خالی ""، null، undefined و NaN همگی به false تبدیل می شوند. به همین علت این مقادیر falsy نامیده می شوند.
• بقیه ی مقادیر چه رشته باشند یا عدد به true تبدیل می شوند. به همین علت truthy نامیده می شوند.

بنابر این کدی با شرط زیر هرگز اجرا نمی شود:

if (0) {  // 0 جز مقادیر falsy است
  ...
}

… و تحت شرایط زیر کد همیشه اجرا می شود:

if (1) {  // عدد ۱ جز مقادیر truthy است
  ...
}

ما می توانیم یک مقدار بولین را که از پیش محاسبه کرده ایم به عنوان شرط پاس بدهیم:

let cond = (year == 2015); // این خط بررسی می کند که حاصل true می شود یا false

if (cond) {
  ...
}

عبارت “else”

دستور شرطی if می تواند شامل یک بلوک اختیاری به نام else باشد. هرگاه جواب شرطی که نوشته ایم false شود، کد های درون بلوک else اجرا می شوند.

برای نمونه:

let year = prompt('در چه سالی استاندارد اکمااسکریپت منتشر شد؟', '');

if (year == 2015) {
  alert( 'شما درست حدس زدید!' );
} else {
  alert( 'غلطه آی غلطه! ?' ); // هر مقداری پاسخی بجز ۲۰۱۵ این خط را اجرا می کند
}

چندتا شرط:‌ “else if”

گاهی ما نیاز داریم تا چند تا شرط مختلف را بررسی کنیم. عبارت else if امکان این کار را برای ما فراهم می کند.

برای مثال:

let year = prompt('در چه سالی استاندارد اکمااسکریپت منتشر شد؟', '');

if (year < 2015) {
  alert( 'خیلی کم گفتی! ?' );
} else if (year > 2015) {
  alert( 'زیاده بابا! ?' );
} else {
  alert( 'ایول! ?' );
}

در اسکریپت های بالا، جاوااسکریپت ابتدا شرط year < 2015 را بررسی می کند. اگر حاصل falsy بود، به سراغ شرط بعدی می رود year > 2015. اگر این شرط هم falsy بود، بلوک else را اجرا می کند.

می توانیم به هر تعداد که نیاز داریم از else if استفاده کنیم. عبارت else هم اختیاری است.

عملگر شرطی «علامت سؤال» (?)

گاهی می خواهیم بر اساس یک شرط، مقداری را درون یک متغیر بریزیم.

مثلاً:

let accessAllowed;
let age = prompt('چند سال دارید؟', '');

if (age > 18) {
  accessAllowed = true;
} else {
  accessAllowed = false;
}

alert(accessAllowed);

عملگر علامت سوال ؟ این امکان را فراهم می کند که مراحل بالا را به شکل کوتاه تری بنویسیم. این شیوه‌ی نوشتن شرط ternary نام دارد، چون کلمه‌ی ternary به معنای سه‌تایی است و این عملگر تنها عملگری است که سه عملوند دارد. در جاوااسکریپت این عملگر تنها عملگری است که این تعداد عملوند را دارد.

سینتکس آن به شکل زیر است:

let result = condition ? value1 : value2;

شرط بررسی می شود: اگر true بود آنگاه value1 برگردانده می شود، در غیر این صورت value2.

برای مثال:

let accessAllowed = (age > 18) ? true : false;

از نظر فنی می توانیم پرانتز های دور شرط age > 18 را در ternary حذف کنیم. اگر آن را ننویسیم هم مشکلی ایجاد نمی شود.

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

// شرط age > 18 ابتدا بررسی می شود
// (نیازی نیست آن را درون پرانتز قرار دهیم)
let accessAllowed = age > 18 ? true : false;

اما پرانتز کد را خواناتر می‌کند. بنابر این همیشه استفاده از پرانتز را توصیه می کنیم.

// این کد همان کار مثال قبلی را انجام می دهد.
let accessAllowed = age > 18;

چندتا علامت سؤال

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

برای مثال:

let age = prompt('چند سالته؟', ۱۸);

let message = (age < 3) ? 'سلام کوچولو موچولو!' :
  (age < 18) ? 'سلام بچه زرنگ!' :
  (age < 100) ? 'با عرض سلام و احترام!' :
  'مگه میشه؟ مگه داریم؟!';

alert( message );

شاید در لحظه اوّل وحشت کنید که چی نوشتیم، ولی اگر یه خورده دقیق‌تر نگاهش کنید می‌بینید که در اصل دنباله‌ای از این شرط هاست:

1. علامت سؤال اوّل شرط age < 3 را بررسی می‌کند.
2. اگر نتیجه true باشد، رشته‌ی «سلام کوچولو موچولو!» را بر می‌گرداند، در غیر این صورت عبارت بعد از «:» را بررسی می کند، یعنی age < 18 را.
3. اگر نتیجه true باشد رشته‌ی «سلام بچه زرنگ!» را بر می‌گرداند، در غیر این صورت عبارت بعد از «:» بعدی را بررسی می‌کند، یعنی age < 100 را.
4. اگر نتیجه true باشد رشته‌ی «با عرض سلام و احترام!» را بر می‌گرداند، در غیر این صورت عبارت بعد از آخرین «:» را بررسی می‌کند، یعنی رشته‌ی «مگه میشه؟ مگه داریم؟!» را بر می‌گرداند.

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

if (age < 3) {
  message = 'سلام کوچولو موچولو!';
} else if (age < 18) {
  message = 'سلام بچه زرنگ!';
} else if (age < 100) {
  message = 'با عرض سلام و احترام!';
} else {
  message = 'مگه میشه؟ مگه داریم؟!';
}

استفاده‌ی نامتعارف از علامت سؤال «?»

گاهی اوقات بعضی‌ها از ? به جای if استفاده می‌کنند:

let company = prompt('جاوااسکریپت را کدام شرکت ساخت؟', '');

(company == 'نت اسکیپ') ?
   alert('ایول!') : alert('غلطه متأسفانه!');
 
 

در این جا بر اساس شرط company == 'نت اسکیپ'، یکی از دو عبارت بعد از ? اجرا می‌شود و alert می‌شود.

نکته‌ی این مثال در این است که ما مقدار برگشتی را در متغیّری نریختیم، بلکه نسبت به نتیجه‌ی شرط ، کد متفاوتی را اجرا کرده ایم.

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

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

اگر مثال بالا را با if بازنویسی کنیم این طور می‌شود:

let company = prompt('جاوااسکریپت را کدام شرکت ساخت؟', '');

if (company == 'نت اسکیپ') {
  alert('ایول!');
} else {
  alert('غلطه متأسفانه!');
}
 
 
 
 
 

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

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