الجملة الشرطية Switch في JavaScript

الجملة الشرطية Switch في JavaScript

تعمل الجملة الشرطية switch في JavaScript كآلية واضحة لمعالجة تعدد الحالات المحتملة لقيمة واحدة، خصوصاً عندما يصبح استخدام سلاسل طويلة من if…else أقل عملياً... فكيف يمكن هذا ...!!

تكلمنا في مقال سابق عن الجملة الشرطية If..else t جافا سكريبت.و يعرض المقال الأساس الذي تقوم عليه الجملة الشرطية Switch جافا سكريبت ، بدءاً من مفهوم Switch وطريقة عملها، مروراً بالشكل القياسي الذي تُكتب به، ووصولاً إلى أمثلة تطبيقية توضّح متى تكون أكثر فاعلية. كما يناقش الفروقات الجوهرية بينها وبين تراكيب if...else if...else، مع إبراز الظروف التي تجعل كل خيار أكثر ملاءمة من الآخر من منظور أداء ووضوح الكود… لنبدأ

في هذا المقال نتعرف على:

• Switch في JavaScript.
• البنية الأساسية لـ switch في JavaScript.
• أمثلة تطبيقية على استخدام Switch في JavaScript.
• switch مقابل if...else if...else.

Switch في JavaScript

بدءًا من الإصدار 1.2 من جافا سكريبت، تم استخدام جملة التبديل Switch التي تعالج تنفيذ فرع متعدد الاتجاهات، وهي تفعل ذلك بكفاءة أكبر من تكرار عبارات if...else if. حيث يمكن استخدام عبارات if...elseif متعددة، لتنفيذ فرع متعدد الاتجاهات. ولكن، ليس هذا هو الحل الأمثل دائمًا، خاصةً عندما تعتمد جميع الفروع على قيمة متغير واحد.

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

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

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

البنية الأساسية لـ switch في JavaScript

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

وتكون البنية الأساسية لتكوين switch في JavaScript كتالي:

switch (expression) {
   case value 1: block statement(s)
   break;
   
   case value 2: block statement(s)
   break;
   ...
   
   case value n: block statement(s)
   break;
   
   default: block statement(s)
}

الكلمات الرئيسية المستخدمة مع Switch في جافا سكريبت :

• switch (الشرط): switch هي الكلمة التي تعلن عن وجود جملة تحكم من نوع switch , بينما الشرط هو المكان الذي نضع فيه القيمة التي نريد اختبارها.
• القيمة case : case تعلن عن إنشاء حالة من حالات switch بينما تمثل القيمة التسمية المحتملة للحالة . إذا كانت قيمة الشرط تتطابق تمامًا (===) مع القيمة المحددة في case، فسيتم تنفيذ الكود أسفل هذه الحالة.
• break: هذه الكلمة المفتاحية حيوية جدًا. بمجرد تنفيذ الكود الخاص بحالة معينة، تقوم break بإنهاء جملة switch بالكامل، وتمنع "السقوط" (fall-through) إلى الحالات التالية.
• default: (اختياري) هي الحالة التي يتم تنفيذها إذا لم تتطابق قيمة الشرط مع أي من الحالات (case) المحددة. تعمل كـ else في جملة if/else.

عبر المخطط الانسيابي واستعراض صياغة الكود تتضح لنا البنية الأساسية لـ switch. أيضاً اتضح لنا دور العناصر المحورية مثل case و break و default في التحكم بتدفق البرنامج ومنع السلوك غير المقصود. ولتكتمل لدينا الصورة و يصبح بالإمكان التعامل مع switch بوضوح أكبر،و لفهم سبب اعتمادها في المواقف التي تتطلب مساراً منطقياً منسقاً يعتمد على قيمة واحدة محددة. نستعرض فيما يلي أمثلة تطبيقية لاستخدام Switch في JavaScript

أمثلة تطبيقية على استخدام Switch في JavaScript

المثال الأول:

في هذا المثال سنقوم بطباعة يوم من ايام الاسبوع بناء على قيمة متغير، لنفترض أن لدينا متغيرًا يمثل رقم اليوم (من 1 إلى 7) ونريد عرض اسم اليوم المقابل يكون الكود كالتالي :

const dayNumber = 4; 
let dayName;

switch (dayNumber) {
  case 1:{
    dayName = "Sunday";
    console.log(dayName); }
    break;
  case 2:{
    dayName = "Monday";
    console.log(dayName); }
    break;
  case 3:{
    dayName = "Tuesday ";
    console.log(dayName); }
    break; 
  case 4:{
    dayName = "Wednesday";
    console.log(dayName);  }
    break;
 case 5:{
     dayName = "Thursday";
     console.log(dayName); }
    break;
 case 6:
     dayName = "Friday ";
    break;
 case 7:{
     dayName = "Saturday ";
    console.log(dayName); }
    break;
  default:
    console.log("Please enter the right day number. \nThe day numbers are between 1 to 7, where 1 is Sunday.");
}

