تا اینجا تو سری مقالات «آموزش مقدماتی جاوااسکریپت»، قدم به قدم پیش رفتیم و هر بار با یه مفهوم مهم آشنا شدیم. از اصول اولیه مثل تعریف متغیرها و انواع داده‌ها شروع کردیم و بعدش به تبدیل نوع‌ها رسیدیم که چطور جاوااسکریپت گاهی خودش هوشمندانه مقادیر رو تغییر می‌ده و گاهی ما باید دست به کار بشیم. تو مقالات بعدی، تعامل با کاربر رو یاد گرفتیم؛ مثل گرفتن ورودی از کاربر با prompt و نشون دادن نتیجه با alert. بعدش رفتیم سراغ عبارات شرطی و دیدیم چطور می‌شه با استفاده از if...else و عملگر شرطی (?) برای کدهامون تصمیم گیری کنیم و مسیرهای مختلف رو مدیریت کنیم.

اما هر چی جلوتر می‌ریم، شرط هامون پیچیده‌تر و تعدادشون بیشتر می‌شه. اگه بخوایم برای هر سناریو کلی if و else بنویسیم، کدمون شلوغ و ناخوانا می‌شه. اینجاست که دستور switch وارد به کارمون میاد. این دستور به ما کمک می‌کنه تا شرایط مختلف رو ساده تر، منظم‌تر و خواناتر مدیریت کنیم. این دستور برای موقعیت هایی که چندین حالت مختلف رو باید بررسی کنیم، فوق العاده کاربردیه.

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

دستور switch در جاوااسکریپت

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

ساختار کلی switch به این شکله:

switch (expression) {
  case value1:
    // کدهایی که باید اجرا بشن اگر expression برابر با value1 بود
    break;
  case value2:
    // کدهایی که باید اجرا بشن اگر expression برابر با value2 بود
    break;
  default:
    // کدهایی که باید اجرا بشن اگر هیچ کدوم از شرط‌ها درست نبود
}

چطور کار می‌کنه؟

• expression: یه مقدار یا متغیره که می‌خوایم بررسیش کنیم.
• case value1، case value2،...: مقادیری که قراره با expression مقایسه بشن.
• break: جلوی ادامه اجرای کدهای case‌های دیگه رو می‌گیره (مهمه که فراموشش نکنیم).
• default: وقتی هیچ کدوم از case‌ها درست نباشن، این قسمت اجرا می‌شه (اختیاریه).

مثال ساده: انتخاب یک روز هفته

فرض کن می‌خوایم عددی که کاربر وارد کرده رو به اسم یه روز از هفته تبدیل کنیم:

let day = +prompt("یک عدد بین 1 تا 7 وارد کنید:", "");
switch (day) {
  case 1:
    alert("شنبه");
    break;
  case 2:
    alert("یک شنبه");
    break;
  case 3:
    alert("دوشنبه");
    break;
  case 4:
    alert("سه شنبه");
    break;
  case 5:
    alert("چهارشنبه");
    break;
  case 6:
    alert("پنج شنبه");
    break;
  case 7:
    alert("جمعه");
    break;
  default:
    alert("عددی بین 1 تا 7 وارد کنید!");
}

توضیحات مثال:

• متغیر day مقداری رو از کاربر می‌گیره که می‌خوایم باهاش کار کنیم.
• با دستور switch مقدار day رو بررسی می‌کنیم. مثلاً اگر برابر 1 باشه، کد مربوط به case 1 اجرا می‌شه و "شنبه" نشون داده می‌شه.
• اگر مقدار day هیچ کدوم از case‌ها رو نگیره (مثلاً کاربر عدد 10 وارد کنه)، بخش default اجرا می‌شه و یه پیام خطا نشون می‌ده.

نکته‌های مهم:

• break: بدون break، کد همه case‌ها رو یکی یکی اجرا می‌کنه، حتی اگر یکی درست باشه. پس حتماً برای هر case از break استفاده کن (مگر این که بخوای چندین case یه کد مشترک داشته باشن).
• default: اجباری نیست، ولی استفاده ازش برای مدیریت شرایط غیرمنتظره همیشه توصیه می‌شه.

مثال: بررسی مقدار

let a = 2 + 2;
switch (a) {
  case 3:
    alert('خیلی کم است');
    break;
  case 4:
    alert('دقیقاً همین است!');
    break;
  case 5:
    alert('خیلی زیاد است');
    break;
  default:
    alert('من چنین مقداری رو نمی‌شناسم');
}

