آبجکت‌ها | آموزش جاوااسکریپت به زبان ساده

سلام جاوااسکریپتی‌ها! موضوع آبجکت‌ها یکی از مهمترین موضوع‌ها توی جاوااسکریپت هست. احتمالاً این جمله رو شنیدین که همه چیز توی جاوااسکریپت آبجکت هست. به عبارت بهتر، ما توی جاوااسکریپت همیشه با آبجکت‌ها سر و کار داریم. این جمله‌ها اهمیت این موضوع رو نشون میده که درک آبجکت‌ها چقدر به یادگیری اصولی زبان جاوااسکریپت کمک می‌کنه. توی این قسمت‌ها می‌خوایم مفصل با آبجکت‌ها (Object) آشنا بشیم 😉

موارد زیر رو توی این قسمت یاد می‌گیریم:

• آبجکت چیه؟
• چطوری آبجکت درست کنیم؟
• پراپرتی چیه؟
• چطوری به پراپرتی‌ها دسترسی داشته باشیم؟
• چطوری به آبجکت پراپرتی اضافه کنیم؟
• چطوری یک پراپرتی رو حذف کنیم؟
• مقایسه کردن آبجکت‌ها

آبجکت چیه؟ 🤔

به بیان ساده، آبجکت یک نوع داده‌ای هست که می‌تونه توی خودش چند نوع دیگه رو نگهداری کنه. ما توی قسمت‌های قبل با نوع‌های داده‌ای جاوااسکریپت آشنا شدیم و گفتیم که توی جاوااسکریپت ۸ نوع داده‌ای داریم که یکی از اونها آبجکت هست. همهٔ این نوع‌ها به غیر از آبجکت، همزمان فقط می‌تونن شامل یک نوع مقدار باشن. مثلاً:

const user_name = "Mario";
const user_age = 6;
const user_gender = "Male";

ما برای مشخصات یک کاربر مثل اسم، سن و جنسیت، ۳ متغیر مجزا ساختیم. ای کاش می‌تونستیم همه این مشخصات رو به صورت یکجا توی یک محفظه نگهداری می‌کردیم. محفظه‌ای مثل شناسنامه که شامل اطلاعاتی میشه مثل نام و نام‌خانوادگی، جنسیت، تاریخ و محل تولد، نام والدین و ... .

دنیای بدون شناسنامه رو می‌تونین تصور کنین؟ دنیای بدون شناسنامه، مثل زبان برنامه‌نویسی بدون آبجکت هست!

با توجه به این توضیحات، می‌تونیم نتیجه بگیریم که آبجکت محفظه‌ای برای نگهداری اطلاعات هست.

چطوری آبجکت درست کنیم؟

رایج‌ترین راه ساختن آبجکت‌ها، استفاده از براکت‌ها {} هست:

const user = {};

توی کد بالا مقدار متغیر user یک آبجکت هست. این آبجکت خالی هست و هنوز هیچ اطلاعاتی نداره. آبجکت user باید شامل اطلاعاتی درباره کاربر باشه. مثلاً نام، سن و جنسیت. این اطلاعات رو به صورت زیر توی آبجکت تعریف می‌کنیم:

const user = {
  name: "Mario",
  age: 6,
  gender: "Male",
}

همونطور که می‌بینیم هر اطلاعاتی توی آبجکت طبق این فرمت ذخیره میشه:

key: value

به این فرمت گفته میشه key/value یا کلید/مقدار. در واقع مثل تعریف کردن متغیر و نسبت دادن مقدار به اون هست. با این تفاوت که برای نسبت دادن مقدار به کلید بجای علامت = از علامت : استفاده می‌کنیم. به چیزی که قبل از : قرار گرفته می‌گیم کلید یا key و به چیزی که روبروی : قرار گرفته می‌گیم مقدار یا value.

به همین دلیل به آبجکت‌ها گفته میشه مجموعه‌ای از اطلاعات که به صورت key/value (کلید/مقدار) ذخیره شدن.

توی آبجکت user:

• کلید name مقداری برابر Mario داره
• کلید age مقدار برابر عدد 6 داره
• کلید gender مقداری برابر Male داره

ما می‌تونیم بی‌نهایت دیگه اطلاعات به آبجکت user اضافه کنیم. اطلاعاتی که می‌تونن از هر نوعی (رشته، عدد و حتی یک آبجکت دیگه) باشن.

پراپرتی چیه؟

