شرح ال Conditional Ternary Operator في JavaScript

أحيانا تحتاج تختار قيمة من اختيارين حسب شرط زي نص زر أو تكلفة شحن هنا ال Conditional Operator المعروف باسم Ternary بيكون مناسب لأنه تعبير ليه نتيجة تقدر تخزنها أو ترجعها من دالة

ليه اسمه Ternary

لأنه بيتعامل مع ثلاثة أجزاء الشرط وبعده تعبير حالة النجاح وبعده تعبير الحالة التانية ال if جملة للتحكم في مسار التنفيذ ومش دالة وال Ternary مش مطلوب يحل محل كل if

condition ? valueIfTrue : valueIfFalse

نفس القرار بطريقتين

هنحدد رسالة حسب وجود رصيد في الحساب الأول باستخدام if وبعدها نكتب اختيار القيمة باستخدام العامل الشرطي

const balance = 50;
let message;

if (balance > 0) {
  message = "Balance available";
} else {
  message = "Empty balance";
}

console.log(message);

const balance = 50;
const message = balance > 0 ? "Balance available" : "Empty balance";
console.log(message);

Balance available

هنا الهدف اختيار نص واحد فالطريقة المختصرة واضحة لكن لو كل فرع فيه خطوات كتير فال if غالبا هتكون أسهل في القراءة والتعديل

استخدام النتيجة داخل دالة

تقدر ترجع القيمة المختارة مباشرة من الدالة هنا الطلب اللي مجموعه 300 أو أكتر شحنه مجاني وغير كده الشحن 25

function shippingCost(total) {
  return total >= 300 ? 0 : 25;
}

console.log(shippingCost(350));
console.log(shippingCost(120));

0
25

بيتنفذ فرع واحد فقط

بعد تقييم الشرط بيتقيم التعبير المختار بس المثال بيخلي كل فرع يطبع رسالة علشان تشوف بنفسك إن الفرع التاني متنفذش

function selected(value) {
  console.log("Selected: " + value);
  return value;
}

const label = true ? selected("Ready") : selected("Waiting");
console.log(label);

Selected: Ready
Ready

الشرط مش لازم يكون Boolean مكتوب بشكل مباشر

القيمة بتتفسر حسب قواعد Truthy و Falsy الصفر والنص الفاضي و null و undefined و NaN و false قيم بتتصرف كحالة غير متحققة في الشرط بينما النص "0" و Array فاضية بيعتبروا Truthy

console.log(0 ? "Yes" : "No");
console.log("0" ? "Yes" : "No");
console.log([] ? "Yes" : "No");

No
Yes
Yes

لما الصفر يكون قيمة صحيحة

لو المستخدم اختار كمية صفر فممكن تكون قيمة مقصودة استخدام الشرط المباشر هيبدلها بالقيمة الافتراضية لو المطلوب الاستبدال عند null أو undefined بس استخدم ??

const quantity = 0;
console.log(quantity ? quantity : 1);
console.log(quantity ?? 1);

1
0

تعدد الحالات من غير تعقيد القراءة

ممكن تربط أكتر من شرط لكن متخليش الاختصار يصعب فهم المطلوب المثال بسيط وفيه ثلاث درجات لو القواعد زادت أو الفروع احتاجت خطوات استخدم if أو دالة واضحة

const score = 75;
const level = score >= 90
  ? "Excellent"
  : score >= 60
    ? "Passed"
    : "Try again";

console.log(level);

Passed

تدريب عملي

اعمل دالة ترجع In stock لو الكمية أكبر من صفر وترجع Out of stock في غير كده وجربها بقيمة موجبة وصفر بعد الحل اسأل نفسك هل اسم الدالة والشرط بيوضحوا المطلوب من غير شرح إضافي