شرح جمل if-else و if-then في JavaScript: فهم العبارات الشرطية بأسلوب عملي

مقدمة إلى العبارات الشرطية في JavaScript

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

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

ما هي جملة if...else في JavaScript؟

تُعد if...else من أشهر العبارات الشرطية في JavaScript. وظيفتها الأساسية هي اختبار شرط معين:

• إذا كانت نتيجة الشرط truthy، يُنفّذ الكود داخل كتلة if.
• إذا كانت النتيجة falsy، يُنفّذ الكود داخل كتلة else.

وتقوم JavaScript بتحويل القيم داخل الشروط إلى true أو false وفقاً لقواعدها الداخلية.

if (condition is true) {
  // code is executed
} else {
  // code is executed
}

ما المقصود بـ truthy وfalsy؟

أي قيمة لا تُصنَّف ضمن القيم الكاذبة تُعتبر غالباً قيمة truthy. أما القيم falsy المعروفة في JavaScript فهي:

• false
• 0
• -0
• 0n
• "" و'' و`` كسلاسل فارغة
• null
• undefined
• NaN

فهم هذه القيم مهم جداً، لأن كثيراً من الأخطاء البرمجية تحدث بسبب افتراض أن قيمة ما ستُعامل دائماً على أنها صحيحة منطقياً.

أمثلة عملية على if...else في JavaScript

لنبدأ بمثال بسيط يحدد ما إذا كان العمر يشير إلى شخص بالغ أم طفل.

const age = 18;

if (age >= 18) {
  console.log("Nick is an adult.");
} else {
  console.log("Nick is a child.");
}

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

أما إذا غيّرنا قيمة age إلى رقم أقل من 18، فسيصبح الشرط غير محقق، وبالتالي سينتقل التنفيذ إلى كتلة else.

const age = 12;

if (age >= 18) {
  console.log("Nick is an adult.");
} else {
  console.log("Nick is a child.");
}

استخدام شروط متعددة عبر if...else if...else

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

if (condition 1 is true) {
  // code is executed
} else if (condition 2 is true) {
  // code is executed
} else {
  // code is executed
}

آلية التنفيذ هنا تكون متسلسلة:

1. يفحص البرنامج شرط if أولاً.
2. إذا لم يتحقق، ينتقل إلى else if.
3. إذا لم يتحقق أي شرط، تُنفّذ كتلة else الأخيرة.

إليك مثالاً يحدد الفئة العمرية بشكل أدق:

const age = 18;

if (age < 18) {
  console.log("Alice is under 18 years old.");
} else if (age >= 18 && age <= 21) {
  console.log("Alice is between the ages of 18 and 21.");
} else {
  console.log("Alice is over 21 years old.");
}

بما أن العمر يساوي 18، فإن الكود ينفّذ كتلة else if، لأن Alice تقع ضمن الفئة بين 18 و21.

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

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

مثال باستخدام if...else

const pet = "dog";

if (pet === "lizard") {
  console.log("I own a lizard");
} else if (pet === "dog") {
  console.log("I own a dog");
} else if (pet === "cat") {
  console.log("I own a cat");
} else if (pet === "snake") {
  console.log("I own a snake");
} else if (pet === "parrot") {
  console.log("I own a parrot");
} else {
  console.log("I don't own a pet");
}

المثال نفسه باستخدام switch

const pet = "dog";

switch (pet) {
  case "lizard":
    console.log("I own a lizard");
    break;
  case "dog":
    console.log("I own a dog");
    break;
  case "cat":
    console.log("I own a cat");
    break;
  case "snake":
    console.log("I own a snake");
    break;
  case "parrot":
    console.log("I own a parrot");
    break;
  default:
    console.log("I don't own a pet");
    break;
}

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

استخدام المعامل المنطقي && مع if...else

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

const age = 17;
const ownsCar = true;

if (age >= 16 && ownsCar) {
  console.log("Jerry is old enough to drive and has his own car.");
} else {
  console.log("Jerry does not drive.");
}

