الشروط في JavaScript — دليل شامل if/else و switch 2026

في المقال السابق، تعلمت المتغيرات وأنواع البيانات، وكيف تخزن القيم في JavaScript. لكن البرامج الحقيقية لا تكتفي بتخزين البيانات — بل تتخذ قرارات بناءً على هذه البيانات. هنا يأتي دور الشروط (Conditions).

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

ما هي الشروط؟

الشروط هي طريقة لإخبار البرنامج: "إذا تحقق هذا الشرط، نفّذ هذا الكود. وإلا، نفّذ كوداً آخر."

مثال من الحياة اليومية:

• إذا كان الجو ممطراً، سآخذ مظلة.
• وإلا، سأخرج بدون مظلة.

في JavaScript، نكتب هذا هكذا:

let isRaining = true;

if (isRaining) {
  console.log("سآخذ مظلة ☔");
} else {
  console.log("سأخرج بدون مظلة ☀️");
}

النتيجة:

سآخذ مظلة ☔

لماذا نحتاج الشروط؟

بدون الشروط، سينفذ البرنامج نفس الكود دائماً، بغض النظر عن المدخلات. الشروط تمنح البرنامج الذكاء ليتفاعل مع المواقف المختلفة:

• التحقق من صحة البيانات: هل كلمة المرور صحيحة؟
• اتخاذ القرارات: هل العمر يكفي للتسجيل؟
• التفاعل مع المستخدم: هل ضغط الزر "موافق" أم "إلغاء"؟
• معالجة الأخطاء: هل العملية نجحت أم فشلت؟

الشروط البسيطة: if

الشكل الأساسي للشرط هو if:

if (الشرط) {
  // الكود الذي ينفذ إذا تحقق الشرط
}

مثال:

let age = 20;

if (age >= 18) {
  console.log("أنت بالغ ✅");
}

النتيجة:

أنت بالغ ✅

شرح:

• age >= 18: الشرط (هل العمر أكبر من أو يساوي 18؟).
• { ... }: كتلة الكود التي تُنفَّذ إذا كان الشرط true.
• إذا كان الشرط false: لا يُنفَّذ شيء.

if...else — خياران

عندما تريد تنفيذ كود بديل إذا لم يتحقق الشرط:

let age = 15;

if (age >= 18) {
  console.log("أنت بالغ ✅");
} else {
  console.log("أنت قاصر ❌");
}

النتيجة:

أنت قاصر ❌

كيف يعمل؟

1. يُقيَّم الشرط age >= 18.
2. إذا كان true، يُنفَّذ كود if.
3. إذا كان false، يُنفَّذ كود else.

if...else if...else — خيارات متعددة

عندما يكون لديك أكثر من خيارين:

let score = 85;

if (score >= 90) {
  console.log("ممتاز 🌟");
} else if (score >= 80) {
  console.log("جيد جداً ⭐");
} else if (score >= 70) {
  console.log("جيد 👍");
} else if (score >= 60) {
  console.log("مقبول ✅");
} else {
  console.log("راسب ❌");
}

النتيجة:

جيد جداً ⭐

⚠️ مهم: JavaScript تفحص الشروط بالترتيب، وتتوقف عند أول شرط يتحقق.

العمليات المقارنة (Comparison Operators)

للشروط، نحتاج عمليات المقارنة:

العملية	المعنى	مثال	النتيجة
==	يساوي (بدون نوع)	5 == "5"	true
===	يساوي (مع النوع)	5 === "5"	false
!=	لا يساوي (بدون نوع)	5 != "5"	false
!==	لا يساوي (مع النوع)	5 !== "5"	true
>	أكبر من	10 > 5	true
<	أصغر من	10 < 5	false
>=	أكبر من أو يساوي	10 >= 10	true
<=	أصغر من أو يساوي	5 <= 10	true

⚠️ نصيحة ذهبية: استخدم دائماً === و !== بدلاً من == و !=، لأنها تتحقق من النوع أيضاً وتتجنب الأخطاء.

console.log(5 == "5");   // true (لأن JavaScript تحوّل النوع)
console.log(5 === "5");  // false (لأن النوع مختلف)

العمليات المنطقية (Logical Operators)

لدمج عدة شروط:

العملية	المعنى	مثال	النتيجة
&&	و (AND)	true && false	false
||	أو (OR)	true || false	true
!	ليس (NOT)	!true	false

مثال على AND (&&):

let age = 25;
let hasLicense = true;

if (age >= 18 && hasLicense) {
  console.log("يمكنك القيادة ✅");
} else {
  console.log("لا يمكنك القيادة ❌");
}

النتيجة:

يمكنك القيادة ✅

الشرط يتحقق فقط إذا كان الطرفان true.

مثال على OR (||):

let isWeekend = false;
let isHoliday = true;

