شرح جملة switch في JavaScript مع أمثلة عملية على switch case

مقدمة إلى جملة switch في JavaScript

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

في هذا الدليل، ستتعرف على طريقة عمل جملة switch، وكيفية كتابة case متعددة بشكل صحيح، ومتى يكون استخدامها أفضل من if..else. كما سنستعرض أمثلة عملية تساعدك على فهم الفكرة بسرعة وتطبيقها في مشاريعك.

كيف تعمل جملة switch في JavaScript؟

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

إليك مثالاً بسيطاً يوضح الفكرة:

var score = 20;

switch (score) {
  case 10:
    console.log("Score value is 10");
    break;
  case 20:
    console.log("Score value is 20");
    break;
  default:
    console.log("Score value is neither 10 or 20");
}

في المثال السابق، ستتم طباعة الرسالة "Score value is 20" لأن قيمة المتغير score تساوي 20، وبالتالي تم تنفيذ الحالة المطابقة.

ما المقصود بالتعبير داخل switch؟

داخل الأقواس () بعد switch، تضع التعبير الذي تريد اختباره. يمكن أن يكون هذا التعبير:

• متغيراً مثل age
• قيمة مباشرة مثل "A string"
• تعبيراً حسابياً مثل 5 + 5
• قيمة منطقية مثل true

مثال على ذلك:

var age = 29;

switch (age) {}
switch (true) {}
switch ("A string") {}
switch (5 + 5) {}

تقوم JavaScript بتقييم هذا التعبير مرة واحدة فقط، ثم تبدأ بمقارنته مع كل case بالترتيب.

مثال عملي على المقارنة بين حالات متعددة

في المثال التالي، يتم فحص قيمة المتغير flower ومقارنتها مع عدة احتمالات:

var flower = "tulip";

switch (flower) {
  case "rose":
    console.log("Roses are red");
    break;
  case "violet":
    console.log("Violets are blue");
    break;
  case "sunflower":
    console.log("Sunflowers are yellow");
    break;
  default:
    console.log("Please select another flower");
}

في هذا المثال، ستفحص اللغة ما إذا كانت قيمة flower تساوي:

• "rose"
• "violet"
• "sunflower"

وبما أن القيمة الفعلية هي "tulip"، فلن تتحقق أي حالة من الحالات السابقة، ولذلك سيتم تنفيذ قسم default.

دور default في جملة switch

تُستخدم الحالة default عندما لا يحدث أي تطابق مع الحالات الأخرى. وهي ليست إلزامية من الناحية النحوية، لكن وجودها يُعد ممارسة جيدة لأنها تمنحك مخرجاً واضحاً عندما لا تنطبق أي من الشروط المحددة.

من المهم أيضاً معرفة أنه لا يمكن كتابة أكثر من default واحدة داخل جملة switch، وإلا ستظهر لك رسالة خطأ.

لماذا نستخدم break بعد كل case؟

الكلمة المفتاحية break تُنهي تنفيذ جملة switch فور العثور على حالة مطابقة وتنفيذ الكود الخاص بها. وإذا حذفت break، فسيستمر التنفيذ إلى الحالات التالية حتى لو لم تكن مطابقة، وهي ظاهرة تُعرف باسم fall-through.

إليك مثالاً يوضح هذه المشكلة:

var flower = "rose";

switch (flower) {
  case "rose":
    console.log("Roses are red");
  case "violet":
    console.log("Violets are blue");
  case "sunflower":
    console.log("Sunflowers are yellow");
  default:
    console.log("Please select another flower");
}

رغم أن القيمة "rose" تطابق أول حالة، فإن غياب break سيجعل التنفيذ يستمر إلى باقي الحالات، لذلك ستُطبع عدة رسائل متتالية بدلاً من رسالة واحدة فقط.

عملياً، من الأفضل إضافة break بعد كل حالة، إلا إذا كنت تقصد الاستمرار عمداً إلى حالة لاحقة ضمن منطق محدد.

ملاحظة مهمة

لا تحتاج غالباً إلى break في آخر حالة إذا كانت الجملة ستنتهي عندها تلقائياً، لكن إضافتها لا تضر من ناحية الوضوح والتنظيم.

