شرط‌ها | آموزش جاوااسکریپت به زبان ساده

درود دوستان! فرض کنیم توی برنامه می‌خوایم بر اساس شرایط مختلف، کارهای متفاوتی انجام بدیم. مثلاً اگه ساعت ۸ صبح بود به کاربر بگیم «صبح بخیر» و اگه ۸ شب بود بگیم «شب بخیر». با این کار به قول معروف می‌خوایم جریان برنامه رو کنترل کنیم.

توی این دو قسمت با موارد زیر آشنا می‌شیم:

• مدیریت شرط‌ها با استفاده از if
• مدیریت شرط‌ها با استفاده از switch

const name = prompt("What is your name?");

alert("Your name is " + name);

حالا بریم بررسی کنیم که چطوری می‌تونیم توی جاوااسکریپت جریان برنامه رو کنترل کنیم.

مدیریت شرط‌ها با استفاده از if

این روش رایج‌ترین راه برای بررسی شرط‌ها توی یک برنامه هست. ساختار if به صورت زیر هست:

if (condition) {
  // ...
}

توی کد بالا، condition شرط مورد نظر ما هست که می‌خوایم بررسی بشه. اگه شرط یک عبارت truthy باشه، یعنی شرط برقرار هست و کدهایی که بین براکت‌ها { } نوشتیم برای ما اجرا میشه. در غیر این صورت کدهای اون قسمت نادیده گرفته میشه.

{
  // block
}

if (...) {
  // block
}

مثال زیر رو در نظر بگیرید:

const x = prompt("Enter your score");

if (x == 10) {
  alert("Hooray! 🎉");
}

توی این کد اگه مقدار x برابر با 10 باشه، کدهایی که توی بلاک if نوشتیم (کدهای بین { } از خط ۳ تا ۵) برای ما اجرا میشه. روی ► بزنید و یک بار عدد 10 و بار دیگه یک مقدار دیگه رو وارد کنین و خروجی رو ببینین.

توی این مثال اگه چیزی غیر از 10 وارد بشه هیچ اتفاقی نمیوفته. چطوری می‌تونیم این موضوع رو کنترل کنیم؟ یعنی اگه چیزی غیر از 10 وارد شد، یک پیغام دیگه نمایش داده بشه؟ این کار رو با else انجام می‌دیم:

if (condition) {
  // executed if condition is true
} else {
  // executed if condition is false
}

کلمه‌کلیدی else دقیقاً بعد از بلاکِ if قرار می‌گیره و زمانی اجرا میشه که شرط condition برقرار نباشه. بیاید به مثال قبل else رو اضافه کنیم:

const x = prompt("Enter your score");

if (x == 10) {
  alert("Hooray");
} <<else>> {
  alert("Oops");
}

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

if (condition1) {
  // executed if condition1 is true
} <<else if (condition2)>> {
  // executed if condition2 is true
}

توی کد بالا، جاوااسکریپت فقط در صورتی که condition1 برقرار نباشه به سراغ قسمت else if میره. خود else if هم درست مثل if شامل یک شرط هست. اگه condition2 برقرار باشه، بلاک مخصوص به خودش اجرا میشه. کد زیر رو با ورودی 10 و بعد 9 اجرا کنید:

const x = prompt("Enter your score");

if (x == 10) {
  alert("Hooray");
} else if (x == 9) {
  alert("Not bad!");
}

می‌تونیم بی‌نهایت دیگه else if اضافه کنیم:

const x = prompt("Enter your score");

if (x == 10) {
  alert("Hooray");
} else if (x == 9) {
  alert("Good!");
} else if (x >= 5 && x < 9) {
  alert("Not bad");
} else if (x >= 1 && x < 5) {
  alert("Terrible");
}

توی کد بالا اگه:

• x برابر با 10 باشه کد خط ۴
• x برابر با 9 باشه کد خط ۶
• x بزرگتر یا مساوی 5 باشه و همچنین از 9 کوچیکتر باشه خط ۸
• x بزرگتر یا مساوی 1 باشه و همچنین از 5 کوچیکتر باشه خط ۱۰ اجرا میشه

اما یک نکته وجود داره: اگه عددی بزرگتر از 10 یا کوچیکتر از 1 وارد بشه، نمی‌تونیم پیغام مناسبی به کاربر نشون بدیم. برای این کار، کافیه یک else به آخر کد اضافه کنیم:

const x = prompt("Enter your score");

if (x == 10) {
  alert("Hooray");
} else if (x == 9) {
  alert("Good!");
} else if (x >= 5 && x < 9) {
  alert("Not bad");
} else if (x >= 1 && x < 5) {
  alert("Terrible");
} <<else>> {
  alert("Please enter a valid number between 1 and 10");
}

این else باعث شد تا بتونیم همه جوانب این برنامه رو کنترل کنیم. کد بالا رو اجرا کنین و عددهایی بزرگتر از 10 یا کوچیکتر از 1 وارد کنین تا خروجی رو ببینین.

نکته مهمی که باید در نظر داشته باشیم اینه که else همیشه باید آخرین قسمت قرار بگیره. else نمی‌تونه قبل از if یا یک else if قرار بگیره:

// Error!
if (true) {

} else {

} else if (true) {

}

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

توی شرط‌های متوالی فقط یک if می‌تونیم داشته باشیم:

if (true) {
  alert("Hi");
}
if (true) {
  alert("Hello");
}

کد بالا کاملاً معتبر هست،‌ اما دو شرط کاملاً مجزا داریم که هیچ ارتباطی به همدیگه ندارن.

شرط‌های if بدون براکت

شاید if هایی رو دیده باشیم که به صورت زیر نوشته شدن:

if (condition)
  alert("Hello");

// or 
if (condition) alert("Hello");

همونطور که می‌بینیم براکت‌ها {} حذف شدن. اگه فقط یک دستور (Statement) توی بدنه if داریم، می‌تونیم از نوشتن براکت‌ها صرف نظر کنیم. این کد مشابه کد زیر هست:

if (condition) {
  alert("Hello");
}

کد زیر رو در نظر بگیرید:

if (condition)
  alert("Hello");
  alert("Hello");

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

if (condition) {
  alert("Hello");
}

alert("Hello");

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

if (condition);
  alert("Hello");

 به صورت زیر تفسیر میشه:

if (condition) {
}

alert("Hello");

چون همونطور که قبلاً گفتیم، از سمی‌کالن برای جدا کردن دستورات (Statement ها) استفاده می‌کنیم.

خب دوستان با if آشنا شدیم و دیدیم که چطوری می‌تونیم اتفاق‌ها و شرایط توی یک برنامه رو کنترل کنیم. توی قسمت بعد با یک روش دیگه برای کنترل جریان برنامه به اسم switch آشنا می‌شیم. روزاتون خوش 😉✌️