سلام جاوااسکریپتیها! موضوع آبجکتها یکی از مهمترین موضوعها توی جاوااسکریپت هست. احتمالاً این جمله رو شنیدین که همه چیز توی جاوااسکریپت آبجکت هست. به عبارت بهتر، ما توی جاوااسکریپت همیشه با آبجکتها سر و کار داریم. این جملهها اهمیت این موضوع رو نشون میده که درک آبجکتها چقدر به یادگیری اصولی زبان جاوااسکریپت کمک میکنه. توی این قسمتها میخوایم مفصل با آبجکتها (Object) آشنا بشیم 😉
به بیان ساده، آبجکت یک نوع دادهای هست که میتونه توی خودش چند نوع دیگه رو نگهداری کنه. ما توی قسمتهای قبل با نوعهای دادهای جاوااسکریپت آشنا شدیم و گفتیم که توی جاوااسکریپت ۸ نوع دادهای داریم که یکی از اونها آبجکت هست. همهٔ این نوعها به غیر از آبجکت، همزمان فقط میتونن شامل یک نوع مقدار باشن. مثلاً:
ما برای مشخصات یک کاربر مثل اسم، سن و جنسیت، ۳ متغیر مجزا ساختیم. ای کاش میتونستیم همه این مشخصات رو به صورت یکجا توی یک محفظه نگهداری میکردیم. محفظهای مثل شناسنامه که شامل اطلاعاتی میشه مثل نام و نامخانوادگی، جنسیت، تاریخ و محل تولد، نام والدین و ... .
دنیای بدون شناسنامه رو میتونین تصور کنین؟ دنیای بدون شناسنامه، مثل زبان برنامهنویسی بدون آبجکت هست!
با توجه به این توضیحات، میتونیم نتیجه بگیریم که آبجکت محفظهای برای نگهداری اطلاعات هست.
رایجترین راه ساختن آبجکتها، استفاده از براکتها {} هست:
const user = {};
توی کد بالا مقدار متغیر user یک آبجکت هست. این آبجکت خالی هست و هنوز هیچ اطلاعاتی نداره. آبجکت user باید شامل اطلاعاتی درباره کاربر باشه. مثلاً نام، سن و جنسیت. این اطلاعات رو به صورت زیر توی آبجکت تعریف میکنیم:
همونطور که میبینیم هر اطلاعاتی توی آبجکت طبق این فرمت ذخیره میشه:
key: value
به این فرمت گفته میشه key/value یا کلید/مقدار. در واقع مثل تعریف کردن متغیر و نسبت دادن مقدار به اون هست. با این تفاوت که برای نسبت دادن مقدار به کلید بجای علامت = از علامت : استفاده میکنیم. به چیزی که قبل از : قرار گرفته میگیم کلید یا key و به چیزی که روبروی : قرار گرفته میگیم مقدار یا value.
به همین دلیل به آبجکتها گفته میشه مجموعهای از اطلاعات که به صورت key/value (کلید/مقدار) ذخیره شدن.
توی آبجکت user:
کلید name مقداری برابر Mario داره
کلید age مقدار برابر عدد 6 داره
کلید gender مقداری برابر Male داره
ما میتونیم بینهایت دیگه اطلاعات به آبجکت user اضافه کنیم. اطلاعاتی که میتونن از هر نوعی (رشته، عدد و حتی یک آبجکت دیگه) باشن.
چون چنین پراپرتیهایی رو نمیتونیم با روش Dot Notation صدا بزنیم و خطا میگیریم:
const user = {
"first name": "Emily",
"first-name": "Emily",
"first.name": "Emily",
};
user.first name; // syntax error
user.first-name; // error: name is not defined
user.first.name; // error: user.first is undefined
همچنین اگه اسم پراپرتی ما یک مقدار داینامیک هست (مقداری که از قبل مشخص نیست) از همین روش استفاده میکنیم:
const user = {
name: "Mario",
age: 6,
}
const input = prompt("Enter a property name:");
alert(<<user[input]>>);
کد بالا رو اجرا کنین و توی کادر ورودی، اسم پراپرتی دلخواه رو وارد کنین تا مقدار اون نمایش داده بشه. نکتهای که باید درنظر داشته باشیم اینه که مقدار متغیر input که یک مقدار داینامیک هست و از کاربر خونده میشه، بین براکتهای خط ۸ قرار گرفته. توی این روش ما از " استفاده نکردیم:
user["input"];
که در این صورت اینطوری درنظر گرفته میشد که انگار میخوایم از آبجکت user پراپرتی با عنوان input رو فراخونی کنیم.
همچنین ما نمیتونیم از Dot Notation برای فراخونی پراپرتیها به صورت داینامیک استفاده کنیم:
const user = {
name: "Mario",
age: 6,
}
const input = prompt("Enter a property name:");
alert(<<user.input>>);
کد خط ۸ اینطوری تفسیر میشه که انگار میخوایم یک پراپرتی با عنوان input رو فراخونی کنیم و چون وجود نداره مقدار undefined به ما نشون داده میشه.
دو متغیر a و b رو در نظر بگیرید که مقدارهای رشتهای یکسانی دارن:
const a = "hello";
const b = "hello";
alert(a === b); // true
وقتی مثل خط ۴ اونها رو با هم مقایسه کردیم طبق انتظار true گرفتیم به این معنی که هر دو متغیر مقدار یکسانی دارن.
حالا دو آبجکت x و y زیر رو در نظر بگیرید که ظاهر یکسانی دارن:
const x = { name: "John" }
const y = { name: "John" }
alert(<<x === y>>); // false
با اجرای کد بالا false میگیریم به این معنی که مقایسه دو آبجکت با ظاهر کاملاً یکسان false هست.
چرا چنین اتفاقی میوفته؟ این خاصیت آبجکتها هست. هیچ آبجکتی برابر با هیچ آبجکت دیگه نیست. در واقع هر آبجکتی که توی برنامه میسازیم، یک شناسه (یا به قول معروف رفرنس) منحصر به فرد توی حافظه به اون اختصاص داده میشه و وقتی آبجکتها رو با هم مقایسه میکنیم، ظاهر اونها مورد مقایسه قرار نمیگیره؛ بلکه رفرنس اونها با هم مقایسه میشه!
پس توی مقایسهها، آبجکتها با رفرنس و هر نوع دیگه غیر از آبجکت با مقدار مقایسه میشن.
توی چه شرایطی میتونیم true بگیریم؟ 🤔
اگه طرفین مقایسه هر دو رفرنسهای یکسانی داشته باشن. این اتفاق فقط به این صورت رخ میده:
const x = { name: "John" }
>> const y = x;
alert(x === y);
نکته مهم توی خط ۲ هست. اینجا آبجکت x رو ریختیم توی متغیر جدید به اسم y. با این کار رفرنس x توی حافظه نسبت داده میشه به y، نه خود مقدار x. پس متغیر y به همون رفرنس x اشاره میکنه و بنابراین مقایسه خط ۴ به ما true برمیگردونه.
توی چنین شرایطی که دو متغیر رفرنسهای مشابهی دارن، تغییر دادن هر کدوم از آبجکتها، روی اون یکی آبجکت هم تاثیر میذاره. یعنی:
const x = { name: "John" }
const y = x;
>> y.name = "Emily";
alert(x.name); // Emily
توی خط ۴ مقدار name از آبجکت y رو تغییر دادیم. توی خط ۶ مقدار name رو داریم از آبجکت x میخونیم. با اجرا این کد میبینیم که مقدار name توی x هم تغییر کرده، هرچند ما y رو دستکاری کرده بودیم.
نکاتی که بررسی کردیم از مهمترین نکتهها توی جاوااسکریپت هست که هنگام کار با آبجکتها باید اونها رو در نظر داشته باشیم.
خب دوستان با یکی از پرکاربردترین ویژگیهای جاوااسکریپت یعنی آبجکتها آشنا شدیم و نکتههای مهمی رو بررسی کردیم که توی ادامه به کارمون میان. توی قسمت بعد با یک ویژگی دیگه از آبجکتها به اسم متد Method آشنا میشیم. روزتون خوش 😉🖐