توضیحات مثال:

• مقدار a برابر 4 هست.
• دستور switch از اولین case شروع به بررسی می‌کنه: اول بررسی می‌کنه که آیا a برابر 3 هست؟ نه! بعد می‌بینه که آیا a برابر 4 هست؟ بله! پس کد مربوط به case 4 اجرا می‌شه.
• وقتی break رو می‌بینه، از بلوک switch خارج می‌شه و باقی case‌ها نادیده گرفته می‌شن.

نتیجه: پیام "دقیقاً همین است!" نمایش داده می‌شه.

مثال: نبودن break

حالا همون مثال رو بدون break بررسی کنیم:

let a = 2 + 2;
switch (a) {
  case 3:
    alert('خیلی کم است');
  case 4:
    alert('دقیقاً همین است!');
  case 5:
    alert('خیلی زیاد است');
  default:
    alert('من چنین مقداری رو نمی‌شناسم');
}

توضیحات مثال:

• مقدار a همچنان 4 هست.
• وقتی switch به case 4 می‌رسه، شرط برقرار می‌شه و کد اجرا می‌شه. اما چون break وجود نداره، جاوااسکریپت بدون توقف به اجرای بقیه case‌ها ادامه می‌ده!
• نتیجه اینه که پیام‌های مربوط به case 4، case 5 و default پشت سر هم نمایش داده می‌شن.

نتیجه: پیام‌های زیر یکی یکی نشون داده می‌شن:

• "دقیقاً همین است!"
• "خیلی زیاد است"
• "من چنین مقداری رو نمی‌شناسم"

استفاده از عبارات به عنوان آرگومان

توی switch، هم می‌تونیم برای مقدار اصلی (expression) از عبارت‌ها استفاده کنیم، هم برای مقدارهای case.

مثال:

let a = "1";
let b = 0;
switch (+a) {
  case b + 1:
    alert("this runs, because +a is 1, exactly equals b+1");
    break;
  default:
    alert("این اجرا نمی‌شه");
}

توضیحات مثال:

• مقدار +a عدد 1 هست (چون رشته "1" با + به عدد تبدیل می‌شه).
• مقدار b + 1 هم عدد 1 هست.
• وقتی جاوااسکریپت به case b + 1 می‌رسه، می‌بینه که شرط برقرار هست. پس کد اون case اجرا می‌شه و پیام "این اجرا می‌شه، چون +a برابر با 1 است که دقیقاً برابر b + 1 می‌باشد" نمایش داده می‌شه.

نکته: گذاشتن علامت + قبل از هر مقداری در جاوااسکریپت، اون مقدار رو به عدد تبدیل می‌کنه. این روش مخصوصاً زمانی کاربرد داره که بخوایم مقادیر رشته ای (مثل ورودی کاربر یا داده‌های متنی) رو سریع به عدد تبدیل کنیم. مثلا:

let num = +"123"; // عدد 123
let invalidNum = +"abc"; // NaN (چون "abc" قابل تبدیل به عدد نیست)

این ترفند ساده و مفید به شما کمک می‌کنه از تبدیل دستی با Number() خلاص بشید و کدتون رو مختصرتر کنید.

گروه بندی case‌ها در switch

گاهی ممکنه بخوایم چند تا مقدار متفاوت از caseها، یه کد مشترک رو اجرا کنن. تو این حالت می‌تونیم اون‌ها رو گروه بندی کنیم.

برای مثال، فرض کنید می‌خوایم برای مقدارهای ۳ و ۵ یک پیام مشابه نمایش بدیم:

let a = 3;
switch (a) {
  case 4:
    alert('درست است!');
    break;
  case 3: // (*) گروه بندی دو case
  case 5:
    alert('اشتباه است!');
    alert('چرا کلاس ریاضی نمی‌ری؟');
    break;
  default:
    alert('نتیجه عجیبه. واقعاً!');
}

اینجا اگر مقدار a برابر با ۳ یا ۵ باشه، همون پیام "اشتباه است!" و "چرا کلاس ریاضی نمی‌ری؟" نمایش داده می‌شه.
قابلیت گروه بندی به این دلیله که switch/case بدون وجود break، اجراش رو به ترتیب ادامه می‌ده. تو مثال بالا، وقتی کد به case 3 می‌رسه (خطی که با (*) علامت گذاری شده)، چون break وجود نداره، اجرای کد به case 5 ادامه پیدا می‌کنه.

