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

در مقاله قبل با Arrayها در جاوااسکریپت آشنا شدیم و یاد گرفتیم چگونه چند مقدار را در یک ساختار واحد ذخیره و مدیریت کنیم. اما در پروژه‌های واقعی، اطلاعات معمولاً فقط یک لیست ساده از مقادیر نیستند. برای مثال، یک کاربر می‌تواند نام، نام خانوادگی، سن، ایمیل و شماره تلفن داشته باشد. یک محصول می‌تواند نام، قیمت، موجودی و دسته‌بندی داشته باشد.

برای مدیریت چنین اطلاعاتی، Object در جاوااسکریپت یکی از مهم‌ترین ساختارهای داده است. Object به ما اجازه می‌دهد اطلاعات مرتبط را به شکل Property و Value در کنار یکدیگر قرار دهیم.

در این مقاله از پایه با Object در جاوااسکریپت آشنا می‌شویم و نحوه ساخت Object، دسترسی به Propertyها، اضافه و حذف کردن اطلاعات، تغییر مقادیر، متدها، Objectهای تو در تو، پیمایش Object و چند متد مهم مانند Object.keys()، Object.values() و Object.entries() را یاد می‌گیریم.

Object در جاوااسکریپت چیست؟

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

برای مثال، اطلاعات یک کاربر را در نظر بگیرید:

let user = {
    firstName: "Ali",
    lastName: "Ahmadi",
    age: 25,
    email: "ali@example.com"
};

در این Object چهار Property داریم:

firstName → Ali
lastName  → Ahmadi
age       → 25
email     → ali@example.com

هر Property معمولاً از دو بخش تشکیل می‌شود:

Property → Value

مثلاً:

age: 25

در اینجا:

• age نام Property است.

• 25 مقدار Value است.

چرا از Object استفاده می‌کنیم؟

Objectها برای نمایش موجودیت‌هایی که چند ویژگی مرتبط دارند بسیار مناسب هستند.

برای مثال یک کاربر:

let user = {
    name: "Ali",
    age: 25,
    city: "Istanbul"
};

یک محصول:

let product = {
    name: "Laptop",
    price: 50000,
    stock: 10
};

یک خودرو:

let car = {
    brand: "Toyota",
    model: "Corolla",
    year: 2025
};

در پروژه‌های واقعی، Objectها برای نمایش داده‌هایی مانند User، Product، Order، Company، Advertisement و بسیاری از موجودیت‌های دیگر بسیار پرکاربرد هستند.

ساخت یک Object

ساده‌ترین روش ایجاد Object استفاده از {} است:

let person = {};

این یک Object خالی ایجاد می‌کند.

می‌توانیم هنگام ایجاد Object اطلاعات نیز قرار دهیم:

let person = {
    name: "Sara",
    age: 22
};

Property چیست؟

در Object هر اطلاعات با یک نام مشخص ذخیره می‌شود.

مثلاً:

let user = {
    name: "Ali",
    age: 25,
    city: "Istanbul"
};

Propertyهای این Object عبارت‌اند از:

name
age
city

و مقدار آن‌ها:

Ali
25
Istanbul

دسترسی به Property با Dot Notation

یکی از ساده‌ترین روش‌های دسترسی به Property استفاده از Dot Notation است.

مثلاً:

let user = {
    name: "Ali",
    age: 25,
    city: "Istanbul"
};

console.log(user.name);

خروجی:

Ali

برای سن:

console.log(user.age);

خروجی:

25

و برای شهر:

console.log(user.city);

خروجی:

Istanbul

دسترسی به Property با Bracket Notation

روش دیگری برای دسترسی به Property استفاده از براکت [] است.

console.log(user["name"]);

خروجی:

Ali

برای سن:

console.log(user["age"]);

Dot Notation یا Bracket Notation؟

هر دو روش معتبر هستند.

Dot Notation:

user.name

Bracket Notation:

user["name"]

در حالت‌های ساده، Dot Notation خواناتر است.

اما Bracket Notation یک قابلیت مهم دارد: می‌توانیم نام Property را داخل یک متغیر قرار دهیم.

مثلاً:

let propertyName = "age";

console.log(user[propertyName]);

خروجی:

25

در این حالت استفاده از:

user.propertyName

به دنبال Propertyای با نام propertyName می‌گردد، نه مقداری که داخل متغیر قرار دارد.

