اذهب إلى المحتوى

الجمل الشرطية if/else في جافاسكريبت


محمد أحمد العيل

فلنقل إنك تسير في شارع مكتظ وسط المدينة، تتأهب للمرور في مفترق طرق وفي هذه الأثناء انتقلت الإشارة الضوئية الخاصّة بالراجلين إلى اللون الأحمر. مالذي ستفعله؟ تتوقف… أليس كذلك؟ ماذا لو تبدّل اللون إلى الأخضر بعد ذلك؟ تعود إلى المشي. يمكننا اعتماد نفس المبدأ في الشفرات البرمجية. يبدو الأمر كما لو أنك تقول “إن أصبح لون الإشارة أحمر فيجب عليك التوقف وإلا استمرّ في المشي”. هذا بالضبط هو عمل الجملة if/else (إنْ… وإلا) في جافاسكريبت.

الجملة if/else

تساعد الجملة if/else بالتحكّم في ما يفعله برنامجك في حالات محدّدة. تأخذ الصيغة التالية:

if (condition) {
  // افعل شيئا هنا
} else {
  // افعل شيئا مغايرا هنا
}

يخبر الشرط Condition الجملة if/else مالذي يجب عليها التحقّق منه قبل الاستمرار. إذا كانت قيمة الشرط صحيحة (تساوي true) فإن جافاسكريبت سينفّذ الشفرة الموجودة داخل كتلة if. أما إذا كانت قيمة الشرط غير صحيحة (أي false) فإن الشفرة الموجودة في الكتلة else هي ما سيُنفّذ. بالعودة إلى مثال الإشارة الضوئية أعلاه فإن الأمر سيأخذ الصيغة التالية:

if (الإشارة حمراء) {
  // توقّف عن المشي
} else {
   // استمرّ في المشي
}

إن احتجت للتحقّق من شروط عدّة فيمكنك إضافة else if بين كتلتيْ if وelse. متى ستحتاج لشرط ثان؟ فلنقل إنك تمرّ عبر طريق صغيرة. إن لم تكن هناك سيارات فهل ستستمر في الانتظار إلى أن يتغيّر لون الإشارة الضوئية؟ على الأرجح ستواصل طريقك. بترجمة الحالة أعلاه إلى شفرة برمجية نجد التالي:

if (الإشارة حمراء) {
  // توقّف عن المشي
} else if (توجد سيارات) {
  // توقّف عن المشي
} else if (شرط آخر) {
  // افعل أمرا آخر
} else {
  // أمر أخير
}

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

  • عوامل المقارنة Comparison operators.
  • القيم الصحيحة و القيم الخاطئة.

عوامل المقارنة

توجد أربعة عوامل أساسية للمقارنة:

  • “أكبر من” < أو “أكبر من أو يساوي”=<
  • “أصغر من” > أو “أصغر من أو يساوي”=>
  • “يساوي تماما” === أو “يساوي” ==
  • “يختلف تماما” ==! أو “يختلف” =!

النوعان الأولان من عوامل المقارنة واضحان ويستخدمان لمقارنة الأعداد:

24 > 23 // صحيح
24 > 24 // خاطئ
24 >= 24 // صحيح

24 < 25 // صحيح
24 < 24 // خاطئ
24 <= 24 // صحيح

النوعان التاليّان يُستخدمان لمقارنة تساوي شيئين:

24 === 24 // صحيح
24 !== 24 // خاطئ

إلا أنه يوجد فرق بين “يساوي تماما” === و “يساوي” ==، وبين “يختلف تماما” == ! و “يختلف” =!

'24' === 24 // خاطئ
'24' == 24 // صحيح

'24' !== 24 // صحيح
'24' != 24 // خاطئ

يتّضح من المثال أعلاه أن مقارنة العدد 24 بسلسلة المحارف 24 تعطي نتيجة خاطئة عند استخدام العامل “يساوي تماما” (===) بينما تعطي نتيجة صحيحة عند استخدام العامل “يساوي” (==). لماذا هذا الاختلاف؟ فلنر الفرق بين “يساوي تماما” و “يساوي”.

