دستورات شرطی

این هم ترجمه بخش بسیار مهم دستورات شرطی (Conditional statements) به زبان روان، ساده و کاملاً خودمونی برای سایتت:

دستورات شرطی (Conditional statements)

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

۱. دستور if...else (اگر... و در غیر این صورت)

از دستور if زمانی استفاده می‌کنی که می‌خوای بگی: «اگر این شرط درست (true) بود، فلان کار رو بکن». بخش else هم اختیاریه و برای اینه که بگی: «اگر شرط غلط (false) بود، بیا این کارِ دیگه‌ رو بکن».

ظاهر یک دستور if ساده اینطوریه:

if (شرط مورد نظر) {
  // دستوری که اگر شرط درست بود اجرا میشه
} else {
  // دستوری که اگر شرط غلط بود اجرا میشه
}

توی پرانتزِ جلوی if، می‌تونی هر عبارت یا شرطی که خروجی‌اش درست (true) یا غلط (false) میشه رو بگذاری.

قطار کردن شرط‌ها با else if

اگر به جای دو حالت، چندین حالت مختلف داشتی که می‌خواستی یکی‌یکی بررسی بشن، می‌تونی اون‌ها رو با else if پشت سر هم بچینی:

if (شرط اول) {
  // دستورات شرط اول
} else if (شرط دوم) {
  // دستورات شرط دوم
} else if (شرط سوم) {
  // دستورات شرط سوم
} else {
  // اگر هیچ‌کدوم از شرط‌های بالا درست نبود، این اجرا میشه
}

یک قانون مهم: وقتی کلی شرط رو ردیف می‌کنی، جاوااسکریپت از بالا شروع می‌کنه به خوندن؛ اولین شرطی که درست باشه رو اجرا میکنه و کلاً از بقیه شرط‌ها می‌پره بیرون.

بهترین روش‌ها (Best Practices)

• همیشه و در همه حال (مخصوصاً وقتی شرط‌های تو در تو می‌نویسی) کدهات رو داخل آکلواد { } بگذار. این کار خوانایی کدت رو بالا می‌بره و جلوی اشتباهات ریز رو می‌گیره.

• یک اشتباه رایج مبتدی‌ها اینه که داخل پرانتز شرط، به جای مقایسه، از یک علامت مساوی (که برای مقداردهی هست) استفاده می‌کنن؛ مثل: if (x = y). این کار کدت رو دچار باگ میکنه و اصلاً روش قشنگی نیست، پس ازش دوری کن!

مقادیرِ پوچ و غبارآلود (Falsy values) چی هستند؟

توی جاوااسکریپت یک‌سری مقدار داریم که اگر اون‌ها رو مستقیم بگذاری داخل شرط if، جاوااسکریپت ذاتاً اون‌ها رو غلط (false) فرض میکنه. این مقادیر معروف به Falsy هستند:

• خودِ کلمه false

• مقدار undefined

• مقدار null

• عدد صفر (0)

• مقدار NaN (مخفف Not a Number یا خطای محاسبات ریاضی)

• متن خالی ("")

بسیار مهم: هر چیز دیگه‌ای به جز این ۶ مورد (شامل همه شیءها و آرایه‌ها، حتی آرایه خالی یا شیء خالی!) اگر وارد شرط بشن، جاوااسکریپت اون‌ها رو درست (true) در نظر می‌گیره.

یک تله برای حرفه‌ای‌ها: مقادیر بولینِ ساده رو با "شیء بولین" اشتباه نگیر! به این مثال عجیب نگاه کن:

const b = new Boolean(false); // این یک شیء (Object) می‌سازه

if (b) {
  // این شرط اجرا میشه! چون b یک شیء هست و اشیاء همیشه true هستند.
}

if (b == true) {
  // اما این شرط اجرا نمیشه و غلطه!
}

یک مثال واقعی از if...else

فرض کن یک فرم توی سایتت داری و می‌خوای چک کنی کاربر حتماً یک کلمه ۳ حرفی وارد کرده باشه:

function checkData() {
  // اگر طول متن وارد شده دقیقاً ۳ کاراکتر بود:
  if (document.form1.threeChar.value.length === 3) {
    return true; // همه چیز ردیفه
  }
  
  // در غیر این صورت پیام خطا بده:
  alert(`لطفاً دقیقاً ۳ کاراکتر وارد کنید. مقدار "${document.form1.threeChar.value}" غیراستاندارد است.`);
  return false;
}

۲. دستور switch (انتخاب از بین گزینه‌ها)

وقتی یک متغیر داری و می‌خوای ببینی مقدارش با کدوم یکی از گزینه‌های مدنظرت جوره، به جای اینکه ده تا else if بنویسی، از switch استفاده میکنی.

ظاهر دستور switch اینطوریه:

switch (متغیر یا عبارت مورد نظر) {
  case مقدار_اول:
    // دستورات مربوط به مقدار اول
    break;
  case مقدار_دوم:
    // دستورات مربوط به مقدار دوم
    break;
  // ...
  default:
    // اگر با هیچ‌کدوم از گزینه‌های بالا جور در نیومد، این اجرا میشه
}

جاوااسکریپت چطور این رو اجرا میکنه؟

1. اول به متغیر نگاه میکنه، بعد تک‌تکِ caseها رو چک میکنه تا ببینه کدوم با متغیر همخوانی داره. وقتی پیدایش کرد، کدهای زیر اون بخش رو اجرا میکنه.

2. اگر هیچ گزینه‌ای پیدا نشد، میره سراغ بخش اختیاریِ default (که مثل else عمل میکنه) و کدهای اونجا رو اجرا میکنه. (رسم اینه که دیفالت رو آخرِ آخر می‌نویسند).

دکمه ترمز یا همان دستور break چیه؟

علامت break مثل ترمز عمل میکنه. وقتی یک گزینه درست از آب در میاد و کدهایش اجرا میشه، دستور break به کامپیوتر میگه: «بسه دیگه! از بلاک سوییچ بیا بیرون و برو ادامه کدهای صفحه رو بخون».

اگر ترمز (break) رو فراموش کنی چی میشه؟ کامپیوتر به طرز احمقانه‌ای میره و کدهای گزینه‌های بعدی رو هم اجرا میکنه! (حتی اگر اون گزینه‌ها غلط باشن)، تا جایی که به یک break دیگه برسه یا به تهِ سوییچ برسه.

یک مثال واقعی از switch

فرض کن قیمت میوه‌ها رو توی یک سیستم فروشگاهی می‌خوایم مشخص کنیم:

switch (fruitType) {
  case "Oranges":
    console.log("پرتقال کیلویی ۵۹ تومنه.");
    break;
  case "Apples":
    console.log("سیب کیلویی ۳۲ تومنه.");
    break;
  case "Bananas":
    console.log("موز کیلویی ۴۸ تومنه.");
    break;
  case "Cherries":
    console.log("گیلاس کیلویی ۳۰۰ تومنه.");
    break;
  case "Mangoes":
  case "Papayas":
    console.log("انبه و پاپایا کیلویی ۲۵۰ تومنه.");
    break;
  default:
    console.log(`شرمنده، میوه ${fruitType} رو موجود نداریم.`);
}

console.log("چیز دیگه‌ای لازم دارید؟");

توی این کد، اگر مقدار متغیر ما "Bananas" باشه، مستقیم میره روی گزینه موز، متن رو چاپ میکنه و با دیدن break ترمز می‌زنه و میاد بیرون و خطِ "چیز دیگه‌ای لازم دارید؟" رو چاپ میکنه. اگر بریک رو برمی‌داشتیم، قیمت گیلاس هم الکی چاپ می‌شد!