تغییر مقدار یک Property

Propertyهای Object قابل تغییر هستند.

مثلاً:

let user = {
    name: "Ali",
    age: 25
};

user.age = 26;

console.log(user.age);

خروجی:

26

می‌توانیم مقدار String را نیز تغییر دهیم:

user.name = "Reza";

اضافه کردن Property جدید

اگر Property موردنظر وجود نداشته باشد، می‌توانیم آن را اضافه کنیم.

مثلاً:

let user = {
    name: "Ali",
    age: 25
};

user.city = "Istanbul";

console.log(user);

خروجی:

{
    name: "Ali",
    age: 25,
    city: "Istanbul"
}

یا با Bracket Notation:

user["email"] = "ali@example.com";

حذف Property با delete

برای حذف یک Property می‌توانیم از delete استفاده کنیم.

let user = {
    name: "Ali",
    age: 25,
    city: "Istanbul"
};

delete user.city;

console.log(user);

حالا city دیگر در Object وجود ندارد.

بررسی وجود Property

برای بررسی وجود یک Property می‌توانیم از in استفاده کنیم.

let user = {
    name: "Ali",
    age: 25
};

console.log("name" in user);

خروجی:

true

اما:

console.log("email" in user);

خروجی:

false

مقدار undefined در Object

اگر بخواهیم به Propertyای که وجود ندارد دسترسی پیدا کنیم:

let user = {
    name: "Ali"
};

console.log(user.age);

خروجی:

undefined

این موضوع با وجود داشتن Property و مقدار undefined یکسان نیست.

مثلاً:

let user = {
    name: "Ali",
    age: undefined
};

در اینجا Property age وجود دارد، اما مقدار آن undefined است.

Object می‌تواند انواع مختلف داده داشته باشد

Propertyهای یک Object می‌توانند انواع مختلف داده را نگهداری کنند.

let user = {
    name: "Ali",
    age: 25,
    active: true,
    score: 18.5
};

حتی می‌توانیم Array داشته باشیم:

let user = {
    name: "Ali",
    skills: ["HTML", "CSS", "جاوااسکریپت"]
};

یا Object دیگری:

let user = {
    name: "Ali",
    address: {
        city: "Istanbul",
        country: "Türkiye"
    }
};

این ساختارها در پروژه‌های واقعی بسیار رایج هستند.

Object تو در تو یا Nested Object

وقتی یک Object داخل Object دیگری قرار می‌گیرد، با یک Nested Object روبه‌رو هستیم.

مثال:

let user = {
    name: "Ali",
    address: {
        city: "Istanbul",
        country: "Türkiye"
    }
};

برای دسترسی به city:

console.log(user.address.city);

خروجی:

Istanbul

برای country:

console.log(user.address.country);

Object شامل Array

برعکس حالت قبل، یک Property نیز می‌تواند شامل Array باشد.

let user = {
    name: "Ali",
    skills: ["HTML", "CSS", "جاوااسکریپت"]
};

برای دسترسی به اولین مهارت:

console.log(user.skills[0]);

خروجی:

HTML

برای مهارت دوم:

console.log(user.skills[1]);

Object می‌تواند Function داشته باشد

یک Property از Object می‌تواند یک تابع نیز باشد.

در این حالت معمولاً به آن Method گفته می‌شود.

مثال:

let user = {
    name: "Ali",

    sayHello: function() {
        console.log("Hello");
    }
};

برای اجرای Method:

user.sayHello();

خروجی:

Hello

Method چیست؟

به‌صورت ساده، وقتی یک Function به‌عنوان Property یک Object قرار می‌گیرد، معمولاً آن را Method می‌نامیم.

مثال:

let user = {
    name: "Ali",

    introduce: function() {
        console.log("My name is " + this.name);
    }
};

اجرای آن:

user.introduce();

خروجی:

My name is Ali

کلمه کلیدی this

در Methodهای Object، یکی از مفاهیم مهم this است.

مثلاً:

let user = {
    name: "Ali",

    introduce: function() {
        console.log(this.name);
    }
};

user.introduce();

در این مثال:

this.name

به Property name مربوط به همان Object اشاره می‌کند.

یعنی:

this
 ↓
user
 ↓
name