في هذا المثال عندما تكون قيمة المتغير dayName بين القيم 1 و 7 طباعة اسم اليوم ولكن بخلاف ذلك سيتم طباعة جملة ".....Please enter the right day number."

المثال الثاني:

رأينا في المثال السابق ايضاً استخدام break بعد كل حالة وذكرنا أنها تمنع السقوط (fall-through) إلى الحالة التالية مما يعني أنه في حال لم تتم إضافة break في نهاية حالة معينة، فسيستمر تنفيذ الكود في الحالة التالية، بغض النظر عما إذا كانت القيمة تطابقها أم لا. هذا ما يُعرف بـ "السقوط" (Fall-Through) وهو مفيد أحيانًا حيث يمكن استخدامه عن قصد لتجميع حالات متعددة تؤدي إلى نفس الإجراء.

في المثال التالي نرى استخدام السقوط (fall-through) عن قصد لتجميع الحالات المتعددة، في الكود التالي سوف نحدد بواسطة رقم اليوم ما إذا كان اليوم من أيام العمل او من أيام عطلة نهاية الأسبوع :

const dayNumber = 3; 
switch (dayNumber) {
  case 1:
  case 2:
  case 3:
  case 4: 
    console.log("It is a workday"); 
  break;
  case 5:
  case 6:
  case 7:
    console.log("t is a weekend day d" ); 
  break;
  default:
    console.log("Please enter the right day number. \nThe day numbers are between 1 to 7, where 1 is Sunday.");
}

قم بتجربة قيم متعددة للمتغير dayNumber وشاهد النتائج فبدون استخدام break بين الحالات يمكن تجميع حالات متعددة لتنفيذ تعليمات محددة.

switch مقابل if...else if...else

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

1. طريقة اختبار الشرط (Condition Testing)

وجه المقارنة	جملة switch	سلسلة if...else if...else
الشرط الرئيسي	تختبر تعبيرًا واحدًا (عادةً متغير) مقابل قيم متعددة ثابتة (literals)	يمكن أن تختبر شروطًا مختلفة في كل كتلة if أو else if.
نوع المقارنة	تستخدم مقارنة المساواة الصارمة (===) بين قيمة التعبير وقيمة الحالة (case).	يمكن أن تستخدم أي معامل مقارنة: (==, !=, <, >, &&)
التركيز	اختبار التطابق مع مجموعة محددة من القيم.	اختبار النطاقات، أو المتغيرات المتعددة، أو المنطق المعقد.

المزيد عن المساواة الصارمة (===) ومعاملات المقارنة في مقال عن المعاملات في JavaScript.

2. البنية والقراءة (Syntax and Readability)

وجه المقارنة	جملة switch	سلسلة if...else if...else
البنية	تتكون من كتلة switch(expression)، متبوعة بـ case (حالات)، و break لإنهاء كل حالة، و default للحالة الافتراضية.	تتكون من if (شرط)، متبوعًا بـ else if (شروط إضافية)، و else (الحالة الافتراضية).
وضوح الكود	أكثر تنظيمًا ووضوحًا عند مقارنة متغير واحد مع العديد من القيم (أكثر من 3 أو 4 حالات).	أكثر ملاءمة عندما يكون لديك شروط قليلة أو شروط منطقية معقدة.
break	ضرورية لمنع "السقوط" (Fall-through) إلى الحالات التالية. نسيانها يسبب أخطاء منطقية شائعة.	لا تحتاج إلى break، حيث أن كل كتلة تنفصل تلقائيًا.

3. الأداء (Performance)

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

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

4. متى تستخدم كل أداة؟

استخدم switch عندما:

• تقارن متغيرًا واحدًا مقابل عدد كبير من القيم الثابتة (مثل أرقام الأيام، أو رموز الأخطاء، أو خيارات قائمة).
• تريد تجميع عدة قيم لتنفيذ نفس الكود (باستخدام تقنية Fall-through عن قصد).
• تكون الأولوية للوضوح والتنظيم عند وجود العديد من الخيارات الممكنة.
• مثال: معالجة خيارات قائمة المستخدم (1, 2, 3...) أو تحديد اسم الشهر من رقم (1-12).

استخدم if...else if...else عندما:

• تحتاج إلى اختبار شروط معقدة تتضمن معاملات منطقية (&&, ||).
• تحتاج إلى اختبار النطاقات (Ranges) بدلاً من القيم الفردية (مثال: إذا كانت الدرجة أكبر من 90، إذا كانت بين 80 و 90).
• تقوم باختبار شروط مختلفة تعتمد على متغيرات متعددة.
• يكون عدد الشروط قليلاً (2 أو 3 شروط فقط).
• مثال: تحديد ما إذا كان المستخدم مؤهلاً للحصول على خصم (إذا كان عمره > 60 و لديه بطاقة عضوية).

يمكن تلخيص الاختلافات الأساسية

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

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

أمثلة هذا المقال متوفرة على الرابط .

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