شرط‌ها - قسمت 2 | دستور switch

درود دوستان! توی قسمت قبل دیدیم که چطوری می‌تونیم شرایط مختلف توی یک برنامه رو با استفاده از if مدیریت کنیم. توی این قسمت با یک روش دیگه به اسم سوئیچ یا switch آشنا می‌شیم.

موارد زیر رو توی این قسمت یاد می‌گیریم:

• مدیریت شرط‌ها با استفاده از switch
• کلمه‌کلیدی break چیه
• کلمه‌کلیدی default
• مقایسه توی switch چطوری انجام می‌گیره
• بدنه‌های چند خطی
• دستور switch و کدنویسی تمیز

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

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

ابتدا قبل از اینکه با switch آشنا بشیم یک مثال رو بررسی کنیم. فرض کنیم چند if متوالی به صورت زیر داریم:

const number = prompt("Enter a number");

if (number == 10) {
  alert("Ten");
} else if (number == 9) {
  alert("Nine");
} else if (number == 8) {
  alert("Eight");
} else if (number == 7) {
  alert("Seven");
} else if (number == 6) {
  alert("Six");
}

توی چنین موقعیتی که شرط‌های زیادی وجود داره و هر توی هر شرط، یک مقدار داره با یک مقدار از پیش تعریف شده (توی این مثال number) مقایسه میشه بهتره از switch استفاده کنیم.

این کد با ساختار switch به صورت زیر هست:

const number = prompt("Enter a number");

switch (number) {
  case "10":
    alert("Ten");
    break;
  case "9":
    alert("Nine");
    break;
  case "8":
    alert("Eight");
    break;
  case "7":
    alert("Seven");
    break;
  case "6":
    alert("Six");
    break;


  // ...
}

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

ما برای هر شرط و مقایسه، یک case اختصاصی می‌نویسیم. جلوی کلمه‌کلیدی case مقداری رو می‌نویسیم که می‌خوایم مقایسه روی اون انجام بگیره. اگه حاصل مقایسه با اولین case برابر با true باشه، جاوااسکریپت case مورد نظرش رو پیدا کرده و بدنه مربوط به همون case اجرا میشه. در غیر این صورت جاوااسکریپت به سراغ case های بعدی میره.

یک مثال ساده‌تر از این دستور، کد زیر هست. دستور if و دستور switch توی کد زیر معادل هم هستن:

if (x === 10) {
  alert();
}

switch(x) {
  case 10:
    alert();
    break;
}

بدنه هر case، هر چیزی بعد از علامت : تا case بعدی هست.

کلمه‌کلیدی break چیه؟ 🤔

اگه به ساختار switch نگاه کنیم، ما آخر هر case یک break نوشتیم. بیاین اولین مثال رو طوری بنویسیم که اولین و دومین break حذف شدن:

const number = prompt("Enter a number");

switch (number) {
  case "10":
    alert("Ten");
>>     // no break
  case "9":
    alert("Nine");
>>     // no break
  case "8":
    alert("Eight");
    break;
  case "7":
    alert("Seven");
    break;
  case "6":
    alert("Six");
    break;

  // ...
}

با دکمه ► این کد رو اجرا و عدد 10 رو وارد کنین تا خروجی رو ببینین. همونطور که می‌بینیم هم کد مربوط به اولین case اجرا شد و هم کد مربوط به دومین و سومین case. در صورتی که توی دومین case با عدد 9 توی سومین case با عدد 8 قراره مقایسه انجام بگیره. چرا چنین اتفاقی افتاد؟

اگه آخر هر case از کلمه‌کلیدی break استفاده نکنیم، case بعدی بدون اینکه شرط اون بررسی بشه اجرا میشه. برای همین با وارد شدن عدد 10، علاوه بر case مربوط به خودش، دو case بعدی هم اجرا شدن. پس باید همیشه از کلمه‌کلیدی break استفاده کنیم، مگر اینکه دلیل خاصی برای حذف اون داشته باشیم.

کلمه‌کلیدی default

گاهی وقت‌ها می‌خوایم زمانی که هیچ کدوم از شرط‌ها برقرار نمیشه یک دستور خاص رو اجرا کنیم. این کار رو با کلمه‌کلیدی default انجام می‌دیم:

const number = prompt("Enter 10");

switch(number) {
  case "10":
    alert("👍");
    break;
  <<default>>:
    alert("👎");
}

توی کد بالا اگه هر عددی غیر از 10 وارد بشه کد خط ۷ اجرا میشه. default شبیه به case هست؛ با این تفاوت که هیچ مقداری برای مقایسه جلوی اون قرار نگرفته.

مقایسه توی switch چطوری انجام می‌گیره؟ 🤔

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

switch(x) {
  case 10:
    alert("Ten");
}

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

if (x === 10) {
  alert("Ten");
}

اگه به شرط if نگاه کنیم، می‌بینیم که از علامت سه‌مساوی === یا Strict Equality Operator استفاده شده. پس مقایسه‌ای که توی سوئیچ انجام می‌گیره با === هست. با اجرا شدن کد زیر، فقط دستور خط ۸ برای ما اجرا میشه. چون خروجی 10 === "10" برابر با false هست:

const x = "10";

switch (x) {
  case 10:
    alert("Ten");
    break;
  default:
    alert("Invalid");
}

بدنه‌های چند خطی

برای خوانایی بیشتر، می‌تونم با استفاده از براکت‌ها {} بدنه‌های چندخطی رو محصور کنیم توی یک بلاک:

const x = "value1";

switch (x) {
  case "value1": <<{>>
    const a = 10;
    const b = 20;
    alert(a * b);
    break;
  <<}>>
  case "value2": <<{>>
    const a = 5;
    const b = 2;
    alert(a * b);
    break;
  <<}>>
}

کد بالا علاوه بر اینکه خوانایی بیشتری داره، از بروز یک خطا جلوگیری می‌کنه. اگه با مفهوم اسکوپ‌ها (که بعداً اونها رو بررسی می‌کنیم) آشنایی دارید، می‌دونیم که توی یک اسکوپ نمی‌تونیم توسط let یا const دو متغیر با یک اسم بسازیم. بلاک‌های این کد باعث به وجود اومدن حوزه اختصاصی برای متغیرهای a و b می‌شن. این کد رو ویرایش و براکت‌های case ها رو حذف کنین و بعد کد رو اجرا کنین.

اگه با این مفاهیم آشنایی ندارین، اشکالی نداره. بعداً با اونها آشنا می‌شیم 😉

خب دوستان این از دستور switch. این دستور جایگزین مناسبی برای if و else if های طولانی و پشت سر هم هست. روزتون خوش 😉👋