بررسی تفاوت های بین null و undefined در جاوا اسکریپت

شاید برای شما هم پیش آمده باشد که گاهی درطول توسعه نرم افزاری با جاوا اسکریپت، با خطا های زیر رو به رو شوید.

Can not read property  ‘X’ of null
Can not read property  ‘X’ of undefined

توسعه دهنده های سی شارپ و جاوا که قصد کار با جاوا اسکریپت را دارند، حتما از خود می پرسد چه تفاوت ها یا شباهت هایی بین null و undefined وجود دارد. در زبان هایی مانند جاوا یا سی شارپ که روی نوع متغیر ها سخت گیری زیادی انجام می گیرد، خطای null گرفتن به معنی این است که مقدار متغیری تعریف نشده و یا آن متغیر مقدار نگرفته است. در جاوا اسکریپت علاوه بر null مفهوم دیگری به نام undefined وجود دارد. در این مقاله قصد داریم تفاوت و شباهت های بین null و undefined را بررسی کنیم . پس بیایید شروع کنیم. 

type ها در جاوا اسکریپت

قبل از هر چیز باید با با type های مختلف در جاوا اسکریپت آشنا شویم. در جاوا اسکریپت دو دسته type وجود دارد: 

1. Primitives یا Value Types یا داده های اولیه
2. Reference Types یا انواع ارجاعی

در دسته بندی type ،Primitives های زیر را داریم.

1. Strings یا نوع رشته ای
2. Numbers یا نوع عددی
3. Booleans یا نوع منطقی
4. undefined
5. null

(برای یادگیری کامل و ویدیویی انواع data type ها به بخش رایگان آموزش انواع داده در جاوا اسکریپت مراجعه کنید.)

وقتی متغیری را تعریف کنیم ولی به آن مقداری ندهیم، در جاوا اسکریپت به صورت پیش فرض مقدار undefined را می گیرد. مثلا اگر متغیر firstName را تعریف کنیم و به آن مقداری ندهیم و بخواهیم مقدار آن را چاپ کنیم، مقدار undefined چاپ خواهد شد . مانند مثال زیر.

let firstName ;
console.log (firstName) ;
>> undefined

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

let firstName = undefined ;

در جاوا اسکریپت علاوه بر undefined، کلمه‌ی کلیدی null هم وجود دارد. مثلا متغیر lastName را تعریف می کنیم و به آن مقدار null را می دهیم. 

let lastName = null ;

در نگاه کسانی که با زبان هایی مانند سی شارپ و جاوا کار کرده اند، null و undefined یک معنی را دارد چون شباهت های زیادی با هم دارند و ممکن است موجب سر درگمی آن ها هم بشود و این سوال ها در ذهن آن ها ایجاد شود که null و undefined در زبان جاوا اسکریپت چه تعریفی دارند و تفاوت آن ها چیست و در چه مواردی کاربرد دارند؟ در ادامه به این سوال ها پاسخ خواهیم داد.

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

از نظر مفهومی null و undefined هر دو به این معنی هستند که متغیر یا خصوصیتی در یک شی، مقداری ندارد و از این نظر با هم مشابه هستند. بیایید این تشابه را با یک مثال بررسی کنیم. 

let firstName = undefined ;
let selectedColor = null ;

console.log (firstName == selectedColor) ;
// true
console.log (firstName === selectedColor) ;
// false

متغیر firstName را تعریف کرده ایم و به آن مقدار undefined را داده ایم و هم چنین متغیر selectedColor را تعریف کرده و به آن مقدار null را داده ایم. ابتدا با عملگر دو تا مساوی == بررسی می کنیم که آیا این دو متغیر با هم برابر هستند یا خیر و در جواب مقدار true را می گیریم که نشان می دهد این دو متغیر از نظر مقداری با هم برابر هستند. هر دو به معنی وجود داشتن یا نداشتن مقداری در متغیر هستند. اگر متغیری مقدار null یا undefined را بگیرد به این معنی است که این متغیر مقداری ندارد. از نظر عملگر دو تا مساوی == هر دو برابر بوده و در نتیجه true بر گشت داده می شود چون هر دو به عنوان وجود یا عدم وجود مقداری در متغیر در نظر گرفته می شوند.

اما زمانی که از عملگر سه تا مساوی === استفاده می کنیم، علاوه بر موردی که در بالا اشاره شد، نوع (type) های null و undefined را هم بررسی می کند. در زبان جاوااسکریپت با استفاده از عملگر typeof می توان فهمید که نوع یک متغیر چیست. مثال زیر را در نظر بگیرید.