مفهوم this در جاوااسکریپت دارای جزئیات بیشتری است که در بخش مفاهیم پیشرفته‌تر دوره با دقت بیشتری بررسی خواهد شد.

روش کوتاه‌تر برای نوشتن Method

در Objectهای جاوااسکریپت می‌توانیم Method را به شکل کوتاه‌تر نیز بنویسیم:

let user = {
    name: "Ali",

    introduce() {
        console.log("My name is " + this.name);
    }
};

این روش در جاوااسکریپت مدرن بسیار رایج است.

Object و const

یکی از نکات مهم این است که وقتی Object را با const تعریف می‌کنیم، همچنان می‌توانیم Propertyهای آن را تغییر دهیم.

مثلاً:

const user = {
    name: "Ali",
    age: 25
};

user.age = 26;

console.log(user.age);

این کد صحیح است.

اما نمی‌توانیم خود Object را به یک Object کاملاً جدید اختصاص دهیم:

const user = {
    name: "Ali"
};

user = {
    name: "Sara"
};

این کار باعث خطا می‌شود.

به زبان ساده:

const Object
    ↓
Properties can change
    ↓
Reference cannot be reassigned

Object و Array چه تفاوتی دارند؟

Array و Object هر دو برای نگهداری داده استفاده می‌شوند، اما کاربرد آن‌ها متفاوت است.

Array:

let colors = ["Red", "Green", "Blue"];

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

Object:

let user = {
    name: "Ali",
    age: 25,
    city: "Istanbul"
};

برای نمایش یک موجودیت با ویژگی‌های مختلف مناسب است.

مقایسه:

البته در پروژه‌های واقعی این دو ساختار معمولاً در کنار یکدیگر استفاده می‌شوند.

Array از Objectها

یکی از ساختارهای بسیار مهم در برنامه‌نویسی، Array از Objectها است.

مثلاً:

let users = [
    {
        name: "Ali",
        age: 25
    },
    {
        name: "Sara",
        age: 22
    },
    {
        name: "Reza",
        age: 30
    }
];

در اینجا یک Array داریم که هر عنصر آن یک Object است.

برای دسترسی به اولین کاربر:

console.log(users[0]);

برای نام اولین کاربر:

console.log(users[0].name);

خروجی:

Ali

برای سن کاربر دوم:

console.log(users[1].age);

خروجی:

22

این ساختار در پروژه‌های واقعی بسیار مهم است، زیرا داده‌هایی که از API دریافت می‌کنیم اغلب به شکل Array of Objects هستند.

پیمایش Array از Objectها

می‌توانیم با حلقه for اطلاعات کاربران را نمایش دهیم:

let users = [
    {
        name: "Ali",
        age: 25
    },
    {
        name: "Sara",
        age: 22
    },
    {
        name: "Reza",
        age: 30
    }
];

for (let i = 0; i < users.length; i++) {
    console.log(users[i].name);
}

خروجی:

Ali
Sara
Reza

یا با for...of:

for (let user of users) {
    console.log(user.name);
}

این ساختار در ادامه دوره اهمیت بسیار زیادی خواهد داشت.

Object.keys()

متد Object.keys() نام Propertyهای Object را در قالب یک Array برمی‌گرداند.

مثال:

let user = {
    name: "Ali",
    age: 25,
    city: "Istanbul"
};

console.log(Object.keys(user));

خروجی:

["name", "age", "city"]

بنابراین:

Object.keys(user)

یک Array شامل نام Propertyها برمی‌گرداند.

Object.values()

متد Object.values() مقدار Propertyها را برمی‌گرداند.

let user = {
    name: "Ali",
    age: 25,
    city: "Istanbul"
};

console.log(Object.values(user));

خروجی:

["Ali", 25, "Istanbul"]

Object.entries()

متد Object.entries() Property و Value را به‌صورت مجموعه‌ای از Arrayها برمی‌گرداند.

let user = {
    name: "Ali",
    age: 25
};

console.log(Object.entries(user));

خروجی مفهومی:

[
    ["name", "Ali"],
    ["age", 25]
]

این متد در کار با Objectها و داده‌های API بسیار کاربردی است.

پیمایش Propertyهای Object

می‌توانیم از Object.keys() و حلقه استفاده کنیم:

let user = {
    name: "Ali",
    age: 25,
    city: "Istanbul"
};

let keys = Object.keys(user);

