null و undefined
تعرّفت على القيم المنطقية — نعم أو لا بوضوح. يحتاج البرنامج أحيانًا أن يقول «لا توجد قيمة هنا.» في JavaScript فراغان شائعان: undefined و null. يبدوان متشابهين، لكن قصة كل منهما مختلفة. هنا نفرّق بينهما حتى لا تربكك التحويلات والفحوصات لاحقًا.
ما الفرق بين null و undefined؟
undefined يعني عادةً «لم يُوضع شيء هنا بعد» — متغير أُعلن بـ let بلا تعيين، أو جزء مفقود. null يعني «فارغ عن قصد»: أنت (أو واجهة) تضع null لتفريغ المكان. افحص بـ typeof: typeof undefined يعطي "undefined"، أما typeof null فغرابة قديمة تعطي "object". عند المقارنة فضّل ===. كلاهما falsy، وليسا من النوع المنطقي (true / false).
أدوات القيمة الفارغة
📊 null مقابل undefined للمبتدئ
| الفكرة | مثال | النتيجة / ملاحظة |
|---|---|---|
| ناقص / بلا تعيين | let x; ثم x |
undefined |
| فراغ مقصود | let box = null |
اخترت الفراغ أنت |
typeof للناقص |
typeof undefined |
"undefined" |
typeof للفارغ |
typeof null |
"object" (غرابة — ما زال يعني فارغًا) |
| مقارنة صارمة | box === null |
true عندما يحمل box قيمة null |
| تنبيه المقارنة المرنة | null == undefined |
true مع == — فضّل === للوضوح |
undefined — لم تُعيَّن قيمة بعد
أعلن اسمًا بـ let دون تعيين. القيمة undefined. اطبع القيمة و typeof حتى تثبت التسمية "undefined".
let nickname;
console.log(nickname);
console.log(typeof nickname);
null — فراغ مقصود
ضع null عندما تريد إشارة واضحة «بلا قيمة». هذا يختلف عن نسيان التعيين.
let selected = null;
console.log(selected);
console.log(typeof selected);
typeof جنبًا إلى جنب
ضع النتيجتين معًا. تذكّر: طباعة "object" من typeof null غرابة، وليست درس كائنات كامل الآن.
console.log(typeof undefined);
console.log(typeof null);
let a;
let b = null;
console.log(typeof a);
console.log(typeof b);
فضّل === مع null و undefined
=== يسأل عن القيمة والنوع معًا. استخدمه عندما تقصد «null تمامًا» أو «undefined تمامًا». مع == قد يتطابق null و undefined — سهل أن يُساء فهمه أثناء التعلم.
let user = null;
let title;
console.log(user === null);
console.log(title === undefined);
console.log(user === undefined);
== المرن قد يخلط بينهما
مع == يتطابق null و undefined. اطبعه مرة لترى المفاجأة — ثم أبقِ الفحوص الحقيقية على ===.
console.log(null == undefined);
console.log(null === undefined);
السطر الأول يساوي true لأن == مرن. الثاني false. اكتب الفحص الحقيقي بـ === ليبقى قصدك واضحًا.
اعرض الفراغين على الصفحة
احفظ اسمًا بأسلوب undefined وآخر بـ null، ثم اكتب تسميات قصيرة بـ textContent.
<!DOCTYPE html>
<html>
<head>
<title>null and undefined — labels</title>
</head>
<body>
<p id="out">…</p>
<script>
let title;
let avatar = null;
document.getElementById("out").textContent =
"title=" + title + " | avatar=" + avatar;
</script>
</body>
</html>
الفقرة تعرض الفراغين في سطر واحد. غيّر فقط avatar إلى نص قصير، حدّث الصفحة، وتأكد أن النصف الأيمن يتغيّر بينما يبقى title بقيمة undefined.
جرّبها بنفسك
- أعلن
let city;— اطبعcityوtypeof cityدون تعيين. - ضع
let bag = null;— اطبع القيمة وtypeof bag(توقّع غرابة"object"). - اطبع
typeof undefinedوtypeof nullمعًا لترى الفرق. - قارن بـ
===: افحص متغيرًا يحملnullمقابلnullومقابلundefined. - اطبع
null == undefinedمرة، ثم اكتب فحوصك الحقيقية بـ===. - في عرض HTML عيّن
avatarإلى"pic.png"، حدّث، واقرأ السطر الجديد.
أخطاء شائعة
- اعتبار
nullوundefinedدائمًا متطابقين — المعنى يختلف (مقصود مقابل بلا تعيين) - الذعر عندما يكون
typeof nullهو"object"— غرابة؛ ما زالnullفراغًا مقصودًا - الاعتماد على
==بينهما دون ملاحظة التطابق المرن - تسمية أي منهما قيمة منطقية — هما فراغان؛ المنطقي فقط
true/false - خلط النص الفارغ
""معnull—""ما زال نصًا
الخلاصة
undefined: ناقص / بلا تعيين بعد؛typeof→"undefined"null: فراغ مقصود تعيّنه أنت؛typeof→"object"(غرابة)- فضّل
===للفحوص الواضحة؛ كلاهما falsy وليسا منطقيين - النص الفارغ
""نص — ليس مثلnullأوundefined - التالي: تحويل النوع — تحويل قيمة من نوع إلى آخر عن قصد
🧠 اختبر معرفتك
اختبر معرفتك
تحدى نفسك مع هذا الاختبار التفاعلي واكتشف مدى فهمك للموضوع
📝 التعليمات
- اقرأ كل سؤال بعناية
- اختر أفضل إجابة لكل سؤال
- يمكنك إعادة الاختبار عدة مرات كما تريد
- سيتم عرض تقدمك في الأعلى