جملة switch في JavaScript للمبتدئين: بديل منظم لـ if else مع أمثلة عملية

عندما يكون لديك متغير واحد تريد مقارنته بقيم كثيرة، تصبح سلسلة if...else if طويلة. هنا تأتي switch في JavaScript كحل أنظف وأسهل قراءة.

إذا كنت تبحث عن شرح switch للمبتدئين أو متى أستخدم switch بدل if else أو ما فائدة break وdefault، فهذا الدرس يشرحها بأمثلة واضحة.

ما هي جملة switch في JavaScript؟

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

قاعدة مهمة: switch تستخدم مقارنة صارمة شبيهة بـ ===. النوع والقيمة يجب أن يتطابقا.

1) البنية الأساسية لـ switch

switch (value) {
  case 'A':
    // code
    break;
  case 'B':
    // code
    break;
  default:
    // code
}

ماذا يفعل هذا الكود؟ يفحص قيمة واحدة ضد حالات متعددة ثم ينفذ الحالة المطابقة.

النتيجة المتوقعة: يتم تنفيذ case واحدة غالباً (مع break).

خطأ شائع: نسيان break فيؤدي لتنفيذ حالات إضافية دون قصد.

2) مثال عملي: أيام الأسبوع

let day = 1;

switch (day) {
  case 1:
    console.log('السبت');
    break;
  case 2:
    console.log('الأحد');
    break;
  default:
    console.log('يوم آخر');
}

ماذا يفعل هذا الكود؟ يطبع اسم اليوم بناءً على رقم اليوم.

النتيجة المتوقعة: مع day=1 ستظهر السبت.

خطأ شائع: إدخال القيمة كنص '1' بينما الحالات أرقام.

3) تأثير نسيان break

let role = 'user';

switch (role) {
  case 'user':
    console.log('User panel');
  case 'admin':
    console.log('Admin panel');
    break;
  default:
    console.log('Guest');
}

ماذا يفعل هذا الكود؟ يوضح ظاهرة fall-through عند غياب break.

النتيجة المتوقعة: مع role='user' سيتم طباعة User panel ثم Admin panel.

خطأ شائع: اعتبار هذا السلوك bug في JavaScript بينما السبب هو غياب break.

4) استخدام default كمسار احتياطي

let language = 'fr';

switch (language) {
  case 'ar':
    console.log('مرحبا');
    break;
  case 'en':
    console.log('Hello');
    break;
  default:
    console.log('Language not supported');
}

ماذا يفعل هذا الكود؟ يتعامل مع القيم غير المتوقعة عبر default.

النتيجة المتوقعة: مع fr تظهر رسالة fallback.

خطأ شائع: حذف default وترك الحالة غير المعروفة بدون معالجة.

5) دمج عدة حالات في نفس النتيجة

let day = 'Saturday';

switch (day) {
  case 'Saturday':
  case 'Sunday':
    console.log('Weekend');
    break;
  default:
    console.log('Workday');
}

ماذا يفعل هذا الكود؟ يجمع أكثر من case لتشارك نفس التنفيذ.

النتيجة المتوقعة: Saturday وSunday يعطون Weekend.

خطأ شائع: تكرار نفس الكود في كل case بدل الاستفادة من التجميع.

Story قصيرة: لماذا ظهر مخرجان بدل واحد؟

مبتدئ كتب switch للأدوار ونسي break بعد أول case. عند التشغيل ظهرت رسالتان بدل رسالة واحدة. بمجرد إضافة break بعد كل حالة، عاد التنفيذ طبيعيًا.

let status = 'pending';

switch (status) {
  case 'pending':
    console.log('In progress');
    break;
  case 'done':
    console.log('Completed');
    break;
  default:
    console.log('Unknown status');
}

Checklist سريعة قبل حفظ switch

• هل وضعت break بعد كل case تحتاج إيقافها؟
• هل نوع قيمة المتغير يطابق نوع القيم في case؟
• هل أضفت default للحالات غير المتوقعة؟
• هل switch فعلاً أفضل من else if في هذا السيناريو؟

روابط المتابعة بعد هذا الدرس

الخطوة التالية مباشرة: حلقة for في JavaScript ثم حلقة while في JavaScript.

الأسئلة الشائعة — FAQ (أسئلة بحثية شائعة)

ما هي جملة switch في JavaScript؟

هي بنية شرطية تقارن نفس المتغير بعدة قيم ثابتة باستخدام case.

لماذا نستخدم break داخل switch؟

لإيقاف التنفيذ بعد case المطابقة ومنع الانتقال للحالات التالية دون قصد.

متى أستخدم switch ومتى else if؟

switch مناسبة للقيم الثابتة لنفس المتغير، بينما else if أفضل للنطاقات والشروط المركبة.

هل default إلزامية؟

ليست إلزامية، لكنها مهمة لتغطية الحالات غير المتوقعة.

هل switch تستخدم == أم ===؟

تعتمد على مقارنة صارمة شبيهة بـ ===، لذلك النوع مهم جداً.

للمتابعة مباشرة: ابدأ بدرس حلقة for في JavaScript ثم انتقل إلى حلقة while في JavaScript.