for (let key of keys) {
    console.log(key);
}

خروجی:

name
age
city

دسترسی همزمان به Key و Value

با Object.entries() می‌توانیم هم نام Property و هم مقدار آن را دریافت کنیم:

let user = {
    name: "Ali",
    age: 25,
    city: "Istanbul"
};

for (let [key, value] of Object.entries(user)) {
    console.log(key, value);
}

خروجی:

name Ali
age 25
city Istanbul

ساختار:

Object
  ↓
Object.entries()
  ↓
[key, value]
  ↓
for...of

بررسی Property با hasOwnProperty

روش دیگری برای بررسی اینکه یک Object دارای Property مشخصی است یا خیر، استفاده از hasOwnProperty() است.

let user = {
    name: "Ali",
    age: 25
};

console.log(user.hasOwnProperty("name"));

خروجی:

true

اما:

console.log(user.hasOwnProperty("email"));

خروجی:

false

برای نیازهای ساده، in نیز می‌تواند استفاده شود:

"name" in user

Object و JSON

Objectهای جاوااسکریپت شباهت زیادی به ساختار JSON دارند.

مثلاً Object:

let user = {
    name: "Ali",
    age: 25
};

ساختار JSON نیز شبیه آن است:

{
    "name": "Ali",
    "age": 25
}

اما Object جاوااسکریپت و JSON دقیقاً یک چیز نیستند.

JSON یک فرمت متنی استاندارد برای انتقال و ذخیره داده است و در ارتباط با APIها کاربرد بسیار زیادی دارد.

در مقاله‌های آینده بخش اختصاصی برای JSON و ذخیره‌سازی اطلاعات خواهیم داشت.

مثال کاربردی: Object محصول

فرض کنید یک فروشگاه اینترنتی داریم:

let product = {
    name: "Laptop",
    price: 50000000,
    stock: 8,
    available: true
};

نمایش اطلاعات:

console.log(product.name);
console.log(product.price);
console.log(product.stock);

تغییر موجودی:

product.stock = 7;

اضافه کردن دسته‌بندی:

product.category = "Electronics";

مثال کاربردی: Object کاربر

let user = {
    firstName: "Ali",
    lastName: "Ahmadi",
    age: 25,
    email: "ali@example.com",
    active: true
};

نمایش نام کامل:

console.log(user.firstName + " " + user.lastName);

خروجی:

Ali Ahmadi

بررسی وضعیت کاربر:

if (user.active) {
    console.log("User is active");
}

مثال کاربردی: تابع داخل Object

می‌توانیم اطلاعات و رفتار مرتبط را در یک Object قرار دهیم:

let calculator = {

    add(a, b) {
        return a + b;
    },

    subtract(a, b) {
        return a - b;
    }
};

console.log(calculator.add(10, 5));
console.log(calculator.subtract(10, 5));

خروجی:

15
5

این مفهوم مقدمه‌ای برای برنامه‌نویسی شیءگرا (OOP) است که در مقاله بعدی به‌صورت عمیق‌تر بررسی خواهد شد.

اشتباهات رایج در کار با Objectها

۱. اشتباه گرفتن Array و Object

Array:

let users = ["Ali", "Sara"];

Object:

let user = {
    name: "Ali",
    age: 25
};

Array بیشتر برای مجموعه‌ای از عناصر و Object برای ویژگی‌های یک موجودیت استفاده می‌شود.

۲. اشتباه در دسترسی به Property

اگر Object داشته باشیم:

let user = {
    name: "Ali"
};

دسترسی صحیح

user.name

یا:

user["name"]

۳. استفاده از Property اشتباه

console.log(user.username);

اگر username وجود نداشته باشد، نتیجه:

undefined

خواهد بود.

۴. فراموش کردن نقطه در Nested Object

اگر داشته باشیم:

let user = {
    address: {
        city: "Istanbul"
    }
};

دسترسی صحیح:

user.address.city

۵. اشتباه گرفتن Object.keys با Object.values

Object.keys(user);

نام Propertyها را می‌دهد.

Object.values(user);

مقدار Propertyها را می‌دهد.

نکات مهم برای کار با Object

هنگام استفاده از Objectها این موارد را به خاطر بسپارید:

• Object اطلاعات مرتبط را در قالب Property و Value نگهداری می‌کند.