نکته: حواست باشه اگر از break استفاده نکنی، ممکنه کدهای ناخواسته اجرا بشن. برای کنترل دقیق تر، حتماً جایگاه break رو در نظر بگیر.

مثال: کد مشترک برای چند شرط

یه مثال دیگه برای حالتی که بخوایم چندین مقدار مختلف به یه کد مشترک برسن:

let fruit = prompt("یک میوه وارد کن:", "");
switch (fruit) {
  case "سیب":
  case "گلابی":
  case "به":
    alert("این میوه‌ها شبیه همن!");
    break;
  case "موز":
    alert("موز همیشه خاصه!");
    break;
  default:
    alert("نمی شناسمش!");
}

اینجا، اگر کاربر "سیب"، "گلابی" یا "به" وارد کنه، یه پیام مشترک نمایش داده می‌شه. چون این case‌ها همگی به یه دستور ختم می‌شن.

کی از switch استفاده کنیم؟

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

تفاوت نوع‌ها در switch

یکی از نکات مهمی که باید بهش توجه کنیم اینه که توی ساختار switch، بررسی برابری مقادیر همیشه به صورت دقیق و سخت گیرانه (strict) انجام می‌شه. یعنی نوع مقادیر هم باید یکی باشه تا شرط برقرار بشه.

بیاید این کد رو بررسی کنیم:

let arg = prompt("Enter a value?");
switch (arg) {
  case '0':
  case '1':
    alert('One or zero');
    break;
  case '2':
    alert('Two');
    break;
  case 3:
    alert('Never executes!');
    break;
  default:
    alert('An unknown value');
}

توضیحات مثال:

• اگه مقدار ورودی برابر با '0' یا '1' باشه (توجه کنید به رشته بودن این مقادیر)، پیام "One or zero" نمایش داده می‌شه.
• اگه مقدار ورودی '2' باشه، پیام "Two" نمایش داده می‌شه.
• اما برای case 3، کد هیچ وقت اجرا نمی‌شه! چرا؟ چون مقدار ورودی از prompt همیشه یه رشته برمی گرده (مثلاً "3") و این مقدار با عدد 3 به صورت دقیق برابر نیست (یعنی "3" !== 3). به همین خاطر، کدی که داخل case 3 نوشتیم به صورت یک "کد مرده" باقی می‌مونه و هیچ وقت اجرا نمی‌شه.
  اگه مقدار وارد شده با هیچ کدوم از caseها مطابقت نداشته باشه، default اجرا می‌شه و پیام "An unknown value" نمایش داده می‌شه.

نکته: همیشه یادت باشه که توی switch، بررسی‌ها بر اساس برابری دقیق (strict equality) انجام می‌شن. پس اگه مقادیر و نوع‌ها یکی نباشن، شرط برقرار نمی‌شه!

مقایسه if-else و switch

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

چه موقع از if-else استفاده کنیم؟

• وقتی شرط‌های شما پیچیده هستن و نیاز به ترکیب چندین شرط با عملگرهای منطقی مثل && و || دارید.
• وقتی مقایسه‌ها روی متغیرها یا عبارات مختلف انجام می‌شه، نه فقط یک مقدار ثابت.
• برای شرایطی که ترتیب بررسی شرط‌ها اهمیت داره.

مثال:

let age = 25;
if (age < 18) {
  alert("شما کودک هستید.");
} else if (age >= 18 && age < 60) {
  alert("شما بزرگسال هستید.");
} else {
  alert("شما سالمند هستید.");
}

در این مثال اول، می شه از switch هم استفاده کرد، ولی مناسب نیست. چرا؟ چون switch برای مواقعیه که بخوایم یک مقدار ثابت (مثل عدد یا رشته) رو با گزینه‌های مختلف مقایسه کنیم. در این مثال، ما داریم شرط‌های ترکیبی و بازه ای مثل age >= 18 && age < 60 رو بررسی می‌کنیم، که توی switch قابل پیاده سازی نیست.

برای روشن‌تر شدن موضوع، اگه بخوایم همون مثال سن رو با switch بنویسیم، باید مقدار دقیقی برای هر شرط تعریف کنیم، مثلاً:

let age = 25;
switch (true) {
  case (age < 18):
    alert("شما کودک هستید.");
    break;
  case (age >= 18 && age < 60):
    alert("شما بزرگسال هستید.");
    break;
  default:
    alert("شما سالمند هستید.");
}