في هذا المثال، الشرطان متحققان: العمر أكبر من أو يساوي 16، والمتغير ownsCar يحمل القيمة true، لذلك تُطبع الرسالة التي تفيد بأن Jerry يستطيع القيادة ويملك سيارة.

لكن إذا غيّرنا قيمة age إلى أقل من 16، فلن يعود الشرطان صحيحين معاً:

const age = 13;
const ownsCar = true;

if (age >= 16 && ownsCar) {
  console.log("Jerry is old enough to drive and has his own car.");
} else {
  console.log("Jerry does not drive.");
}

استخدام المعامل المنطقي || مع if...else

المعامل || يعني أن تحقق شرط واحد فقط يكفي لتنفيذ كتلة if. وإذا كان الشرطان معاً غير صحيحين، تُنفّذ كتلة else.

const boyfriendIsPaying = true;
const isSale = false;

if (boyfriendIsPaying || isSale) {
  console.log("Jesse will go shopping.");
} else {
  console.log("Jesse will not go shopping.");
}

رغم أن isSale تحمل القيمة false، فإن الكود داخل if سيعمل لأن المتغير boyfriendIsPaying قيمته true.

أما إذا أصبحت القيمتان كلتاهما false، فلن يتحقق أي شرط:

const boyfriendIsPaying = false;
const isSale = false;

if (boyfriendIsPaying || isSale) {
  console.log("Jesse will go shopping.");
} else {
  console.log("Jesse will not go shopping.");
}

استخدام المعامل المنطقي ! مع if...else

المعامل ! يُعرف باسم logical NOT، ووظيفته عكس القيمة المنطقية:

• إذا كانت القيمة true تصبح false.
• إذا كانت القيمة false تصبح true.

هذا المعامل مفيد عندما تريد اختبار عكس حالة معينة بدلاً من إعادة كتابة المنطق كاملاً.

const boyfriendIsPaying = true;
const isSale = false;

if (!boyfriendIsPaying || isSale) {
  console.log("Jesse will go shopping.");
} else {
  console.log("Jesse will not go shopping.");
}

في هذا المثال، استخدام !boyfriendIsPaying يحول قيمة المتغير من true إلى false. ومع بقاء isSale على false أيضاً، يصبح الشرط بأكمله غير متحقق، فتُنفّذ كتلة else.

المعامل الشرطي الثلاثي ternary operator في JavaScript

إذا كان لديك شرط بسيط وتريد كتابة الكود بشكل مختصر، فيمكنك استخدام ternary operator بدلاً من جملة if...else الكاملة. سُمّي هذا المعامل بالثلاثي لأنه يتكوّن من ثلاثة أجزاء: الشرط، ونتيجة تحققه، ونتيجة عدم تحققه.

condition ? if condition is true : if condition is false

تُكتب البنية بالشكل التالي:

• قبل علامة ? نضع الشرط.
• بين ? و: نضع القيمة أو التعبير إذا كان الشرط صحيحاً.
• بعد : نضع البديل إذا كان الشرط غير صحيح.

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

const age = 32;
const citizen = age >= 18 ? "Can vote" : "Cannot vote";

console.log(citizen);

بما أن age أكبر من 18، فسيتم إسناد النص "Can vote" إلى المتغير citizen.

وللمقارنة، إليك الشكل المكافئ باستخدام if...else:

const age = 32;
let citizen;

if (age >= 18) {
  citizen = "Can vote";
} else {
  citizen = "Cannot vote";
}

console.log(citizen);

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

أفضل الممارسات عند كتابة الشروط في JavaScript

• اكتب الشروط بشكل واضح ومباشر لتسهيل القراءة.
• تجنب التداخل المفرط في جمل if لأنه يصعّب تتبع المنطق.
• استخدم switch عندما تقارن متغيراً واحداً بعدة قيم ثابتة.
• استخدم ternary operator فقط في الحالات القصيرة والواضحة.
• انتبه دائماً إلى الفرق بين القيم truthy وfalsy لتجنب النتائج غير المتوقعة.

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

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