• برای دسترسی ساده از Dot Notation استفاده کنید.

• برای Propertyهای پویا از Bracket Notation استفاده کنید.

• با length برای Object کار نمی‌کنیم؛ برای شمارش Propertyها می‌توان از Object.keys().length استفاده کرد.

• push() و pop() مربوط به Array هستند، نه Object معمولی.

• Object می‌تواند شامل Array یا Object دیگری باشد.

• Function داخل Object معمولاً Method نامیده می‌شود.

• this در Methodها برای دسترسی به Object جاری کاربرد دارد.

• Object.keys() نام Propertyها را برمی‌گرداند.

• Object.values() مقادیر را برمی‌گرداند.

• Object.entries() جفت‌های Key و Value را برمی‌گرداند.

• Array از Objectها یکی از ساختارهای بسیار مهم در پروژه‌های واقعی است.

تمرین‌های عملی

تمرین ۱

یک Object به نام person ایجاد کنید که شامل موارد زیر باشد:

• نام

• نام خانوادگی

• سن

• شهر

سپس هر Property را در Console نمایش دهید.

تمرین ۲

Object زیر را ایجاد کنید:

let product = {
    name: "Phone",
    price: 20000000,
    stock: 5
};

سپس:

1. قیمت را تغییر دهید.

2. موجودی را تغییر دهید.

3. یک Property به نام category اضافه کنید.

4. Object نهایی را نمایش دهید.

تمرین ۳

Object زیر را ایجاد کنید:

let user = {
    name: "Ali",
    age: 25,
    city: "Istanbul"
};

با استفاده از Object.keys() تمام Propertyها را نمایش دهید.

تمرین ۴

با استفاده از Object.values() تمام Valueهای Object را نمایش دهید.

تمرین ۵

Object زیر را ایجاد کنید:

let user = {
    name: "Ali",
    address: {
        city: "Istanbul",
        country: "Türkiye"
    }
};

سپس مقدار city را نمایش دهید.

تمرین ۶

یک Array از سه Object کاربر ایجاد کنید:

let users = [
    { name: "Ali", age: 25 },
    { name: "Sara", age: 22 },
    { name: "Reza", age: 30 }
];

با استفاده از یک حلقه، نام و سن تمام کاربران را نمایش دهید.

تمرین چالشی

یک Object برای یک محصول ایجاد کنید که شامل:

• name

• price

• stock

• category

• available

باشد.

سپس یک Method به نام getInfo ایجاد کنید که اطلاعات محصول را نمایش دهد.

نمونه ساختار:

let product = {
    name: "Laptop",
    price: 50000000,
    stock: 10,
    category: "Electronics",
    available: true,

    getInfo() {
        // Your code
    }
};

product.getInfo();

سعی کنید داخل Method از this استفاده کنید.

جمع‌بندی

در این مقاله با Objectها در جاوااسکریپت آشنا شدیم و یاد گرفتیم چگونه اطلاعات مرتبط را در یک ساختار منظم ذخیره کنیم.

مهم‌ترین مفاهیمی که یاد گرفتیم:

• Object چیست.

• Property و Value چه هستند.

• چگونه Object ایجاد کنیم.

• چگونه با Dot Notation به Property دسترسی داشته باشیم.

• چگونه از Bracket Notation استفاده کنیم.

• چگونه Property را تغییر دهیم.

• چگونه Property جدید اضافه کنیم.

• چگونه با delete یک Property را حذف کنیم.

• چگونه وجود یک Property را بررسی کنیم.

• Objectهای تو در تو یا Nested Object چیستند.

• چگونه Array را داخل Object قرار دهیم.

• Method چیست.

• this چه کاربردی دارد.

• چگونه Array از Objectها ایجاد کنیم.

• چگونه Objectها را پیمایش کنیم.

• Object.keys()، Object.values() و Object.entries() چه کاربردی دارند.

• تفاوت کلی Object و Array چیست.

• ارتباط Objectها با JSON چیست.

Objectها یکی از پایه‌های اصلی جاوااسکریپت و برنامه‌نویسی مدرن هستند. داده‌هایی که از API دریافت می‌کنید، اطلاعات کاربران، محصولات، سفارش‌ها و بسیاری از موجودیت‌های نرم‌افزاری معمولاً به شکل Object یا مجموعه‌ای از Objectها نمایش داده می‌شوند.