تفاوت undefined و null در JavaScript چیست؟

ممکنه از دید خیلی برنامه‌نویس‌های جاوااسکریپت null و undefined زیاد فرقی نداشته باشه چون هردوی آنها وقتی در if قرار می‌گیرند به عنوان false در نظر گرفته می‌شوند.

حتی وقتی در کنسول جاوااسکریپت بنویسیم null == undefined مقدار true را بر می‌گرداند. اما اگر بنویسیم null === undefined نتیجه‌اش false است، چون سه مساوی علاوه بر مقدار گزاره‌ای (که برای هر دو false است) جنس را هم مقایسه می‌کند.

null چیست؟

دو مطلب مهم را در مورد null باید بدانیم:

• null یک مقدار خالی و یا غیر موجود می‌باشد.
• null حتما باید مقدارگذاری شود. یعنی هیچ متغیری به صورت پیش‌فرض null نیست.

به عنوان مثال:

let s = null;

console.log(s);

// null

undefined چیست؟

معمولا undefined به این معناست که یک متغیر تعریف شده ولی مقداری برایش تعیین نشده. به عنوان مثال:

let i;

console.log(i);

// undefined

همینطور می‌توانید به صراحتا مقدار undefined را به یک متغیر بدهید، مثلا:

let a = undefined;

console.log(a);

// undefined

همینطور وقتی که به propertyهای یک object که تعریف نشده بخوایم دسترسی پیدا کنیم undefined نتیجش خواهد بود:

let v = {};

console.log(v.ash);

// undefined

شباهت‌های null و undefined

در جاوااسکریپت کلا ۶ مقدار هستن که false حساب می‌شوند که هر دوی null و undefined جزو این مواردند:

• false
• 0 (صفر)
• "" (رشته خالی)
• null
• undefined
• NaN (ناعدد)

هر مقدار دیگری در جاوااسکریپت true حساب می‌شود.

همینطور در جاوا‌اسکریپت ۶ جنس اولیه داریم که هردوی null و undefined از جنس‌های اولیه هستند. لیست کامل:

• Boolean
• Null
• Undefined
• Number
• String
• Symbol

تمام مقادیر دیگر object حساب می‌شوند از جمله خود objectها، functionها، arrayها...

نکته خیلی جالب اینه که در جاوااسکریپت typeof null نتیجه‌اش object هست که دلیلش هم اشتباهی بوده که در پیاده‌سازی اولیه جاوااسکریپت انجام شده و وقتی می‌خواستند درستش کنن دیگه خیلی دیر بوده. درست مثل هدر HTTP referer در پروتوکول HTTP که از ابتدا اشتباها به جای referrer (نحوه صحیح نوشتن ارجاع‌دهنده) referer نوشته شده.

مثال عملی تفاوت null و undefined

خوب حالا سوال پیش می‌آید که در چه جاهایی در عمل این دو با هم تفاوت دارند؟

فرض کنید تابع زیر را داریم:

let logSiavash = function(str = 'Siavash') {

  console.log(str);

}

اگر همینطوری تابع logSiavash را اجرا کنیم این تابع 'Siavash' را در کنسول لاگ می‌کند.

حال اگر بنویسیم logSiavash('Salam') بدون شک Salam لاگ خواهد شد.

تفاوت اصلی undefined و null اینجا به چشم می‌آید:

logSiavash(undefined);

// Siavash


logSiavash(null);

// null

همونطوری که می‌بینید برای مقادیر پیش‌فرض در توابع اگر از undefined استفاده کنیم، مقدار پیش‌فرض استفاده می‌شود اما اگر از null استفاده کنیم، از مقدار پیش‌فرض استفاده نمی‌کند و از خود مقدار null استفاده می‌شود.

من این مطلب رو از اینجا۹۷ یاد گرفتم.