الفرق بين undefined و null في جافاسكريبت

سؤال يقابل كل متعلّم جافاسكريبت — وسؤال مقابلات دائم: ما الفرق بين undefined و null؟ كلاهما «لا شيء»، لكن نكهة اللاشيء مختلفة، والخلط بينهما مصدر أخطاء حقيقية.

الفكرة بجملتين

• undefined = غياب تلقائي: اللغة نفسها تقول «لا قيمة هنا بعد».
• null = غياب مقصود: المبرمج قال «هذا فارغ عمدًا».

فكّر فيها كصندوق بريد: undefined صندوق لم يوضع فيه شيء قط، وnull صندوق وضع فيه صاحبه ورقة «فارغ».

جدول المقارنة الكامل

أين تظهر undefined تلقائيًّا؟

let name;                 // صُرّح ولم يُسند → undefined
const user = {};
user.age;                 // خاصية غير موجودة → undefined
const arr = [1, 2];
arr[9];                   // فهرس خارج الحدود → undefined
function greet() {}       // دالة بلا return → undefined
greet();
function hi(msg) {}       // وسيط لم يُمرَّر → undefined

لاحظ: كلها حالات «غياب» لم يكتب فيها أحد undefined بيده.

أين تستخدم null بقرارك؟

let selectedLesson = null;      // قيمة ابتدائية: «لا درس مختارًا بعد»

function findUser(id) {
  // «بحثنا ولم نجد» — قرار صريح أوضح من undefined
  return users.find((u) => u.id === id) ?? null;
}

element = null;                 // تفريغ مرجع (يساعد جامع النفايات)

فخ المقارنات: == و ===

null == undefined    // true  — الحالة الوحيدة المتسامحة
null === undefined   // false — النوعان مختلفان

null == 0            // false (مفاجأة: null لا تساوي صفرًا هنا)
null >= 0            // true  (المقارنات الحسابية تحوّلها لـ 0!)

هذه التناقضات سبب القاعدة الشهيرة: قارن بـ === دائمًا — راجع تفاصيلها في الفرق بين var و let و const وأخواتها من أساسيات الإتقان.

الأدوات الحديثة: ?? و ?.

المعاملان اللذان صُمّما خصيصًا للتعامل مع «الغيابَين» معًا:

// ?? — قيمة افتراضية فقط إذا كانت null أو undefined
const lang = settings.lang ?? "ar";
// (أفضل من || التي تستبدل أيضًا 0 و "" وfalse بالخطأ)

// ?. — توقف بأمان إذا صادفت null/undefined في السلسلة
const city = user?.address?.city;   // undefined بدل انفجار

بهما نادرًا ما تحتاج للتفكير «أيهما عندي الآن؟» — كلاهما يعامَل كغياب.

⚠️ وإذا انفجر عندك Cannot read properties of undefined فهذا هو الأخ الشرير للموضوع — حلّه الكامل هنا.

قائمة تحقّق سريعة

• لا تكتب x = undefined أبدًا — اتركها للغة، واستخدم null للتفريغ.
• قارن بـ ===، وللغيابَين معًا استخدم ?? و?..
• typeof null === "object" — معلومة مقابلات، لا تنخدع بها في الفحوص.
• دالة «بحث» ترجع null عند عدم الوجود أوضح من ترك undefined.

الخلاصة

undefined غيابٌ تكتبه اللغة، وnull فراغٌ تكتبه أنت. التزم بهذا العرف، قارن بصرامة ===، ودع ?? و?. يتكفلان بالتعامل الآمن مع الاثنين — وستختفي عائلة كاملة من الأخطاء من كودك.

أتقن الأساس في مسار جافاسكريبت بالعربي، وكمّل مع جدول أخطاء TypeError الشائعة و الفرق بين JavaScript و TypeScript حيث تحلّ الأنواعُ الصارمة نصفَ هذا الصداع من جذوره.