console.log (typeof firstName) ;
// undefined
console.log (typeof selectedColor) ;
// object

همان طور که می بینید، متغیر firstName که مقدار undefined را داشت، نوعش undefined است . در بخش قبل گفتیم که در جاوا اسکریپت دو طبقه بندی برای تایپ ها وجود دارد که یکی از آن ها نوع های اولیه یا primitives types بودند که نوع undefined یکی از این نوع های اولیه بود. در واقع undefined، یک نوع یا type محسوب می شود و علاوه بر نوع undefined، مقداری با همان نام هم وجود دارد که می توان آن را به متغیر ها نسبت داد که همان طور گفته شد این کار معمولی در جاوا اسکریپت نیست چون اگر بخواهیم مقدار یک متغیری را پاک کنیم از null باید استفاده می شود. در مثال بالا چون متغیر firstName تعریف شده و مقدار  undefined را گرفته پس نوع متغیر firstName، undefined خواهد شد. 

داستان برای متغیر selectedColor متفاوت است. متغیری که مقدار null را می گیرد، نوع آن object خواهد بود. نوع object از طبقه بندی reference type های جاوا اسکریپت محسوب می شود. پس به همین دلیل است عملگر سه تا مساوی === مقدار false را بر می گرداند چون علاوه بر وجود یا عدم وجود مقدار در متغیر ها، نوع متغیر ها را هم مقایسه خواهد کرد. 

یکی از تفاوت های دیگر null و undefined این است که وقتی متغیری را تعریف می کنیم ولی به آن مقداری نمی دهیم، به صورت پیش فرض undefined در نظر گرفته می شود، ولی مقدار null را باید به طور صریح (explicitly) به یک متغیر نسبت داد. وقتی مقدار null را به متغیری نسبت می دهیم ، مقدار آن به طور کامل reset یا پاک خواهد شد. 

فرض کنید یک شی به نام user داریم که اطلاعات کاربر را نگه می دارد. هم چنین لیستی از رنگ ها را داریم که کاربر قادر است یکی از این رنگ ها را انتخاب کند. اگر کاربر هیچ کدام از رنگ ها را انتخاب نکرده باشد، متغیر selectedColor که رنگ انتخاب شده را نگه می دارد، با مقدار null پر می شود و به این معنی است که کاربر هنوز رنگی را انتخاب نکرده است. بعدا اگر کاربر رنگی را انتخاب کرد، آن رنگ را به متغیر selectedColor نسبت خواهیم داد و اگر از انتخاب آن رنگ انصراف داد، مقدار آن را به null بر می گردانیم و به این ترتیب می توانیم متوجه شویم که آیا رنگی انتخاب شده است یا خیر. 

به طور کلی از null در موقعیت هایی استفاده می کنیم که بخواهیم مقدار یک متغیر را reset یا پاک کنیم ولی متغیری که undefined گرفته است به این معنی است متغیر تعریف شده است ولی هنوز مقداری نگرفته است. متغیری که مقدار null می گیرد، مقدارش معلوم شده است و مقدار آن هیچی است. 

از شباهت های این دو نوع می توان به این مورد اشاره کرد که هر دو مقدار false یا falsy value (مقدار غلط) محسوب می شوند یعنی اگر در عبارت if استفاده شوند به false محاسبه خواهند شد. مثلا در قطعه کد زیر اگر رنگی انتخاب شود متغیر selectedColor مقداری به غیر از null یا undefined می گیرد و داخل دستور if نمی رود ولی در غیر این صورت چون هم null و هم undefined به false تعبیر می شوند پیغام " کاربر رنگی را انتخاب نکرده است " نمایش داده می شود.

let selectedColor ;
if ( ! selectedColor ) {
    console.log ( " user not selectd a color " ) ;
}

خلاصه و جمع بندی

برای جمع بندی موارد زیر را در نظر داشته باشید:

• undefined به معنی این است که متغیر تعریف شده است ولی هنوز مقدارش مشخص نشده است.
• هر وقت مقدار null را به متغیری نسبت می دهیم به این معنی است که مقدار هیچی (پوچ، خالی) را برای آن در نظر گرفته ایم.
• null و undefined هر دو falsy value هستند یعنی به false تعبیر خواهند شد.
• null و undefined هر دو در طبقه بندی داده های اولیه ی جاوا اسکریپت قرار می گیرند.
• نوع undefined از نوع داده ای undefined است ولی نوع null از نوع داده ای object بود که در طبقه بندی reference type ها قرار می گیرد .
• null == undefined است ولی null !== undefined