تخطَّ إلى المحتوى

switch والمعامل الثلاثي في JavaScript

الدرس 9 من 28 · JavaScript

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

تخيّل مصعداً فيه أزرار للطوابق. تضغط رقم الطابق، فيذهب المصعد مباشرة إلى الطابق المطابق. جملة switch تعمل بنفس الفكرة: تأخذ قيمة، ثم تبحث عن «الحالة» (case) المطابقة لها وتنفّذها.

let light = "أصفر";
switch (light) {
case "أحمر":
console.log("قف");
break;
case "أصفر":
console.log("استعد");
break;
case "أخضر":
console.log("انطلق");
break;
default:
console.log("لون غير معروف");
}
الناتج
استعد

مكونات الجملة:

  • switch (light): القيمة التي نريد فحصها.
  • case "أحمر":: حالة محتملة. إذا كانت القيمة تساوي "أحمر" يُنفّذ ما بعدها.
  • break: تعني «اخرج من switch الآن».
  • default: تُنفّذ إذا لم تطابق القيمة أي حالة، مثل else الأخيرة.

إذا نسيت break، لن تتوقف JavaScript بعد الحالة المطابقة، بل ستكمل تنفيذ الحالات التي بعدها حتى تجد break أو تصل للنهاية. هذا يسمى «السقوط» (Fall-through):

let level = 1;
switch (level) {
case 1:
console.log("المستوى الأول");
case 2:
console.log("المستوى الثاني");
break;
case 3:
console.log("المستوى الثالث");
}
الناتج
المستوى الأول
المستوى الثاني

القيمة 1 طابقت الحالة الأولى، لكن لعدم وجود break استمر التنفيذ إلى الحالة الثانية! الأمر يشبه مصعداً معطوباً يفتح بابه في طابقك ثم يكمل إلى الطابق التالي ويفتح هناك أيضاً.

أحياناً يكون هذا السلوك مفيداً، عندما تريد أن تنفّذ نفس الكود لأكثر من قيمة:

let month = "يناير";
switch (month) {
case "ديسمبر":
case "يناير":
case "فبراير":
console.log("فصل الشتاء");
break;
default:
console.log("فصل آخر");
}
الناتج
فصل الشتاء

الحالات الثلاث بلا كود بينها، فكلها تصل إلى نفس السطر.

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

Section titled “متى أستخدم switch ومتى أستخدم if؟”
  • استخدم switch عندما تقارن متغيراً واحداً بقيم محددة: أيام الأسبوع، أو اختيارات قائمة، أو ألوان.
  • استخدم if عندما تكون الشروط نطاقات مثل score >= 90، أو عندما تجمع شروطاً مختلفة بـ && و ||.

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

Section titled “المعامل الثلاثي (Ternary Operator)”

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

let age = 15;
let type = age >= 18 ? "بالغ" : "قاصر";
console.log(type);
الناتج
قاصر

اقرأه هكذا: «هل age >= 18؟ إذا نعم فالقيمة "بالغ"، وإلا فالقيمة "قاصر"». الشكل العام:

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

يسمى «ثلاثياً» لأنه الوحيد في اللغة الذي يأخذ ثلاثة أجزاء. وهو مفيد جداً داخل قوالب النصوص:

let points = 1;
console.log(`لديك ${points} ${points === 1 ? "نقطة" : "نقاط"}`);
let n = 7;
console.log(n % 2 === 0 ? "زوجي" : "فردي");
الناتج
لديك 1 نقطة
فردي

غيّر قيمة fruit إلى "موز" ثم "عنب" ثم "بطيخ"، وغيّر stock إلى 0:

جرّب بنفسكJavaScript
أو اضغط Ctrl + Enter

الناتج

  • نسيان break: أشهر خطأ مع switch، ويجعل حالات إضافية تُنفّذ بلا قصد.
  • استخدام switch مع نطاقات: كتابة case score >= 90: لا تعمل كما تتوقع. النطاقات مكانها if.
  • اختلاف النوع: قيمة نصية "3" لا تطابق case 3: لأن المقارنة صارمة.

سؤال

ماذا يحدث إذا نسيت كتابة break بعد حالة مطابقة في switch؟

سؤال

ما قيمة 10 > 3 ? 'كبير' : 'صغير'؟

  • switch تقارن قيمة واحدة بعدة حالات case، و default للحالات غير المتوقعة.
  • لا تنسَ break بعد كل حالة، إلا إذا أردت عمداً أن تتشارك عدة حالات نفس الكود.
  • switch تقارن بصرامة مثل ===.
  • المعامل الثلاثي شرط ? أ : ب يختار بين قيمتين في سطر واحد.
  • استخدم switch للقيم المحددة، و if للنطاقات والشروط المركبة.