آموزش مقدماتی جاوااسکریپت: دستور switch
آموزش مقدماتی جاوااسکریپت: دستور switch
۲۴۵ بازدید
0 نظر
۰۵ اسفند ۱۴۰۳

تا اینجا تو سری مقالات «آموزش مقدماتی جاوااسکریپت»، قدم به قدم پیش رفتیم و هر بار با یه مفهوم مهم آشنا شدیم. از اصول اولیه مثل تعریف متغیرها و انواع داده ها شروع کردیم و بعدش به تبدیل نوع ها رسیدیم که چطور جاوااسکریپت گاهی خودش هوشمندانه مقادیر رو تغییر می ده و گاهی ما باید دست به کار بشیم. تو مقالات بعدی، تعامل با کاربر رو یاد گرفتیم؛ مثل گرفتن ورودی از کاربر با 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 آشنا شدیم تا از اون ها دوری کنیم.

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

سحر پاشائی
دیدگاه کابران
سفر یادگیری را با علم ساز آغاز کنید
021-71058588

اصفهان، خیابان حمزه اصفهانی، بن بست تخت جمشید(18) ، پلاک ۴

دفتر تهران: تهران، خیابان سهروردی شمالی، خیابان هویزه شرقی، پلاک 20، طبقه دوم، واحد 6

تلفن مشاوره

علم‌ساز، ساز یادگیریتمام حقوق این وبسایت برای علم ساز محفوظ می باشد.