شرح Switch في JavaScript - بديل منظم للجمل الشرطية المتعددة

🔀 جملة Switch في جافاسكريبت: التحكم الذكي في التدفق

تخيل أنك تقف عند مفترق طرق، ولكل طريق لافتة. جملة switch في جافاسكريبت تشبه هذه اللافتات الذكية التي توجه برنامجك إلى الكود المناسب للتنفيذ بناءً على قيمة محددة.

ببساطة، switch هي طريقة منظمة وأنيقة لكتابة سلسلة طويلة من جمل if...else if...else. فهي تختار كتلة من الأوامر لتنفيذها من بين عدة خيارات، اعتماداً على قيمة تعبير أو متغير معين.

📝 تركيب جملة Switch الأساسي

لنبدأ بفهم الشكل العام لجملة switch. هيا ننظر إلى تركيبها الأساسي:

switch(value_to_test) {
  case value_1:
    // الكود الذي ينفذ إذا كانت القيمة تساوي value_1
    break;
  case value_2:
    // الكود الذي ينفذ إذا كانت القيمة تساوي value_2
    break;
  default:
    // الكود الذي ينفذ إذا لم تتطابق القيمة مع أي حالة سابقة
}

دعونا نشرح كل جزء:

• switch(value_to_test): نبدأ جملة switch ونحدد بداخلها القيمة أو المتغير الذي نريد فحصه واتخاذ القرار بناءً عليه.
• case: تعني "حالة". نستخدمها لتعريف قيمة محددة نقارنها مع القيمة الأصلية. إذا تطابقتا، ينفذ الكود الموجود تحتها.
• break: أمر مهم جداً! يخبر جافاسكريبت بالتوقف عن تنفيذ المزيد من الحالات (case) والخروج من جملة switch بالكامل. نسيانه قد يسبب مشاكل غير متوقعة.
• default: تعني "افتراضي". هذا الجزء اختياري، لكنه مفيد. فهو يشبه else النهائي في جمل if، وينفذ إذا لم تتطابق القيمة مع أي من الحالات المذكورة أعلاه.

🧪 مثال عملي بسيط: اختيار يوم الأسبوع

لنطبق ما تعلمناه بمثال واقعي وبسيط. تخيل برنامجاً يخبرك بنشاط مقترح ليوم من أيام الأسبوع.

let day = "السبت"; // المتغير الذي سنختبر قيمته

switch(day) {
  case "السبت":
  case "الأحد":
    console.log("يوم عطلة! حان وقت الراحة. 😴");
    break;
  case "الاثنين":
    console.log("بداية أسبوع جديد! حان وقت العمل بجد. 💼");
    break;
  case "الثلاثاء":
  case "الأربعاء":
    console.log("منتصف الأسبوع، استمر في التقدم! 🔥");
    break;
  case "الخميس":
    console.log("آخر أيام العمل، تقريباً وصلت! 🏁");
    break;
  case "الجمعة":
    console.log("عطلة نهاية الأسبوع تبدأ! 🎉");
    break;
  default:
    console.log("هذا ليس يوماً صالحاً في الأسبوع.");
}
// المخرجات: "يوم عطلة! حان وقت الراحة. 😴"

انظر إلى السحر هنا! ✨ لاحظ كيف أن الحالتين "السبت" و "الأحد" تشتركان في نفس الكود. هذا ممكن لأننا وضعنا case الثانية مباشرة تحت الأولى دون كتابة break بينهما. عندما تكون day تساوي "السبت"، سينفذ الكود الموجود تحت case "السبت": ويستمر في التنفيذ (بسبب عدم وجود break) حتى يصل إلى break الموجود تحت console.log. هذه ميزة قوية في switch.

⚠️ لماذا أمر break مهم جداً؟

دعنا نرى ماذا يحدث إذا نسينا كتابة break في المثال السابق. سنعدل الكود قليلاً:

let favoriteFruit = "موز";

switch(favoriteFruit) {
  case "تفاح":
    console.log("التفاح صحي!");
  case "موز":
    console.log("الموز غني بالبوتاسيوم!");
  case "برتقال":
    console.log("البرتقال مليء بفيتامين C!");
  default:
    console.log("فاكهة لذيذة على أي حال!");
}

ما الذي ستطبعه الشاشة؟ ❓

ستكون المخرجات:

الموز غني بالبوتاسيوم!
البرتقال مليء بفيتامين C!
فاكهة لذيذة على أي حال!

هل لاحظت المشكلة؟ 🤔 بمجرد أن وجدت switch تطابقاً عند case "موز":، بدأت بتنفيذ الكود من تلك النقطة واستمرت في تنفيذ جميع الأكواد في الحالات (case) التي تليها واحدة تلو الأخرى، حتى نهاية جملة switch أو حتى تصادف أمر break. هذا السلوك يسمى "التساقط عبر" (Fall-through).

لذلك، تذكر دائماً استخدام break عند نهاية كل case (ما عدا عندما تريد هذا التساقط المتعمد، كما في مثال أيام العطلة).

🛡️ الحالة الافتراضية default

الحالة default هي الملاذ الآمن لبرنامجك. إنها تتعامل مع جميع القيم التي لم تتطابق مع أي حالة محددة مسبقاً.

let trafficLight = "أصفر";

switch(trafficLight) {
  case "أحمر":
    console.log("توقف!");
    break;
  case "أخضر":
    console.log("انطلق!");
    break;
  default:
    console.log("استعد... إما للتوقف أو الانطلاق.");
}
// المخرجات: "استعد... إما للتوقف أو الانطلاق."

في هذا المثال، بما أن trafficLight قيمتها "أصفر" ولم نحدد case لهذه القيمة، تم تنفيذ الكود الموجود في default. استخدام default يجعل برنامجك أكثر قوة وقدرة على التعامل مع المدخلات غير المتوقعة.

🔄 مقارنة سريعة: Switch vs. If/Else

متى نستخدم switch ومتى نستخدم if/else؟

• استخدم switch عندما يكون لديك متغير واحد تريد مقارنته بعدد من القيم الثابتة والمحددة. (مثل: يوم الأسبوع، لون إشارة المرور، اختيار من قائمة).
• استخدم if/else للمقارنات الأكثر تعقيداً، مثل: المقارنات المنطقية (>, <, >=)، أو التحقق من نطاق من القيم، أو عند اختيار متغيرات متعددة.

// هذا مثالي لـ if/else لأنه يتحقق من نطاق (أكبر من)
let score = 85;
if (score > 90) {
  console.log("ممتاز!");
} else if (score > 70) {
  console.log("جيد جداً!");
} // ... وهكذا

// هذا مثالي لـ switch لأنه يقارن قيمة ثابتة
let grade = "B";
switch(grade) {
  case "A": console.log("ممتاز"); break;
  case "B": console.log("جيد جداً"); break;
  // ... وهكذا
}

🎯 ملخص الدرس

لخصنا ما تعلمناه اليوم:

• جملة switch بديل منظم وأنيق لسلسلة طويلة من if...else if.
• نحدد القيمة للمقارنة داخل switch().
• نعرف الحالات المحتملة باستخدام case القيمة:.
• break أمر حاسم لإيقاف التنفيذ والخروج من switch.
• default اختياري، وينفذ إذا لم تطابق القيمة أي case.
• احذر من "التساقط عبر" (Fall-through) الناتج عن نسيان break.