٨ يونيو ٢٠٢٠

Nullish Coalescing Operator '??'

إضافة حديثة
هذه إضافة حديثة إلى اللغه. المتصفحات القديمه ربما تتطلب polyfills.

Nullish Coalescing Operator ?? يقدم طريقة مختصرة لإختيار أول قيمة معرفة من قائمة متغيرات.

نتيجة a ?? b تكون:

  • a إذا لم تكن null أو undefined,
  • b, غير ذلك.

لذلك فإن x = a ?? b طريقة مختصرة للتالي:

x = a !== null && a !== undefined ? a : b;

هذا مثال أطول.

لنفترض أن لدينا مستخدم ولديه المتغيرات firstName, lastName أو nickName وجميعهم اختياريين.

لنختار القيمة المعرفة ونعرضها (أو نعرض “Anonymous” إذا لم يحدد أي شئ):

لنستخدم ?? لتحديد أول عامل محدد

let firstName = null;
let lastName = null;
let nickName = "Supercoder";

// show the first not-null/undefined value
alert(firstName ?? lastName ?? nickName ?? "Anonymous"); // Supercoder

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

هذا مشابه جدًا للمعامل ||. في الحقيقة يمكننا استبدال ?? ب || في المثال السابق وسنحصل على نفس النتيجة. كما وصفنا في الفصل السابق.

الفرق الجوهري بينهما أن:

  • || يرجع أول قيمة truthy.
  • ?? يرجع أول قيمة defined.

هذا مهم جدًا عندما نريد معاملة null/undefined بطريقة مختلفة عن 0.

مثلًا:

height = height ?? 100;

هذا يجعل height يساوي 100 إذا لم يعرف. ولكن إذا كان height يساوي 0 سيبقى كما هو.

لنقارنه مع ||:

let height = 0;

alert(height || 100); // 100
alert(height ?? 100); // 0

هنا height || 100 تعامل الصفر كـ null, undefined أو أي قيمة زائفة. اذا الصفر يصبح 100.

ولكن height ?? 100 ترجع 100 إذا كان فقط height يساوي تمامًا null أو undefined. اذا الصفر يبقى “كما هو”.

يعتمد السلوك الافضل على حالة الاستخدام. تكون ?? الطريقة الافضل عندما يكون صفر height قيمة صالحة.

الأولوية

أولوية العامل ?? هي قليلة: 7 وتساوي MDN جدول.

هذا أقل من معظم المعاملات وأكبر بقليل من = و ?.

لذلك إذا أردنا استخدام ?? في تعبيرات معقدة نقوم بإضافة أقواس:

let height = null;
let width = null;

// مهم: استخدم الأقواس
let area = (height ?? 100) * (width ?? 50);

alert(area); // 5000

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

// غير صحيح
let area = height ?? 100 * width ?? 50;

هناك أيضًا قيود لغوية.

لأسباب أمنية، لا يمكن استخدام ?? مع && و ||.

هذا سينتج خطأ لغوي:

let x = 1 && 2 ?? 3; // Syntax error

هذا القيد قد لا يبدو منطقيًا ولكن لبعض الأسباب تم إضافته للغة.

استخدم الأقواس لتجنب الخطأ:

let x = (1 && 2) ?? 3; // تعمل دون مشاكل
alert(x); // 2

ملخص

  • عامل حذف null ?? يقدم طريقة مختصرة لإختيار أول قيمة معرفة من قائمة قيم.

    يستخدم لوضع قيم افتراضية للمتغيرات:

    // اجعل height=100 إذا كان null أو undefined
    height = height ?? 100;
  • العامل ?? لديه أولوية قليلة جدًا لكن أعلة قليلًا من ? و =.

  • يمنع استخدامه مع || أو && بدون أقواس.

خريطة الدورة التعليمية

التعليقات

إقرأ هذا قبل أن تضع تعليقًا…
  • إذا كان لديك اقتراحات أو تريد تحسينًا - من فضلك من فضلك إفتح موضوعًا فى جيتهاب أو شارك بنفسك بدلًا من التعليقات.
  • إذا لم تستطع أن تفهم شيئّا فى المقال - وضّح ماهو.
  • إذا كنت تريد عرض كود استخدم عنصر <code> ، وللكثير من السطور استخدم <pre>، ولأكثر من 10 سطور استخدم (plnkr, JSBin, codepen…)