Lesson 13 / الدرس 13

Optional chaining and ?? / التسلسل الاختياري و??

Two small operators that between them remove most of the defensive clutter from code that reads data it did not create. One stops a chain safely; the other supplies a default without swallowing zero.

مؤثران صغيران يزيلان بينهما معظم الفوضى الدفاعية من شيفرة تقرأ بيانات لم تنشئها. أحدهما يوقف سلسلة بأمان، والآخر يوفّر قيمة افتراضية دون ابتلاع الصفر.

Stopping instead of crashing

order.customer.name        crashes if there is no customer
order.customer?.name       gives undefined instead

items?.[0]                 the same, for index access
callback?.()               the same, for calling a function

value ?? 'default'         used only when value is null or undefined
value || 'default'         used when value is ANY falsy — including 0

The question mark says: if the thing on my left is null or undefined, stop here and hand back undefined; otherwise carry on. It is not a general error catcher — a genuine typo still fails, which is what you want. Run it.

وعلامة الاستفهام تقول: إن كان ما على يساري null أو undefined فقف هنا وأعد undefined؛ وإلا فتابع. وليست ملتقط أخطاء عامًا — فالخطأ الإملائي الحقيقي ما زال يفشل، وهو ما تريده. شغّله.

Why ?? exists at all

For years the way to write a default was value || fallback, and it is wrong whenever a legitimate value is falsy. A quantity of 0, an empty note, a checkbox set to false — all three are real answers that || silently replaces with the fallback. The classic bug is a shopping cart that refuses to show a quantity of zero. ?? looks only for null and undefined, which is what "no value was supplied" actually means.

ولسنوات كانت طريقة كتابة قيمة افتراضية هي value || fallback، وهي خاطئة كلما كانت قيمة مشروعة زائفة. فكمية 0، وملاحظة فارغة، ومربع اختيار على false — الثلاثة أجوبة حقيقية يستبدلها || صامتًا بالبديل. والخلل الكلاسيكي سلة تسوق ترفض إظهار كمية صفر. و?? يبحث عن null وundefined فقط، وهو ما يعنيه فعلًا "لم تُعطَ قيمة".

والتسلسل الاختياري أداة قراءة لا رخصة للكف عن التفكير في البيانات المفقودة. فكتابة user?.profile?.avatar?.url في كل مكان تخفي السؤال الحقيقي — هل كان ينبغي وجود مستخدم هنا؟ — وتحوّل انهيارًا صاخبًا إلى صفحة تعرض لا شيء بهدوء. استخدمه حيث الغياب متوقع وطبيعي؛ وحيث يعني الغياب أن ثمة خطأ، افحص وقل ذلك. ولاحظ أيضًا أن a ?? b || c خطأ صياغي عمدًا: فاللغة ترفض التخمين، فأضف أقواسًا.

Written	When the left side is missing
a?.b	undefined, no crash
a?.[i]	undefined, no crash
fn?.()	undefined, and the call never happens
a ?? b	b, but only for null and undefined
a \|\| b	b for 0, empty string and false as well

The third row is quietly useful for optional callbacks: onDone?.() replaces the if (typeof onDone === "function") guard that used to surround every one.

والسطر الثالث نافع بهدوء لردود النداء الاختيارية: فـonDone?.() يحل محل حارس if (typeof onDone === "function") الذي كان يحيط بكل واحد.

وهذان يقترنان طبيعيًا: فـconst city = order.customer?.address?.city ?? "unknown" يقرأ سلسلة قد تقف مبكرًا ويعطي قيمة حقيقية في الحالين. وذلك السطر الواحد يحل محل نحو ستة أسطر من if متداخل، وهو أشيع تعبير جافاسكربت حديث ستقابله في شيفرة الآخرين.

Try it live / جرّب بنفسك

<pre id="out"></pre>

<script>
  const lines = [];

  const order = { id: 7, customer: { name: 'Sara' } };

  lines.push('name -> ' + order.customer?.name);
  lines.push('city -> ' + order.customer?.address?.city);

  document.getElementById('out').textContent = lines.join('\n');
</script>

Preview / المعاينة

Check yourself / اختبر نفسك

1. What does order.customer?.name give when there is no customer?

ماذا يعطي order.customer?.name حين لا يوجد عميل؟

2. Why is quantity || 1 a bug?

لماذا quantity || 1 خلل؟

3. When should you NOT reach for optional chaining?

Your task / مهمتك

Take a nested object describing an order and read four values out of it with optional chaining, at least one of them three levels deep and at least one that stops early. Print the crash you get without the question mark. Then build a table comparing ?? and || across 0, the empty string, false, null and a real value, and write one sentence under it naming a case where || would be the actual bug in a real page.

خذ كائنًا متداخلًا يصف طلبًا واقرأ منه أربع قيم بالتسلسل الاختياري، واحدة منها على الأقل بعمق ثلاثة مستويات وواحدة على الأقل تقف مبكرًا. واطبع الانهيار الذي تحصل عليه بلا علامة الاستفهام. ثم ابنِ جدولًا يقارن ?? و|| عبر 0 والنص الفارغ وfalse وnull وقيمة حقيقية، واكتب تحته جملة تسمّي حالة يكون فيها || هو الخلل الفعلي في صفحة حقيقية.

Four reads, one three levels deep, one stopping early أربع قراءات، واحدة بعمق ثلاثة وواحدة تقف مبكرًا
The crash without ?. shown الانهيار بلا ?. معروضًا
A ?? versus || comparison over five values مقارنة ?? مقابل || عبر خمس قيم
One named real-page bug caused by || خلل صفحة حقيقي واحد مسمّى سببه ||