آبجکت‌ها
تابع و کلوزر را دیدید؛ منطق را می‌توانید جمع کنید. روی صفحهٔ واقعی داده هم ساختار می‌خواهد: عنوان، قیمت و موجودی یک کالا باید کنار هم باشند. آبجکت (object) همان یک مقدار است که چند تکهٔ نام‌دار را نگه می‌دارد.
آبجکت یعنی چه
آبجکت دادهٔ مرتبط را به‌صورت ویژگی (property) نگه می‌دارد. هر ویژگی یک کلید (key) دارد — همان نام — و یک مقدار (value). برای شروع معمولاً لیترال آبجکت می‌نویسید: آکولاد { } و داخلش جفت‌های کلید: مقدار. برای این قدم اول به کلاس نیاز نیست.
چهار تکه برای نگاه کردن
📊 لیترال، کلید، مقدار، و دسترسی
| تکه | نقش | نشانه برای مبتدی |
|---|---|---|
| لیترال آبجکت | همان مقدار { … } که به متغیر می‌دهید |
یک کیف از داده‌های مرتبط |
| کلید | نام ویژگی سمت چپ : |
برچسب هر تکه |
| مقدار | دادهٔ سمت راست : |
رشته، عدد، بولین، … |
| دسترسی | خواندن یا نوشتن با . یا [ ] |
چطور بعداً به یک تکه می‌رسید |
اگر این چهار تا را نشان دهید، تقریباً هر مثال اول آبجکت را می‌توانید توضیح دهید. برای خیلی‌ها غافلگیری آکولاد نیست — این است که یک متغیر حالا چند فیلد نام‌دار با خودش می‌برد.
let book = {
title: "Maps",
pages: 120
};
console.log(book);
آکولاد آبجکت را می‌سازد
book یک مقدار است. داخلش title و pages ویژگی‌اند. جفت‌ها را با ویرگول جدا می‌کنید. بعد از } آبجکت آمادهٔ استفاده است. با console.log(book) کل کیف را در کنسول می‌بینید.
let book = {
title: "Maps",
pages: 120
};
console.log(book.title);
console.log(book.pages);
نقطه یک فیلد را می‌گیرد
نام آبجکت، نقطه، بعد کلید: book.title. نتیجه همان رشتهٔ "Maps" است. برای نام ویژگیِ ثابت و آشنا، نقطه رایج‌ترین راه خواندن است. در این شکل، کلید باید شبیه شناسهٔ معتبر باشد.
let book = {
title: "Maps",
pages: 120
};
console.log(book["title"]);
console.log(book["pages"]);
براکت هم به همان فیلد می‌رسد
اینجا book["title"] همان مقدار book.title را می‌دهد. داخل براکت رشته می‌گذارید (یا عبارتی که کلید شود). وقتی کلید داخل متغیر است، یا نام سادهٔ شناسه نیست، براکت به‌کار می‌آید. برای نام‌های ثابت معمولاً نقطه خواناتر است.
let book = {
title: "Maps",
pages: 120
};
book.pages = 140;
console.log(book.pages);
بعداً هم می‌توانید ویژگی را عوض کنید
با انتساب به book.pages همان فیلد عوض می‌شود. کیف همان کیف است؛ فقط یکی از مقادیر داخلش تازه شده. دوباره بخوانید، 140 می‌بینید. درس‌های بعد افزودن و فهرست کردن ویژگی‌ها را عمیق‌تر می‌کنند — اینجا هدف یک به‌روزرسانی شفاف است.
let item = {
name: "Mug",
price: 8
};
console.log(item.name);
console.log(item.price);
فیلدهای مرتبط با هم سفر می‌کنند
name و price یک کالای فروشگاه را توصیف می‌کنند. روی یک آبجکت بودنشان بهتر از دو متغیر سراسری جداست که از هم جدا می‌افتند. وقتی item را به تابع می‌دهید یا روی صفحه می‌گذارید، هر دو فیلد با هم جابه‌جا می‌شوند.
یک فیلد آبجکت را روی صفحه نشان دهید
یک آبجکت کوچک کالا بسازید، یک ویژگی بخوانید، و همان متن را داخل پاراگراف بگذارید.
<!DOCTYPE html>
<html>
<head>
<title>objects — page</title>
</head>
<body>
<p id="label">…</p>
<script>
let item = {
name: "Lamp",
price: 25
};
let box = document.getElementById("label");
box.textContent = item.name + " — " + item.price;
</script>
</body>
</html>
پاراگراف Lamp — 25 را نشان می‌دهد. فقط name یا price آبجکت را عوض کنید، صفحه را تازه کنید و خط جدید را بخوانید. جلسهٔ بعد ویژگی‌های آبجکت را عمیق‌تر می‌کند — رفتار کلیدها و کار روزمره با آن‌ها.
گام‌های تمرین
- با لیترال یک آبجکت دو‌ویژگی بسازید.
- یک ویژگی را با نقطه در کنسول چاپ کنید.
- همان ویژگی را با براکت و کلید رشته‌ای چاپ کنید.
- یک ویژگی را عوض کنید و مقدار تازه را ببینید.
- یک
itemباnameوpriceبسازید؛ هر دو فیلد را چاپ کنید. - در دموی HTML فقط مقادیر آبجکت را عوض کنید، تازه کنید، پاراگراف را بخوانید.
اشتباه‌های رایج
- آبجکت را مثل فهرست شماره‌دار دیدن (آن بیشتر شبیه آرایه است؛ بعداً در کورس)
- فراموش کردن نقل‌قول دور مقدار رشته —
title: Mapsبدون نقل‌قول غلط است - قاطی کردن کلید و مقدار وقتی لیترال را توضیح می‌دهید
- انتظار متد،
this، یا ابزار عمیق ویژگی در همین صفحهٔ اول — آن‌ها بعد می‌آیند - برای هر فیلد یک متغیر سراسری جدا ساختن به‌جای یک آبجکت
خلاصه
- آبجکت مقادیر مرتبط را به‌صورت ویژگی نام‌دار جمع می‌کند
- لیترال شکل
{ کلید: مقدار، … }دارد - نماد نقطه (
obj.key) ویژگی شناخته‌شده را می‌خواند - براکت (
obj["key"]) با کلید رشته‌ای می‌خواند - با انتساب به ویژگی می‌توانید بعداً به‌روزش کنید
- فیلدهای مرتبط وقتی آبجکت جابه‌جا می‌شود با هم می‌مانند
- به‌روزرسانی صفحه می‌تواند از فیلدهای آبجکت رشته بسازد
- بعدی: ویژگی‌های آبجکت — کار عمیق‌تر با کلیدها
🧠 دانش خود را بیازمایید
دانش خود را بیازمایید
خود را با این آزمون تعاملی به چالش بکشید و ببینید موضوع را چقدر خوب درک کرده‌اید
📝 دستورالعمل‌ها
- هر سوال را با دقت بخوانید
- بهترین پاسخ را برای هر سوال انتخاب کنید
- می‌توانید آزمون را هر چند بار که می‌خواهید تکرار کنید
- پیشرفت شما در بالا نمایش داده می‌شود