اینجا از switch(true) استفاده کردیم که باعث می‌شه هر شرط بررسی بشه. اما این حالت واقعاً کد رو پیچیده و ناخوانا می‌کنه و دیگه مزیت اصلی switch که سادگی و خواناییه، از بین می‌ره. در چنین مواردی، استفاده از if-else خیلی تمیزتر و قابل فهم تره.

چه موقع از switch استفاده کنیم؟

• وقتی دارید یک مقدار ثابت (مثل یک عدد یا رشته) رو با گزینه‌های مختلف مقایسه می‌کنید.
• وقتی تعداد گزینه‌ها زیاده و نمی‌خواید کدتون شلوغ بشه.
• وقتی دنبال ساختاری مرتب‌تر و خواناتر برای مدیریت این شرایط هستید.

مثال:

let day = 3;
switch (day) {
  case 1:
    alert("شنبه");
    break;
  case 2:
    alert("یک شنبه");
    break;
  case 3:
    alert("دوشنبه");
    break;
  default:
    alert("روز نامعتبر");
}

نکته: هر دو روش در جای خودشون مفید هستن. اگه شرط‌ها ساده و تعدادشون زیاد باشه، switch انتخاب بهتریه چون کد رو خواناتر می‌کنه. ولی اگر شرایط پیچیده‌تر باشه، یا از مقایسه‌های منطقی استفاده کنید، بهتره سراغ if-else برید.

استفاده‌های واقعی از switch

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

۱. مدیریت نقش کاربران در سیستم

فرض کنید در یک سیستم مدیریت کاربران، می‌خوایم نقش هر کاربر رو بررسی کنیم و بر اساس نقشش، دسترسی‌های مختلف بهش بدیم. مثلاً مدیر (admin) دسترسی کامل داره، کاربر عادی (user) فقط می‌تونه پروفایل خودش رو ببینه، و مهمان (guest) فقط می‌تونه به صفحه خوشامد دسترسی داشته باشه.

let role = prompt("Enter your role (admin, user, guest):", "");
switch (role) {
  case "admin":
    alert("Welcome, Admin! You have full access.");
    break;
  case "user":
    alert("Welcome, User! You can view your profile.");
    break;
  case "guest":
    alert("Welcome, Guest! Please sign up to gain more access.");
    break;
  default:
    alert("Role not recognized. Please contact support.");
}

توی این مثال، یه متغیر به اسم role داریم که نقش کاربر رو ذخیره می‌کنه. کاربر می‌تونه یکی از نقش‌های admin، user یا guest رو وارد کنه.

ساختار کد: با استفاده از switch، مقدار role رو بررسی می‌کنیم:

• اگر نقش برابر با admin باشه، پیام "Welcome, Admin! You have full access." نمایش داده می‌شه. یعنی این کاربر دسترسی کامل داره.
• اگر نقش user باشه، پیام "Welcome, User! You can view your profile." نمایش داده می‌شه. این یعنی کاربر عادی فقط می‌تونه پروفایل خودش رو ببینه.
• اگر نقش guest باشه، پیام "Welcome, Guest! Please sign up to gain more access." نمایش داده می‌شه. یعنی کاربر به عنوان مهمان فقط دسترسی محدودی داره.
• اگر نقش هیچ کدوم از این موارد نباشه، پیام پیش فرض (default) نمایش داده می‌شه: "Role not recognized. Please contact support." این پیام برای حالتیه که کاربر نقش اشتباهی وارد کنه یا نقشی غیرمنتظره داشته باشیم.

۲. محاسبه تخفیف بر اساس کد تخفیف

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

let discountCode = prompt("Enter your discount code:", "");
switch (discountCode) {
  case "WELCOME10":
    alert("You get 10% off!");
    break;
  case "SALE20":
    alert("You get 20% off!");
    break;
  case "BLACKFRIDAY50":
    alert("You get 50% off! Lucky you!");
    break;
  default:
    alert("Invalid discount code. Please try again.");
}

اینجا یه سیستم ساده برای اعمال تخفیف داریم. متغیر discountCode قراره کد تخفیف کاربر رو ذخیره کنه. هر کد، درصد تخفیف مشخصی داره.

ساختار کد: با استفاده از switch، مقدار discountCode رو بررسی می‌کنیم:

• اگر کاربر کد WELCOME10 رو وارد کنه، پیام "You get 10% off!" نمایش داده می‌شه و بهش اطلاع داده می‌شه که تخفیف ۱۰ درصدی داره.
• اگر کد SALE20 وارد بشه، پیام "You get 20% off!" نمایش داده می‌شه. این یعنی تخفیف ۲۰ درصدی برای اون کاربر اعمال می‌شه.
• اگر کد BLACKFRIDAY50 باشه، پیام "You get 50% off! Lucky you!" نمایش داده می‌شه. این کد برای تخفیف‌های خیلی ویژه هست.
• اگر کد اشتباهی وارد بشه یا کدی که ما پشتیبانی نمی‌کنیم، پیام پیش فرض (default) اجرا می‌شه: "Invalid discount code. Please try again." این پیام برای مواقعی هست که کاربر کدی نامعتبر وارد کرده.

نکته کاربردی: این نوع بررسی کدها برای فروشگاه‌های اینترنتی خیلی مفیده، چون معمولاً چندین کد تخفیف داریم که برای گروه‌های مختلف مشتری‌ها تعریف می‌شه.

۳. تعیین پیام خوش آمد بر اساس زبان کاربر

فرض کنید کاربر زبان مورد علاقه خودش رو انتخاب می‌کنه، و سیستم بر اساس اون زبان، پیام خوش آمد نشون می‌ده.

let language = prompt("Choose your language (en, fa, es):", ""); 
switch (language) {
  case "en":
      alert("Welcome!");
      break;
  case "fa":
      alert("خوش آمدید!");   
      break;
  case "es":
      alert("¡Bienvenido!");
      break;
  default:
      alert("Language not supported. Defaulting to English: Welcome!"); 
      }

این مثال برای سایت هایی که چندزبانه هستن خیلی کاربردیه. متغیر language زبانی رو که کاربر انتخاب می‌کنه ذخیره می‌کنه.

ساختار کد: با استفاده از switch، مقدار language رو بررسی می‌کنیم:

• اگر کاربر زبان en رو انتخاب کنه، پیام "Welcome!" نمایش داده می‌شه.
• اگر زبان fa انتخاب بشه، پیام "خوش آمدید!" نمایش داده می‌شه.
• اگر زبان es انتخاب بشه، پیام "¡Bienvenido!" نشون داده می‌شه.
• اگر زبانی وارد بشه که ما پشتیبانی نمی‌کنیم، پیام پیش فرض (default) اجرا می‌شه: "Language not supported. Defaulting to English: Welcome!" این یعنی زبان انتخابی پشتیبانی نمی‌شه و پیام به زبان پیش فرض (انگلیسی) نمایش داده می‌شه.

نکته کاربردی: این روش کمک می‌کنه تجربه کاربری برای کاربرانی که از زبان‌های مختلف استفاده می‌کنن بهتر بشه و هر کاربر با زبان دلخواه خودش تعامل کنه.

نکات مهم درباره این مثال ها

• خوانایی: دستور switch به ما اجازه می‌ده کدهایی که حالت‌های مختلف دارن رو منظم‌تر بنویسیم.
• پیشگیری از خطا: همیشه از default استفاده کنید تا رفتار پیش فرض رو برای مقادیر غیرمنتظره تعریف کنید.
• عدم نیاز به محاسبات پیچیده: اگر شرط‌ها نیاز به محاسبات ترکیبی یا بازه ای داشته باشن، if-else بهتر عمل می‌کنه.

خطاهای رایج در استفاده از switch و نکاتی برای اجتناب از آن ها

استفاده از دستور switch می‌تونه کدهاتون رو مرتب‌تر و خواناتر کنه، اما گاهی اشتباهاتی رخ می‌ده که ممکنه به مشکلاتی مثل رفتارهای غیرمنتظره یا سختی در دیباگ کردن منجر بشه. در اینجا به چند خطای رایج اشاره می‌کنیم و توضیح می‌دیم چطور می‌شه از اون‌ها جلوگیری کرد.

۱. فراموش کردن break

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

مثال اشتباه:

let day = 3;
switch (day) {
  case 1:
    alert("Monday");
  case 2:
    alert("Tuesday");
  case 3:
    alert("Wednesday");
  default:
    alert("Invalid day");
}

اگر مقدار day برابر ۳ باشه، پیام‌های Wednesday، Invalid day و حتی case‌های بعدی (اگه وجود داشته باشن) نمایش داده می‌شن.

راه حل: همیشه مطمئن بشید که بعد از هر case از break استفاده کردید، مگر اینکه عمداً بخواید چند case پشت سر هم اجرا بشن.

مثال صحیح:

switch (day) {
  case 1:
    alert("Monday");
    break;
  case 2:
    alert("Tuesday");
    break;
  case 3:
    alert("Wednesday");
    break;
  default:
    alert("Invalid day");
}