if (isWeekend || isHoliday) {
  console.log("اليوم عطلة! 🎉");
} else {
  console.log("اليوم يوم عمل 💼");
}

النتيجة:

اليوم عطلة! 🎉

الشرط يتحقق إذا كان أحد الطرفين true على الأقل.

مثال على NOT (!):

let isLoggedIn = false;

if (!isLoggedIn) {
  console.log("يجب تسجيل الدخول 🔐");
}

النتيجة:

يجب تسجيل الدخول 🔐

الشروط المتداخلة (Nested if)

يمكنك وضع شرط داخل شرط آخر:

let age = 25;
let hasTicket = true;

if (age >= 18) {
  if (hasTicket) {
    console.log("مرحباً بك في الحفل 🎉");
  } else {
    console.log("تحتاج إلى تذكرة 🎫");
  }
} else {
  console.log("الدخول للبالغين فقط ❌");
}

النتيجة:

مرحباً بك في الحفل 🎉

⚠️ نصيحة: تجنب التداخل العميق (أكثر من مستويين) لأنه يجعل الكود صعب القراءة. استخدم العمليات المنطقية بدلاً من ذلك.

المعامل الثلاثي (Ternary Operator)

طريقة مختصرة لكتابة if...else في سطر واحد:

الشرط ? القيمة_إذا_صحيح : القيمة_إذا_خطأ

مثال:

let age = 20;

// بدلاً من:
let status;
if (age >= 18) {
  status = "بالغ";
} else {
  status = "قاصر";
}

// اكتب:
let status = age >= 18 ? "بالغ" : "قاصر";

console.log(status);  // بالغ

متى تستخدمه؟ للشروط البسيطة (سطر واحد). تجنبه إذا كان الشرط معقداً.

switch — للخيارات المتعددة

عندما يكون لديك قيمة واحدة وتريد مقارنتها بعدة قيم، switch أنظف من if...else if:

let day = "الاثنين";

switch (day) {
  case "السبت":
  case "الأحد":
    console.log("عطلة نهاية الأسبوع 🎉");
    break;
  case "الاثنين":
  case "الثلاثاء":
  case "الأربعاء":
  case "الخميس":
    console.log("يوم عمل 💼");
    break;
  case "الجمعة":
    console.log("يوم الجمعة 🌙");
    break;
  default:
    console.log("يوم غير معروف");
}

النتيجة:

يوم عمل 💼

شرح:

• switch (day): القيمة التي نقارنها.
• case "الاثنين":: حالة محددة.
• break;: إنهاء الـ switch (مهم جداً! بدونه سينفذ الكود التالي).
• default:: الحالة الافتراضية إذا لم يتحقق أي case.

⚠️ تحذير: break مهم جداً

إذا نسيت break، سينفذ JavaScript كل الحالات التالية:

let num = 2;

switch (num) {
  case 1:
    console.log("واحد");
  case 2:
    console.log("اثنان");
  case 3:
    console.log("ثلاثة");
  default:
    console.log("افتراضي");
}

النتيجة (بدون break):

اثنان
ثلاثة
افتراضي

مع break:

switch (num) {
  case 1:
    console.log("واحد");
    break;
  case 2:
    console.log("اثنان");
    break;
  case 3:
    console.log("ثلاثة");
    break;
  default:
    console.log("افتراضي");
}

النتيجة:

اثنان

مقارنة بين if و switch

المعيار	if / else if	switch
الاستخدام	شروط معقدة	مقارنة قيمة واحدة
القراءة	أصعب مع كثرة الخيارات	أنظف مع كثرة الخيارات
المرونة	أكثر مرونة	محدود بالقيم
المدى (Range)	✅ يدعم	❌ لا يدعم

تمارين عملية

تمرين 1: فحص العمر

اكتب برنامجاً يتحقق من العمر:

• إذا كان أقل من 13: "طفل"
• إذا كان بين 13 و 17: "مراهق"
• إذا كان بين 18 و 64: "بالغ"
• إذا كان 65 أو أكثر: "مسن"

الحل:

let age = 25;

if (age < 13) {
  console.log("طفل");
} else if (age < 18) {
  console.log("مراهق");
} else if (age < 65) {
  console.log("بالغ");
} else {
  console.log("مسن");
}

تمرين 2: التحقق من كلمة المرور

اكتب برنامجاً يتحقق إذا كانت كلمة المرور صحيحة (طولها 8 أحرف على الأقل).

الحل:

let password = "secret123";

if (password.length >= 8) {
  console.log("كلمة المرور صحيحة ✅");
} else {
  console.log("كلمة المرور قصيرة جداً ❌");
}

تمرين 3: الأعداد الزوجية والفردية

اكتب برنامجاً يتحقق إذا كان الرقم زوجياً أم فردياً.

الحل:

let num = 7;

