Destructuring و Spread در Object

استخراج و ترکیب Propertyها با Destructuring و Spread در Object

مقدمه

در فصل قبل، Destructuring و Spread را برای آرایه بررسی کردیم. همین دو ابزار برای شیء هم وجود دارند، اما با یک تفاوت مهم: در آرایه، ترتیب تعیین‌کننده بود؛ در شیء، نام Property تعیین‌کننده است.

Destructuring پایه در Object

به‌جای این روش:

let user = { name: "علی", age: 25, city: "تهران" };

let name = user.name;
let age = user.age;

می‌توان از Destructuring استفاده کرد:

let user = { name: "علی", age: 25, city: "تهران" };

let { name, age } = user;

console.log(name);
console.log(age);

تحلیل کد

در این الگو، جاوااسکریپت بر اساس نام Property عمل می‌کند، نه ترتیب آن‌ها. یعنی { name, age } دقیقاً به دنبال Property هایی با همین نام در user می‌گردد؛ حتی اگر ترتیب نوشتن آن‌ها را عوض کنیم، نتیجه تغییری نمی‌کند:

let { age, name } = user; // ترتیب فرقی نمی‌کند
console.log(name); // علی
console.log(age);  // 25

این دقیقاً نقطه‌ی مقابل Destructuring آرایه است که در آن ترتیب اهمیت داشت.

تغییر نام متغیر هنگام Destructuring

گاهی می‌خواهیم نام Property را در متغیری با نام دیگر ذخیره کنیم:

let user = { name: "علی", age: 25 };

let { name: fullName } = user;

console.log(fullName); // علی
// console.log(name); // خطا: name تعریف نشده است

در این الگو، name: fullName یعنی «Property با نام name را بگیر و آن را در متغیری به نام fullName ذخیره کن». پس از این کار، دیگر متغیری با نام name وجود ندارد.

مقدار پیش‌فرض در Destructuring Object

let user = { name: "علی" };

let { name, age = 18 } = user;

console.log(name); // علی
console.log(age);  // 18 — چون age در user وجود نداشت

می‌توان تغییر نام و مقدار پیش‌فرض را هم‌زمان استفاده کرد:

let { age: userAge = 18 } = user;
console.log(userAge); // 18

Destructuring تودرتو (Nested)

اگر شیء شامل شیء دیگری باشد، می‌توان مستقیماً از Propertyهای داخلی هم Destructuring کرد:

let user = {
  name: "علی",
  address: {
    city: "تهران",
    zip: "12345"
  }
};

let { name, address: { city, zip } } = user;

console.log(name);
console.log(city);
console.log(zip);

تحلیل رفتار جاوااسکریپت

در این مثال، address: { city, zip } به این معنا نیست که مقداری با نام address ساخته می‌شود؛ بلکه جاوااسکریپت وارد شیء address می‌شود و از داخل آن، مستقیماً city و zip را استخراج می‌کند. اگر بخواهیم خودِ شیء address را هم به‌عنوان یک متغیر مستقل نگه داریم، باید آن را جداگانه در الگو ذکر کنیم.

Rest در Destructuring Object

مشابه چیزی که در آرایه دیدیم، می‌توان باقی‌مانده‌ی Property ها را با ... در یک شیء جدید جمع کرد:

let user = { name: "علی", age: 25, city: "تهران", country: "ایران" };

let { name, ...rest } = user;

console.log(name); // علی
console.log(rest); // { age: 25, city: "تهران", country: "ایران" }

Spread Operator در Object

Spread Operator برای باز کردن Property های یک شیء در دل شیء دیگر استفاده می‌شود؛ دقیقاً جایگزین مدرن‌تری برای بسیاری از کاربردهای Object.assign که در درس قبل دیدیم:

let defaults = { theme: "روشن", language: "فارسی" };
let userPrefs = { theme: "تیره" };

let settings = { ...defaults, ...userPrefs };
console.log(settings); // { theme: "تیره", language: "فارسی" }

قانون ترتیب در Spread مهم است: اگر چند شیء Property مشترکی داشته باشند، مقدار آخرین شیئی که در Spread ذکر شده، در نتیجه‌ی نهایی باقی می‌ماند.

افزودن یا بازنویسی Property هنگام Spread

let user = { name: "علی", age: 25 };

let updatedUser = { ...user, age: 26, city: "تهران" };

console.log(updatedUser); // { name: "علی", age: 26, city: "تهران" }
console.log(user);        // { name: "علی", age: 25 } — بدون تغییر

این الگو یکی از رایج‌ترین روش‌ها برای ساخت نسخه‌ای به‌روزشده از یک شیء، بدون تغییر شیء اصلی، در کدنویسی مدرن جاوااسکریپت است.

جدول مقایسه‌ی Destructuring آرایه و Object

ویژگی	آرایه	Object
ملاک تطبیق	ترتیب عناصر	نام Property
نماد الگو	[]	{}
تغییر نام متغیر	ندارد (فقط نام دلخواه)	دارد (key: newName)

ارتباط با سایر مفاهیم

Destructuring Object در فصل‌های بعدی، به‌ویژه هنگام دریافت پارامترهای تابع (مثل استخراج مستقیم Property از یک شیء تنظیمات) و همچنین در کار با نتیجه‌ی توابع API که شیء برمی‌گردانند، بسیار پرکاربرد خواهد بود. Spread Operator نیز پایه‌ی الگوی رایج به‌روزرسانی غیرمخرب (Immutable Update) شیء‌ها در برنامه‌نویسی مدرن جاوااسکریپت است.

جمع‌بندی

Destructuring در Object بر اساس نام Property عمل می‌کند، نه ترتیب؛ و امکاناتی مثل تغییر نام متغیر، مقدار پیش‌فرض و Rest را نیز پشتیبانی می‌کند. Spread Operator برای ترکیب یا ساخت نسخه‌ی به‌روزشده‌ی یک شیء بدون تغییر نسخه‌ی اصلی استفاده می‌شود و ترتیب نوشتن منابع در آن، در صورت وجود Property های مشترک، تعیین‌کننده‌ی مقدار نهایی است.