۲. عدم تطابق نوع داده ها

خطای رایج: در دستور switch، مقایسه‌ها همیشه با استفاده از برابری سخت گیرانه (===) انجام می‌شن. این یعنی نوع داده‌ها (data type) هم باید برابر باشن. اگر نوع داده ی case با مقدار expression متفاوت باشه، حتی اگر مقدارها برابر به نظر برسن، شرط برقرار نمی‌شه.

مثال اشتباه:

let num = "3";
switch (num) {
  case 3:
    alert("Number is 3");
    break;
  default:
    alert("Number is not 3");
}

پیام Number is not 3 نمایش داده می‌شه، چون مقدار num یک رشته ("3") هست، اما مقدار در case 3 یک عدد (3) هست.

راه حل: همیشه مطمئن بشید که نوع داده‌ها مطابقت دارن. اگر مقدار شما رشته ای هست ولی قصد دارید با عدد مقایسه کنید، باید مقدار رو به نوع مناسب تبدیل کنید.

مثال صحیح:

let num = "3";
switch (+num) { // تبدیل رشته به عدد با علامت +
  case 3:
    alert("Number is 3");
    break;
  default:
    alert("Number is not 3");
}

۳. استفاده نادرست از default

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

مثال اشتباه:

let fruit = "apple";
switch (fruit) {
  case "banana":
    alert("It's a banana");
    break;
  case "orange":
    alert("It's an orange");
    break;
}

اگر مقدار fruit چیزی غیر از "banana" یا "orange" باشه (مثل "apple")، هیچ اتفاقی نمیوفته و کاربر نمی‌فهمه که چیزی اشتباه هست.

راه حل: همیشه از default برای مدیریت موارد غیرمنتظره استفاده کنید. default رو همیشه در انتهای switch قرار بدید.

مثال صحیح:

switch (fruit) {
  case "banana":
    alert("It's a banana");
    break;
  case "orange":
    alert("It's an orange");
    break;
  default:
    alert("I don't recognize this fruit");
}

۴. تکرار غیرضروری case

خطای رایج: بعضی وقت‌ها به جای گروه بندی case‌های مشابه، هر کدوم رو جداگانه می‌نویسن که کد رو شلوغ و ناخوانا می‌کنه.

مثال اشتباه:

let grade = "A";
switch (grade) {
  case "A":
    alert("Excellent");
    break;
  case "B":
    alert("Excellent");
    break;
  case "C":
    alert("Excellent");
    break;
}

راه حل: برای جلوگیری از تکرار کد، case هایی که نیاز به اجرای کد مشترک دارن رو گروه بندی کنید.

مثال صحیح:

switch (grade) {
  case "A":
  case "B":
  case "C":
    alert("Excellent");
    break;
  default:
    alert("Try harder next time");
}

۵. فراموش کردن نیاز به خوانایی کد

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

راه حل: اگر تعداد زیادی case دارید یا منطق شما خیلی پیچیده شده، بهتره به جای switch از ساختارهای دیگه مثل if-else یا حتی آبجکت‌های نقشه برداری (mapping objects) استفاده کنید.

تمرین‌های پایانی

برای تثبیت مفاهیم و اطمینان از یادگیری، تمرین‌های زیر رو انجام بدید. حتماً قبل از نگاه کردن به جواب ها، تلاش کنید خودتون راه حل رو پیدا کنید. حتی اگه اولش به نظر سخت بیاد یا چند بار اشتباه کنید، این بخش از یادگیریه! دیدن جواب بدون تلاش مثل خوندن دستور غذاست بدون اینکه چیزی بپزید. پس اول دست به کار بشید و کدتون رو بنویسید. اگر به نتیجه نرسیدید، بعد سراغ پاسخ‌ها برید تا بهتر درکش کنید. 😉

تمرین 1: بازنویسی switch به if

عبارت switch زیر رو به if..else بازنویسی کنید:

switch (browser) {
  case 'Edge':
    alert("You've got the Edge!");
    break;
  case 'Chrome':
  case 'Firefox':
  case 'Safari':
  case 'Opera':
    alert('Okay we support these browsers too');
    break;
  default:
    alert('We hope that this page looks ok!');
}

پاسخ:

برای اینکه عملکرد switch رو دقیق بازسازی کنیم، باید از مقایسه دقیق (strict comparison) استفاده کنیم. اما برای مقادیر رشته ای، استفاده از == هم کفایت می‌کنه.