به هر جفت اطلاعات key/value توی آبجکت می‌گیم پراپرتی (Property). توی آبجکت زیر:

const user = {
  name: "Emily",
}

name: "Emily" یک پراپرتی هست. name عنوان پراپرتی و Emily مقدار اون. عنوان پراپرتی باید از نوع رشته یا عدد باشه. اما مقدار اون می‌تونه از هر نوعی باشه.

پراپرتی‌ها با علامت کاما , از هم جدا میشن:

const user = {
  name: "Emily",
  age: 6,
}

پراپرتی‌ها رو می‌تونیم توی یک خط هم بنویسیم:

const user = { name: "Emily", age: 6 }

اگه تعداد پراپرتی‌ها زیاد هستن بهتره که هر پراپرتی رو توی یک خط مجزا بنویسیم.

اگه کلیدهای ما چند کلمه‌ای هستن و یا می‌خوایم از کارکترهای خاص مثل . و - استفاده کنیم باید اونها رو با علامت " محصور کنیم:

const user = {
  "first name": "Emily",
  "first.name": "Emily",
  "first-name": "Emily",
}

اگه کلید یک کلمه ساده هست، بهتره که اونها رو بدون علامت " بنویسیم.

یک آبجکت نمی‌تونه شامل پراپرتی‌هایی با عنوان تکراری باشه:

const user = {
  name: "John",
  name: "Mario",
}

alert(user.name); // Mario

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

چطوری به پراپرتی‌ها دسترسی داشته باشیم؟

حالا وقت دسترسی به اطلاعاتی هست که توی آبجکت ذخیره کردیم. ما با ۲ روش می‌تونیم به مقدار یک پراپرتی دسترسی داشته باشیم.

۱. استفاده از نقطه یا Dot Notation:

توی این روش برای دسترسی به مقدار یک پراپرتی خاص، از نقطه . طبق فرمت زیر استفاده می‌کنیم:

object.properyName;

این نقطه بین اسم آبجکت و اسم پراپرتی مد نظرمون قرار می‌گیره. برای مثال:

const user = {
  name: "Mario",
  age: 6,
}

alert(<<user.name>>); // Mario
alert(<<user.age>>);  // 6

باید درنظر داشته باشیم که اگه یک پراپرتی رو فراخونی کنیم که توی آبجکت وجود نداره، مقدار undefined می‌گیریم.

const user = { name: "Mario" }

alert(user.age); // undefined

۲. استفاده از براکت‌های مربعی []

توی این روش از فرمت زیر برای دسترسی به مقدار یک پراپرتی خاص استفاده می‌کنیم:

object["propetyName"];

همونطور که می‌بینیم، یک جفت براکت جلوی اسم آبجکت قرار گرفته که توی اون داریم پراپرتی مد نظرمون رو فرا می‌خونیم. برای مثال:

const user = {
  name: "Mario",
  age: 6,
}

alert(<<user['name']>>); // Mario
alert(<<user['age']>>);  // 6

استفاده از این روش بیشتر برای زمانی هست که می‌خوایم پراپرتی‌هایی رو صدا بزنیم که اسم اونها شامل کارکترهای خاص مثل . و - هست. مثلاً:

const user = {
  "first name": "Emily",
  "first-name": "Emily",
  "first.name": "Emily",
};

<<user["first name"]>>;
<<user["first-name"]>>;
<<user["first.name"]>>;

چون چنین پراپرتی‌هایی رو نمی‌تونیم با روش 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 به ما نشون داده میشه.

چطوری به آبجکت پراپرتی اضافه کنیم؟

اگه آبجکتی داریم که از قبل ساخته شده و بخوایم به اون پراپرتی اضافه کنیم، می‌تونیم از روش زیر استفاده کنیم:

const user = {
  name: "Mario",
  age: 6,
}

>> user.gender = "Male";
// or
>> user['gender'] = "Male";

alert(user.gender); // Male

پراپرتی gender به آبجکت اضافه شده و به همون روش‌های قبلی قابل دسترسی هست. در واقع با همین روش هم می‌تونیم مقدار یک پراپرتی موجود رو تغییر بدیم:

const user = { name: "Mario" }
>> user.name = "Emily";

alert(user.name); // Emily

چطوری یک پراپرتی رو حذف کنیم؟

با استفاده از عملگر delete می‌تونیم این کار رو انجام بدیم:

const user = { name: "Mario" }
>> delete user.name;

alert(user.name); // 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 آشنا می‌شیم. روزتون خوش 😉🖐