الشروط المتعددة else if في JavaScript للمبتدئين: كيف تتعامل مع أكثر من احتمال؟

أحياناً خياران فقط لا يكفيان. ماذا لو كانت النتيجة: ممتاز، جيد جداً، جيد، أو يحتاج تحسين؟ هنا نستخدم else if في JavaScript.

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

ما هي else if في JavaScript؟

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

قاعدة مهمة: ترتيب الشروط في else if يغيّر النتيجة. اكتب الشرط الأكثر تحديداً أولاً.

1) البنية الأساسية لـ if / else if / else

if (condition1) {
  // code
} else if (condition2) {
  // code
} else {
  // code
}

ماذا يفعل هذا الكود؟ يختبر الشروط بالتسلسل حتى يجد أول شرط صحيح.

النتيجة المتوقعة: يتم تنفيذ block واحد فقط من السلسلة.

خطأ شائع: توقع تنفيذ أكثر من فرع في نفس السلسلة.

2) مثال عملي: تقييم درجات الطلاب

let score = 85;

if (score >= 90) {
  console.log("ممتاز");
} else if (score >= 80) {
  console.log("جيد جداً");
} else if (score >= 70) {
  console.log("جيد");
} else {
  console.log("تحتاج للمزيد من الدراسة");
}

ماذا يفعل هذا الكود؟ يصنف الطالب حسب نطاق الدرجة.

النتيجة المتوقعة: مع score=85 ستظهر جيد جداً.

خطأ شائع: كتابة شرط عام قبل شرط أكثر تحديداً فيمنع الوصول إليه.

3) ترتيب الشروط: مثال يوضح الخطأ الشائع

let score = 95;

// ترتيب خاطئ
if (score >= 70) {
  console.log('جيد أو أعلى');
} else if (score >= 90) {
  console.log('ممتاز');
}

ماذا يفعل هذا الكود؟ يلتقط كل القيم فوق 70 في الشرط الأول.

النتيجة المتوقعة: حتى score=95 ستطبع "جيد أو أعلى" ولن تصل إلى "ممتاز".

خطأ شائع: عدم ترتيب الشروط من الأكثر تحديداً إلى الأقل.

4) مثال من الواقع: تسعير الشحن

let orderAmount = 120;
let shipping;

if (orderAmount >= 200) {
  shipping = 0;
} else if (orderAmount >= 100) {
  shipping = 10;
} else {
  shipping = 20;
}

console.log('Shipping:', shipping);

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

النتيجة المتوقعة: مع 120 تكون تكلفة الشحن 10.

خطأ شائع: نسيان قيمة افتراضية في else فيبقى المتغير undefined.

Story قصيرة: لماذا أعطى "جيد" بدل "ممتاز"؟

مبتدئ كتب شرط score >= 70 قبل score >= 90. كل الدرجات الكبيرة دخلت أول شرط، لذلك لم تظهر "ممتاز" أبداً. بعد تعديل ترتيب الشروط من الأعلى إلى الأدنى، أصبحت النتائج صحيحة.

النتيجة في المتصفح (Console concept)

let hour = 14;

if (hour < 12) {
  console.log('Morning');
} else if (hour < 18) {
  console.log('Afternoon');
} else {
  console.log('Evening');
}

Checklist سريعة قبل حفظ شروط else if

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

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

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

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

ما هي else if في JavaScript؟

هي طريقة لإضافة شروط متعددة بعد if عندما يكون لديك أكثر من احتمال.

كيف تعمل else if بالضبط؟

يتم فحص الشروط من الأعلى للأسفل، وعند أول شرط صحيح يتوقف التنفيذ في السلسلة.

هل يمكن كتابة أكثر من else if؟

نعم، يمكنك كتابة أي عدد تحتاجه حسب منطق البرنامج.

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

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

كيف أتجنب الأخطاء في else if؟

اختبر الحالات الحدّية، وراجع ترتيب الشروط، وتأكد أن كل نطاق مغطى بشكل صحيح.

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

جرّب الآن: اكتب برنامجاً يصنف الطقس حسب درجة الحرارة إلى 4 فئات باستخدام if / else if / else، ثم اختبر 5 قيم مختلفة للتأكد من صحة كل فرع.
ممتاز! الآن فهمت كيف تبني شروطاً متعددة بشكل منظم. في الدرس القادم سنتعلم switch كبديل أنظف في بعض الحالات.
المحرر الذكي

اكتب الكود وشاهد النتيجة فوراً

جرب الآن مجاناً
قناة ديف عربي

تابع أحدث الدروس والتحديثات مباشرة على واتساب

انضم الآن