ملخص آلية عمل switch

يمكن تلخيص طريقة عمل جملة switch في الخطوات التالية:

1. تحديد تعبير واحد داخل switch تريد اختباره.
2. كتابة عدة حالات case لمقارنة هذا التعبير بقيم محددة.
3. إضافة حالة default لمعالجة عدم وجود تطابق.
4. وضع الكود المطلوب تنفيذه داخل كل حالة.
5. استخدام break لإيقاف التنفيذ بعد العثور على الحالة المناسبة.

متى تستخدم switch بدلاً من if..else؟

كل من switch وif..else يُستخدمان لبناء الشروط، لكن الاختيار بينهما يعتمد على نوع المقارنة التي تريد إجراءها.

استخدم switch عندما تكون القيم محددة وواضحة

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

استخدم if..else عندما تكون المقارنة مرنة

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

مثال:

var score = 70;

if (score > 50) {
  console.log("Score is higher than 50");
} else {
  console.log("Score is 50 or lower");
}

في هذا النوع من المقارنات، من الصعب استخدام switch بصورته التقليدية، لأن case مصممة أساساً لمطابقة القيم الدقيقة.

هل يمكن استخدام switch مع الشروط غير الدقيقة؟

من الناحية التقنية نعم، لكن ذلك يحتاج إلى حيلة برمجية تجعل التعبير الأساسي هو true، ثم تُكتب الشروط داخل case على شكل تعبيرات منطقية.

إليك مثالاً على ذلك:

var score = 70;

switch (score) {
  case score > 50:
    console.log("Score is higher than 50");
    break;
  default:
    console.log("Score is 50 or lower");
}

المثال السابق لا يعمل كما قد تتوقع، لأن قيمة switch هي رقم 70، بينما قيمة case score > 50 ستكون منطقية true أو false، وبالتالي لن يحدث التطابق الصحيح.

أما إذا استخدمت الصيغة التالية فسيعمل الكود:

var score = 70;

switch (true) {
  case score > 50:
    console.log("Score is higher than 50");
    break;
  default:
    console.log("Score is 50 or lower");
}

ورغم أن هذه الطريقة صالحة، فإنها غالباً أقل وضوحاً من استخدام if..else. لذلك، إن كان الشرط يعتمد على المقارنات المنطقية أو النطاقات، فالأفضل اختيار if..else للحفاظ على سهولة القراءة والصيانة.

أفضل الممارسات عند كتابة switch case

• استخدم switch فقط عندما تكون لديك قيم ثابتة ومحددة.
• أضف break بعد كل case لتجنب التنفيذ غير المقصود.
• لا تهمل default، لأنها تحسن من موثوقية الكود.
• احرص على أن تكون الحالات مرتبة وواضحة ليسهل تتبع المنطق.
• إذا زادت الشروط تعقيداً، ففكر في استخدام if..else أو إعادة هيكلة المنطق بالكامل.

مرجع سريع: الفرق بين switch وif..else

تعلم JavaScript بعمق وبشكل تدريجي

إذا أعجبك هذا الشرح وترغب في تطوير مستواك في JavaScript خطوة بخطوة، فهناك مصادر تعليمية كثيرة تساعدك على الانتقال من فهم الأساسيات إلى بناء تطبيقات تفاعلية حقيقية. الأهم هو أن تركّز على فهم منطق اللغة، لا مجرد حفظ الصياغة.

الخلاصة التقنية

جملة switch في JavaScript أداة ممتازة لتنظيم الشروط عندما تكون المقارنة مبنية على قيم ثابتة وواضحة. ميزتها الأساسية أنها تجعل الكود أكثر ترتيباً وأسهل قراءة من سلسلة طويلة من if..else في بعض السيناريوهات. لكن عند التعامل مع شروط مرنة أو نطاقات رقمية أو تعبيرات منطقية معقدة، يبقى if..else الخيار الأوضح والأكثر احترافية. باختصار: استخدم switch للقرارات المباشرة، واستخدم if..else عندما تحتاج إلى مرونة أكبر في التقييم.