🚀 دليلك الشامل لفهم Null و Undefined في TypeScript

اليوم سنتحدث عن مفهومين يسببان ارتباكاً للكثير من المبتدئين في بداية رحلتهم مع TypeScript و JavaScript، وهما null و undefined.

على الرغم من أن كلاهما يشير إلى "غياب القيمة"، إلا أن هناك فرقاً جوهرياً في المعنى والاستخدام. دعنا نبسط الأمر تماماً! 💡

❓ ما هو الـ Undefined؟

كلمة Undefined تعني حرفياً "غير معرف". في TypeScript، تظهر هذه القيمة عندما تقوم بتعريف متغير ولكنك لا تعطي له أي قيمة أولية.

تخيل أنك اشتريت صندوقاً (متغير)، ولكنك لم تضع بداخله أي شيء بعد. في هذه الحالة، الصندوق موجود، لكن محتواه "غير معرف".

مثال برمجي:

let userName: string; 
// هنا قمنا بتعريف المتغير ولكن لم نعطه قيمة

console.log(userName); // Output: undefined

في المثال السابق، أخبرنا TypeScript أن userName سيكون نصاً، لكننا لم نحدد ما هو هذا النص، لذا فإن القيمة الافتراضية هي undefined.

❓ ما هو الـ Null؟

كلمة Null تعني "فراغ" أو "لا شيء". الفرق هنا هو أن null هي قيمة نحن من نضعها عمداً لنخبر البرنامج بأن هذا المتغير حالياً "فارغ" أو "لا يحتوي على قيمة".

تخيل نفس الصندوق السابق، لكنك الآن قررت أن تضع فيه ورقة مكتوب عليها "هذا الصندوق فارغ". أنت هنا حددت الحالة بأنها "فراغة" بشكل مقصود.

مثال برمجي:

let userAddress: string | null = null; 
// هنا أخبرنا TypeScript أن العنوان قد يكون نصاً أو قد يكون فارغاً (null)

console.log(userAddress); // Output: null

لاحظ في المثال أعلاه أننا استخدمنا | null لكي نسمح للمتغير بأن يحمل قيمة null لأن TypeScript في الإعدادات الصارمة قد يمنع ذلك إذا لم نحدده.

🔍 مقارنة سريعة: ما الفرق بينهما؟

لكي لا تختلط الأمور عليك، إليك هذا الجدول البسيط:

وجه المقارنة Undefined Null
المعنى القيمة غير موجودة أو لم يتم تعيينها القيمة موجودة ولكنها "فارغة" عمداً
التعيين يتم تعيينه تلقائياً بواسطة اللغة يتم تعيينه يدوياً بواسطة المبرمج
التشبيه صندوق لم نضع فيه شيئاً بعد صندوق وضعنا فيه علامة "فارغ"

🛠️ كيف نتعامل معهما في الكود؟

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

مثال عملي بسيط:

let currentJob: string | null = null; // المستخدم لم يحدد وظيفته بعد

if (currentJob === null) {
    console.log("Please enter your job title!"); // رسالة تطلب من المستخدم إدخال الوظيفة
} else {
    console.log("Your job is: " + currentJob);
}

في هذا المثال، استخدمنا null لتمثيل حالة أن المستخدم لم يقم بتعبئة بيانات الوظيفة بعد، ثم تحققنا من ذلك باستخدام جملة if.

⚠️ ملاحظة هامة جداً

في لغة TypeScript، هناك ميزة تسمى strictNullChecks (فحص القيم الفارغة الصارم). إذا كانت هذه الميزة مفعلة في إعدادات مشروعك، فإن TypeScript لن يسمح لك بتعيين null أو undefined لمتغير من نوع string مثلاً، إلا إذا أخبرته صراحة بأن المتغير قد يكون كذلك باستخدام العلامة | (التي تسمى Union Type)، كما فعلنا في الأمثلة السابقة: string | null