if (browser == 'Edge') {
  alert("You've got the Edge!");
} else if (browser == 'Chrome' || browser == 'Firefox' || browser == 'Safari' || browser == 'Opera') {
  alert('Okay we support these browsers too');
} else {
  alert('We hope that this page looks ok!');
}

توضیح راه حل:

• شرط browser == 'Edge' به همون صورت به if منتقل شده.
• مقادیر مشترک مثل 'Chrome', 'Firefox', 'Safari', 'Opera' با استفاده از عملگر || ترکیب شده اند تا یک شرط if رو تشکیل بدن.
• بخش default هم به else منتقل شده.

نکته: در حالی که این کد از نظر عملکرد درست کار می‌کنه، اما استفاده از switch همچنان کد رو خواناتر و منظم‌تر نگه می‌داره.

تمرین 2: بازنویسی if به switch

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

let a = +prompt('a?', '');
if (a == 0) {
  alert(0);
}
if (a == 1) {
  alert(1);
}
if (a == 2 || a == 3) {
  alert('2,3');
}

راه حل:

برای بازنویسی این کد، از caseهای جداگانه برای مقادیر 0، 1، 2، و 3 استفاده می‌کنیم:

let a = +prompt('a?', '');
switch (a) {
  case 0:
    alert(0);
    break;
  case 1:
    alert(1);
    break;
  case 2:
  case 3:
    alert('2,3');
    break;
}

توضیح راه حل:

• مقدار a == 0 به case 0 تبدیل شده و کد داخلش به همون شکل قرار گرفته.
• مقدار a == 1 به case 1 تبدیل شده.
• شرط a == 2 || a == 3 به دو case پشت سر هم (case 2 و case 3) تقسیم شده و چون برای هر دو مقدار یک کد مشترک داریم، break در پایان case 3 قرار گرفته.
• استفاده از break در انتهای caseها برای جلوگیری از اجرای کدهای بعدی ضروریه.

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

تمرین 3: تعیین فصل سال

با استفاده از switch، کدی بنویسید که یک عدد بین ۱ تا ۱۲ (شماره ماه) رو بگیره و نام فصل مرتبط رو چاپ کنه:

• ماه‌های ۱، ۲ و ۱۲ -> "زمستان"
• ماه‌های ۳، ۴ و ۵ -> "بهار"
• ماه‌های ۶، ۷ و ۸ -> "تابستان"
• ماه‌های ۹، ۱۰ و ۱۱ -> "پاییز"

راه حل:

let month = +prompt("شماره ماه را وارد کنید (۱ تا ۱۲):", "");
switch (month) {
  case 12:
  case 1:
  case 2:
    alert("زمستان");
    break;
  case 3:
  case 4:
  case 5:
    alert("بهار");
    break;
  case 6:
  case 7:
  case 8:
    alert("تابستان");
    break;
  case 9:
  case 10:
  case 11:
    alert("پاییز");
    break;
  default:
    alert("عدد وارد شده صحیح نیست.");
}

توضیح راه حل:

• ابتدا کاربر عدد ماه رو وارد می‌کنه.
• با استفاده از switch، ماه‌های مرتبط به هر فصل رو گروه بندی کردیم.
• اگر عدد وارد شده خارج از بازه ۱ تا ۱۲ باشه، پیام خطا نمایش داده می‌شه.

تمرین 4: محاسبه عملیات ریاضی

کدی بنویسید که دو عدد و یک عملگر ریاضی (+, -, *, /) رو از کاربر بگیره و نتیجه رو بر اساس عملگر محاسبه کنه.

راه حل:

let num1 = +prompt("عدد اول را وارد کنید:", "");
let num2 = +prompt("عدد دوم را وارد کنید:", "");
let operator = prompt("عملگر را وارد کنید (+, -, *, /):", "");
switch (operator) {
  case "+":
    alert(`نتیجه: ${num1 + num2}`);
    break;
  case "-":
    alert(`نتیجه: ${num1 - num2}`);
    break;
  case "*":
    alert(`نتیجه: ${num1 * num2}`);
    break;
  case "/":
    alert(num2 !== 0 ? `نتیجه: ${num1 / num2}` : "تقسیم بر صفر مجاز نیست.");
    break;
  default:
    alert("عملگر وارد شده معتبر نیست.");
}

توضیح راه حل:

• کاربر دو عدد و یک عملگر رو وارد می‌کنه.
• با استفاده از switch، عملگر رو بررسی می‌کنیم و محاسبات مربوطه رو انجام می‌دیم.
• برای جلوگیری از خطا، شرطی اضافه کردیم که اگر عدد دوم صفر باشه و عملگر / باشه، پیام خطای مناسب نمایش داده بشه.

تمرین 5: انتخاب زبان

کدی بنویسید که از کاربر زبان دلخواهش رو بپرسه (fa, en, es) و متن "سلام"، "Hello" یا "Hola" رو بر اساس زبان انتخابی نمایش بده.

راه حل:

let lang = prompt("زبان خود را وارد کنید (fa, en, es):", "").toLowerCase();
switch (lang) {
  case "fa":
    alert("سلام");
    break;
  case "en":
    alert("Hello");
    break;
  case "es":
    alert("Hola");
    break;
  default:
    alert("زبان وارد شده پشتیبانی نمی‌شود.");
}

توضیح راه حل:

• کاربر زبان مورد نظر رو وارد می‌کنه و با toLowerCase() اطمینان حاصل می‌کنیم که حروف بزرگ یا کوچک تفاوتی نداشته باشن.
• هر زبان به یک case خاص اختصاص داده شده.
• اگر زبان وارد شده معتبر نباشه، پیام خطا نمایش داده می‌شه.

تمرین 6: بررسی نمره و تعیین سطح

برنامه ای بنویسید که یک نمره (۰ تا ۱۰۰) رو از کاربر بگیره و سطح مربوطه رو نمایش بده:

• ۹۰ تا ۱۰۰ -> "عالی"
• ۷۰ تا ۸۹ -> "خوب"
• ۵۰ تا ۶۹ -> "متوسط"
• کمتر از ۵۰ -> "نیاز به تلاش بیشتر"

راه حل:

let score = +prompt("نمره خود را وارد کنید (۰ تا ۱۰۰):", "");
switch (true) {
  case score >= 90 && score <= 100:
    alert("عالی");
    break;
  case score >= 70 && score < 90:
    alert("خوب");
    break;
  case score >= 50 && score < 70:
    alert("متوسط");
    break;
  case score >= 0 && score < 50:
    alert("نیاز به تلاش بیشتر");
    break;
  default:
    alert("نمره وارد شده معتبر نیست.");
}

توضیح راه حل:

• از switch با شرط‌های منطقی (true) استفاده کردیم تا محدوده نمرات رو بررسی کنیم.
• هر case یک محدوده خاص از نمرات رو پوشش می‌ده.
• اگر نمره خارج از بازه ۰ تا ۱۰۰ باشه، پیام خطای مناسب نشون داده می‌شه.

تمرین 7: تعیین نوع حیوان

برنامه ای بنویسید که نام یک حیوان رو از کاربر بگیره و نوع اون رو مشخص کنه:

• dog, cat -> "پستاندار"
• eagle, parrot -> "پرنده"
• snake, lizard -> "خزنده"

راه حل:

let animal = prompt("یک حیوان وارد کنید:", "").toLowerCase();
switch (animal) {
  case "dog":
  case "cat":
    alert("پستاندار");
    break;
  case "eagle":
  case "parrot":
    alert("پرنده");
    break;
  case "snake":
  case "lizard":
    alert("خزنده");
    break;
  default:
    alert("حیوان وارد شده در لیست نیست.");
}

توضیح راه حل:

• نام حیوان از کاربر گرفته می‌شه و با toLowerCase() مطمئن می‌شیم که حروف بزرگ و کوچک تاثیری نداشته باشه.
• حیوانات مشابه رو در یک گروه قرار دادیم تا پیام مناسب نمایش داده بشه.
• اگر حیوان وارد شده در لیست نباشه، پیام پیش فرض نمایش داده می‌شه.

جمع بندی

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

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

به جز این، به نکته ای مهم در مورد نوع مقادیر (type) اشاره کردیم: اینکه مقایسه‌ها در switch همیشه به صورت سخت گیرانه (strict equality) انجام می‌شن و باید نوع مقادیر کاملاً یکسان باشه تا شرط برقرار بشه. این موضوع رو با مثال هایی مثل مقایسه مقادیر رشته ای و عددی توضیح دادیم.

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

در نهایت، تمرین هایی طراحی کردیم تا مفاهیم آموخته شده رو در عمل به کار ببرید. توصیه می‌کنیم حتماً قبل از دیدن پاسخ، خودتون تلاش کنید تا این مباحث توی ذهنتون تثبیت بشه.