الفرق بين === و == (و بين ==! و =!)

أنواع البيانات Data types في جافاسكريبت ليست صرامة بل متساهلة، عكس لغات أخرى. يعني هذا أننا لا نهتم عندما نعرّف متغيّرا بنوع البيانات الذي ستأخذه قيمة هذا المتغيّر.

يمكنك تعريف أي متغيّر وسيتكفّل مفسّر جافاسكريبت بالتعامل مع نوع البيانات الخاصّ بقيمة المتغيّر:

const aString = 'Some string'
const aNumber = 123
const aBoolean = true

عند استخدام العامل “يساوي تماما” (===) أو “يختلف تماما” (==!) فإن مفسّر جافاسكريبت يأخذ أنواع بيانات قيم المتغيّرات بالحسبان؛ لهذا السبب فإن سلسلة المحارف 24 تختلف عن العدد 24.

'24' === 24 // خطأ
'24' !== 24 // صحيح

أما عند استخدام العامل “يساوي” (==) أو “يختلف” (=!) فإن مفسّر جافاسكريبت يحوّل نوع البيانات بحيث يتساوى نوع طرفيْ المقارنة قبل أن ينظُر في القيمة. عمومًا، يحاول مفسّر جافاسكريبت تحويل جميع أنواع البيانات إلى أعداد عند استخدام عوامل المقارنة (ما عدا ===و==!). تُحوَّل سلسلة المحارف 24 في المثال أدناه إلى العدد 24 قبل المقارنة. هذا هو السبب الذي يجعل سلسلة المحارف 24 تساوي العدد 24 عند استخدام العامل ==:

'24' == 24 // صحيح
'24' != 24 // خاطئ

يمكن كذلك تحويل القيم المنطقية (true وfalse) إلى أعداد، وعندها تصبح قيمة true تساوي 1 وfalse تساوي 0:

0 == false // صحيح
1 == true // صحيح
2 == true // خاطئ

يعدّ التحويل التلقائي الذي يقوم به مفسّر جافاسكريبت أثناء استخدام عوامل المقارنة أحد أكثر الأسباب شيوعا لصعوبة التعرف على العلل Bugs أثناء تطوير البرامج؛ لذا استخدم دوما عوال المقارنة التامّة (=== أو==!).

مقارنة الكائنات والمصفوفات

حاول أن تقارن بين الكائنات أو بين المصفوفات بالعامل === أو == وستجد نتيجة مفاجئة:

const a = { isHavingFun: true }
const b = { isHavingFun: true }

console.log(a === b) // خطأ: الكائن a مختلف تماما عن الكائن b
console.log(a == b) // خطأ: الكائن a مختلف عن الكائن b

الكائنان a وb في المثال أعلاه يبدوان متشابهين تماما: كلاهما كائن ويحويان نفس القيم. الأمر الغريب هو أن المقارنة a === b ترجع دائما قيمة خاطئة false؛ لماذا؟ فلنفترض أنكَ وأخاك (أو أنكِ وأختك) توأم. تبدو مشابهًا تمامًا لأخيك: نفس لون الشعر، نفس شكل الوجه، نفس الثياب؛ كيف يمكن التفريق بينك وأخيك؟ سيكون الأمر صعبًا. لدى كل كائن في جافاسكريبت بطاقة تعريف (هوية) تُسمّى مرجع الكائن Object’s reference. عند استخدام عوامل المقارنة للتحقّق من تساوي كائنين في جافاسكريبت فإنك تطلُب من المفسر التحقّق ممّا إذا كان للكائنيْن نفسُ المرجع (بطاقة التعريف).

ليس غريبًا الآن أن تكون قيمة الشرط a === b في المثال أعلاه مساوية لـfalse. فلنعدّل قليلاً على المثال ونسند a إلى b:

const a = { isHavingFun: true }
const b = a

