JavaScript Academy · درس

دمج ?. و??

اجمعوا بين الوصول الآمن والقيم الافتراضية المناسبة.

دمج ?. و?? درس مجاني في JavaScript Academy على CoddyKit. هذا هو الدرس 3 من أصل 4. يمكنك قراءة الدرس كاملاً أدناه مجاناً — ثم تمرن عليه مباشرة في المتصفح باستخدام محرر أكواد مدمج ومدرس ذكاء اصطناعي متاح 24/7. هذا الدرس جزء من مسار التعلم في JavaScript Academy، وتقدمك يتزامن عبر الويب وتطبيق CoddyKit. تتضمن دورة JavaScript Academy 4 دروس في المجموع.

أداتان معًا

تقرأ السلسلة الاختيارية ?. القيم التي قد تكون مفقودة بأمان، بينما يوفّر الدمج مع القيم الخالية ?? قيمة افتراضية. وعند دمجهما، يمكن قراءة البيانات العميقة والرجوع إلى قيمة بديلة بسلاسة.

const user = {};
console.log(user.profile?.name ?? "Anonymous");

النمط الشائع

يقرأ التعبير a?.b ?? fallback القيمة بأمان، ويستخدم قيمة افتراضية إذا كانت النتيجة قيمة خالية. ويحل هذا محل سلاسل الحماية المطوّلة.

const data = { settings: { theme: "dark" } };
const theme = data.settings?.theme ?? "light";
console.log(theme); // "dark"

الرجوع إلى قيمة بديلة عند الفقدان

إذا كانت أي حلقة في السلسلة قيمة خالية، يعيد ?. القيمة undefined، ثم يستبدلها ?? بالقيمة الافتراضية.

const data = {};
const theme = data.settings?.theme ?? "light";
console.log(theme); // "light"

التداخل العميق

يمكن توسيع هذا النمط ليشمل تراكيب متداخلة بعمق، مع الإبقاء على قيمة بديلة واحدة في النهاية.

const res = { data: { user: { city: "Berlin" } } };
const city = res.data?.user?.city ?? "Unknown";
console.log(city); // "Berlin"

الحفاظ على القيم الزائفة الصالحة

لأن ?? يستخدم قيمة افتراضية عند وجود قيمة خالية فقط، فإنه يحافظ على قيم 0 الفعلية الناتجة من السلسلة.

const cart = { items: [], count: 0 };
const count = cart?.count ?? 5;
console.log(count); // 0

مقابل فخ && / ||

سيؤدي استخدام a && a.b || fallback إلى استبدال قيمة 0 أو "" المشروعة بشكل خاطئ. ويتجنب الجمع بين ?. و?? هذه المشكلة.

const cfg = { volume: 0 };
console.log(cfg && cfg.volume || 50); // 50, wrong
console.log(cfg?.volume ?? 50);      // 0, correct

مع نتائج الدوال

يمكنكم أيضًا توفير قيمة افتراضية لنتيجة استدعاء اختياري، وذلك بدمج العاملين حول استدعاء إحدى الدوال.

const api = { fetchName: () => null };
const name = api.fetchName?.() ?? "default";
console.log(name); // "default"

توفير قيمة افتراضية للوصول إلى المصفوفات

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

const state = { list: ["a"] };
const first = state.list?.[0] ?? "empty";
console.log(first); // "a"

إنشاء سلاسل العرض

من الاستخدامات العملية إنشاء نص عرض آمن من بيانات غير مؤكدة.

function label(order) {
  return "Total: " + (order?.total ?? 0);
}
console.log(label(undefined)); // "Total: 0"

ملاحظة حول أسبقية العوامل

يتمتع ?. بأسبقية أعلى من ??، لذلك يُقرأ a?.b ?? c على أنه (a?.b) ?? c، وهو ما تريدونه تمامًا.

const u = { age: null };
console.log(u?.age ?? 18); // 18

اصطلاح واضح

يستبدل هذان العاملان معًا الشيفرة الدفاعية الطويلة بسطر واحد سهل القراءة، مما يجعل الغرض واضحًا.

const profile = null;
console.log(profile?.bio?.length ?? 0); // 0

تحقّق سريع

توقّعوا الناتج.

مراجعة

يقرأ النمط obj?.deep?.prop ?? fallback القيم المتداخلة التي قد تكون مفقودة، ويوفّر قيمة افتراضية فقط عندما تكون النتيجة null أو undefined. ويحافظ على القيم الزائفة الصالحة مثل 0 و""، بخلاف أسلوب &&/||. كما أن ?. له أسبقية أعلى من ??، ولذلك يكون التجميع صحيحًا تلقائيًا.

الأسئلة الشائعة

هل درس «دمج ?. و??» مجاني؟

نعم — نص درس «دمج ?. و??» كامل متاح مجاناً هنا على الويب. لتمرينه بشكل تفاعلي (محرر أكواد مدمج ومدرس ذكاء اصطناعي متاح 24/7) وفتح باقي دورة JavaScript Academy، انتقل إلى CoddyKit PRO. تتضمن دورة JavaScript Academy 4 دروس في المجموع.

ماذا ستتعلم في «دمج ?. و??»؟

اجمعوا بين الوصول الآمن والقيم الافتراضية المناسبة. تتمرن على JavaScript Academy مع أكواد عملية تشغلها مباشرة في المتصفح، ومدرس ذكاء اصطناعي متاح 24/7 يجيب على أسئلتك أثناء عملك.

هل أحتاج إلى خبرة سابقة لأبدأ JavaScript Academy؟

لا تُشترط خبرة سابقة. JavaScript Academy على CoddyKit منظم للمبتدئين حتى المتقدمين، لذا يمكنك البدء من هنا أو من البداية والتقدم بسرعتك الخاصة. هذا هو الدرس 3 من أصل 4.

كم من الوقت يستغرق درس «دمج ?. و??»؟

معظم دروس CoddyKit تستغرق حوالي 5–10 دقائق. كل منها موجز وتفاعلي، لذا تحرز تقدماً مستمراً وتستأنف من حيث توقفت عبر الويب والتطبيق.

هل يمكنني كتابة وتشغيل أكواد في درس JavaScript Academy هذا؟

نعم. كل درس في JavaScript Academy يتضمن محرر أكواد مدمج، لذا تكتب وتشغل أكواداً حقيقية مباشرة في متصفحك وتحصل على تعليقات فورية من الذكاء الاصطناعي — بدون إعداد محلي.

جميع الدروس في هذه الدورة

← العودة إلى JavaScript Academy