if (num % 2 === 0) {
  console.log("الرقم زوجي");
} else {
  console.log("الرقم فردي");
}

النتيجة:

الرقم فردي

تمرين 4: اسم اليوم

اكتب برنامجاً يطبع اسم اليوم بناءً على رقمه (1 = الأحد، 2 = الاثنين...).

الحل:

let dayNumber = 3;

switch (dayNumber) {
  case 1:
    console.log("الأحد");
    break;
  case 2:
    console.log("الاثنين");
    break;
  case 3:
    console.log("الثلاثاء");
    break;
  case 4:
    console.log("الأربعاء");
    break;
  case 5:
    console.log("الخميس");
    break;
  case 6:
    console.log("الجمعة");
    break;
  case 7:
    console.log("السبت");
    break;
  default:
    console.log("رقم غير صحيح");
}

النتيجة:

الثلاثاء

تمرين 5: نظام تسجيل الدخول

اكتب برنامجاً يتحقق من:

• اسم المستخدم صحيح
• كلمة المرور صحيحة
• الحساب غير محظور

الحل:

let username = "ahmed";
let password = "12345";
let isBlocked = false;

if (username === "ahmed" && password === "12345" && !isBlocked) {
  console.log("مرحباً بك! ✅");
} else if (isBlocked) {
  console.log("حسابك محظور ❌");
} else {
  console.log("اسم المستخدم أو كلمة المرور غير صحيحة ❌");
}

تمرين 6: المعامل الثلاثي

استخدم المعامل الثلاثي لتحديد إذا كان الرقم موجباً أم سالباً.

الحل:

let num = -5;

let result = num >= 0 ? "موجب" : "سالب";
console.log(result);  // سالب

حل المشاكل الشائعة

🔴 المشكلة 1: استخدام = بدلاً من ===

السبب: كتابة = (إسناد) بدلاً من === (مقارنة).

// خطأ:
if (x = 5) {
  // هذا يعيّن x = 5 وليس يقارن!
}

// صحيح:
if (x === 5) {
  // يقارن
}

🔴 المشكلة 2: نسيان break في switch

السبب: بدون break، ينفذ JavaScript كل الحالات التالية.

الحل: أضف break; بعد كل case.

🔴 المشكلة 3: شروط معقدة

السبب: كتابة شرط طويل يصعب قراءته.

الحل: قسّم الشرط إلى متغيرات:

// بدلاً من:
if (age >= 18 && hasLicense && !isSuspended && hasInsurance) { }

// اكتب:
const canDrive = age >= 18 && hasLicense && !isSuspended && hasInsurance;
if (canDrive) { }

🔴 المشكلة 4: if بدون أقواس

السبب: كتابة if بدون {} — يعمل لكنه خطير.

// خطير (ينفذ سطر واحد فقط):
if (x > 5)
  console.log("كبير");
  console.log("هذا ينفذ دائماً!");  // ❌

// آمن:
if (x > 5) {
  console.log("كبير");
  console.log("هذا ينفذ فقط مع الشرط");
}

جدول الأوامر الأساسية

الأمر	الوظيفة
if (شرط) { }	تنفيذ الكود إذا تحقق الشرط
else { }	تنفيذ الكود إذا لم يتحقق الشرط
else if (شرط) { }	فحص شرط إضافي
switch (قيمة) { }	مقارنة قيمة بعدة حالات
الشرط ? a : b	المعامل الثلاثي (اختصار if else)
&&	و (AND) — كل الشروط يجب أن تتحقق
||	أو (OR) — شرط واحد يكفي
!	ليس (NOT) — عكس القيمة

قائمة تحقق نهائية

المهمة	الحالة
فهم if و else و else if	⬜
استخدام العمليات المقارنة (===, !==, >, <)	⬜
استخدام العمليات المنطقية (&&, ||, !)	⬜
فهم switch و break	⬜
استخدام المعامل الثلاثي	⬜
حل التمارين الستة	⬜

ماذا بعد هذا المقال؟

الآن بعد أن أتقنت الشروط، أنت جاهز للمقال التالي:

1. الحلقات (for/while) — تكرار المهام.
2. الدوال (Functions) — تنظيم الكود.
3. المصفوفات والكائنات — هياكل البيانات.

الخلاصة

في هذا المقال، تعلمت:

• ✅ ما هي الشروط ولماذا نحتاجها.
• ✅ if و else و else if.
• ✅ العمليات المقارنة (===, !==, >, <).
• ✅ العمليات المنطقية (&&, ||, !).
• ✅ switch و break.
• ✅ المعامل الثلاثي (Ternary Operator).
• ✅ الشروط المتداخلة.

تذكر: الشروط هي ما يجعل البرنامج ذكياً. كلما أتقنتها، كلما أصبحت قادراً على بناء تطبيقات أكثر تعقيداً.

هل فهمت الشروط؟ شاركنا في التعليقات!