تصبح نتيجة المقارنة a === b الآن مساوية لـ true (أي أن الكائنين متساويان). السبب في ذلك هو أن الكائنين a وb لديهما الآن نفس المرجع.

console.log(a === b) // true

القيم الصحيحة و القيم الخاطئة

إن وضعت اسم متغيّر (hasApples - بمعنى لديه تفاح - في المثال أدناه) مكان الشرط في جملة if/else فإن مفسّر جافاسكريبت سيبحث عن قيمة صحيحة أو قيمة خاطئة.

const hasApples = 'true'
if (hasApples) {
  // تناول تفاحة
} else {
  // اشتر تفاحا
}

القيم الخاطئة هي قيم تأخذ القيمة false عند تحويلها إلى نوع البيانات المنطقية Boolean. توجد ست قيم خاطئة في جافاسكريبت:

  • false
  • undefined
  • null
  • 0 (العدد صفر)
  • "" (سلسلة محارف فارغة)
  • NaN

على الجانب الآخر، القيم الصحيحة هي تلك التي تأخذ القيمة true بعد تحويلها إلى بيانات منطقية. في حالة الأعداد فإن أية قيمة مغايرة للصفر تُحوَّل إلى قيمة صحيحة. تُشجّع جافاسكريبت على استخدام التحويل التلقائي إلى قيم صحيحة وقيم خاطئة لكونها تجعل من الشفرة البرمجية أقصر وأسهل فهما. إن أردت على سبيل المثال التحقّق من أن سلسلة محارف فارغة فيمكنك استخدام هذه السلسلة مباشرة في شرط الجملة if/else:

const str = ''

if (str) {
  // سلسلة المحارف غير فارغة
} else {
  // سلسلة المحارف فارغة
}

خاتمة

تُستخدم الجمل الشرطية if/else للتحكّم في عمل البرامج في حالات محدّدة؛ فتسمح لك بتحديد ما إذا كان يتوجب عليك الاستمرار في المشي أو الانتظار لتجاوز مفترق طرق.

توجد طريقتان للتحقّق من الشروط في جافاسكريبت:

  • عوامل المقارنة
  • القيم الصحيحة والقيم الخاطئة

ترجمة - تصرّف - للمقال Understanding if/else statements لصاحبه Zell Liew.


تفاعل الأعضاء

أفضل التعليقات

بتاريخ 13 ساعة قال Moammad Nassan:

هل ممكن تذكر طرق كتابة if condition او رابط لمقالة سابقة فيها ذلك

مرحباً محمد،

سأذكر لك مثال حتى يمكن شرح الطرق.

لنفترض أننا نريد كتابة برنامج يقوم بالتحقق فيما إذا كان عدد أكبر من الصفر، و في تلك الحالة يقوم بطباعة جملة معينة، عند ذلك يمكننا كتابة ما يلي:

let x = 10;
if (x > 0) {
    console.log("positive");
}

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

let x = 0;
if (x > 0) {
    console.log("positive");
}
else if (x === 0) {
    console.log("zero");
}

و في النهاية إذا كنا نريد طباعة كافة الحالات و هي إذا كان أكبر من صفر، يساوي الصفر، أو أصغر من الصفر، يمكننا كتابة ذلك كما يلي:

let x = -10;
if (x > 0) {
    console.log("positive");
}
else if (x === 0) {
    console.log("zero");
}
else {
    console.log("negative");
}

أتمنى أن تكون وصلت الفكرة.

تحياتي.

رابط هذا التعليق
شارك على الشبكات الإجتماعية



انضم إلى النقاش

يمكنك أن تنشر الآن وتسجل لاحقًا. إذا كان لديك حساب، فسجل الدخول الآن لتنشر باسم حسابك.

زائر
أضف تعليق

×   لقد أضفت محتوى بخط أو تنسيق مختلف.   Restore formatting

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   جرى استعادة المحتوى السابق..   امسح المحرر

×   You cannot paste images directly. Upload or insert images from URL.


×
×
  • أضف...