همه چیز درباره object destructuring در جاوااسکریپت

سلام فرقی نمیکنه که من و شما react کار کنیم یا vue, angular و یا vanilla js. مهم اینه که ما هرروز داریم با جاوااسکریپت کار میکنیم و لازمه که توی موارد پایه، خودمون رو قوی نشون بدیم. (البته فقط قوی نشون دادن کافی نیست و واقعا باید قوی باشیم)

چیزی که هرروز داریم توی برنامه هامون ازش استفاده میکنیم داده ها هستن و اگر داده ای وجود نداشته باشه عملا برنامه ما هم به هیچ دردی نمیخوره پس داده ها هستن که به برنامه ما ماهیت میدن.

حالا این وسط برای اینکه ما برنامه نویس ها راحت تر باشیم میایم و با نوع های مختلفی داده هامون رو مدیریت میکنیم تا شلخه و درهم برهم نباشن. مثل ذخیره کردن اطلاعات ی کاربر توی یک object مثل نمونه زیر:

const user = {
  name: 'Chris',
  age: 33,
};

ذخیره اطلاعات توی object ها یکی از کاراییه که ما شاید روزانه چندین بار انجام بدیم و بهمون هم کمک میکنه که خیلی تر و تمیز تر اطلاعاتمون رو ذخیره کنیم و توی جای خودش ازش استفاده کنیم. مثل مثال زیر که مثلا من میخوام نام کاربر رو توی ی متغیر وارد کنم:

let name = user.name;

حالا شاید بگین خب تا اینجا چه مشکلی مگه داریم اینجا.باید بگم که هیچی

شما میتونید از همین روش تا آخر عمرتون استفاده کنید و به هیچ مشکلی هم برنخورین اما میخوام توی این مطلب ی ویژگی کوچولو از ES6 رو بهتون بگم تا یکم تروتمیز ترش کنیم. اصلا هم سخت نیست(قول میدم)

object destructuring در جاوااسکریپت

توسعه دهنده های js توی es6 به این نتیجه رسیدین که ی ویژگی destructuring رو به js اضافه کنن و این تنها مختص به object ها نیست و شما میتونید از این عملیات توی آرایه ها هم استفاده کنید.

خب برای انجام این عملیات ما فقط میایم و بجای اینکه با نقطه (.) به مقادیر ابجکت دسترسی پیدا کنیم و بعد اون هارو داخل یک متغیر بریزیم میایم و همین اول کار به صورت زیر عمل میکنیم:

const { name, age } = user;

خب بریم سراغ توضیح کد بالا. توی کد بالا ما اومدیم و بعد از ثابت const یک آکولاد ({}) باز و بسته کردیم و داخلش مقدار name و age رو قرار دادیم و بعد یک مساوی و آبجکتمون.

حالا توی کد بالا انگار که مرورگر اول ی متغیر با نام name ایجاد کنه و بعد بره و توی آبجکس ما شروع کنه به گشتن و ببینه آیا مقداری با اسم name هست یا ن؟ اگر مقداری وجود داشته باشه اون مقدار رو داخل اون متغیر که ساخته قرار میده و میره سراغ پارامتر بعدی که age هست. دوباره ی متغیر ایجاد میکنه و شروع میکنه داخل object گشتن و اگر مقدار age رو پیدا کرد اون رو داخل متغیری که ساخته بود میریزه. به همین راحتی.

حالا شاید این سوال پیش بیاد که اگه اون مقدار رو توی اون object نبود چی؟ تکلیف متغیری که ساخته چی میشه؟ خطا میده؟ جواب همه این سوال ها اینه که اگه اون مقداری رو که نوشتیم نباشه، مقدار undefined رو داخل متغیر قرار میده.

حالا برای اینکه بخوایم تستش کنیم کدمون رو میتون مقداری name,age رو مثل زیر log بگیریم:

const { name, age } = user;

console.log(name);
// Chris

console.log(age);
// ۳۳

به همین راحتی شما برای اولین بار از object destructuring در جاوااسکریپت استفاده کردین.

خب نکنه فکر کردین به همینجا ختم میشه؟ ن. چون با این قابلیت میشه کار های خفن تر دیگه ای هم انجام داد که اینجا میخوام چند تا از کاربرد های دیگه object destructuring در جاوااسکریپت رو بهتون بگم تا دیگه حسابی بترکونید.

استفاده از عملگر rest (…)

خب شاید قبلا این عملگر رو دیده باشید و بدونید چیکار میکنه و شایدم ندونید که اصلا مهم نیست چون میخوام الان بگم چیکار میکنه.

خب توی مثال قبل دیدیم که ما هر اسمی رو که بین دوتا { } قرار بدیم، موتور مرورگر ها میره و ی متغیر میسازه و اون مقدار و پیدا میکنه و و و حالا این عملگر rest چی میگه؟ این عملگر میاد اول اون مقادیری که قبلش (یا بعدش) قرار دادیم رو بررسی میکنه و به غیر از اون ها میاد ی متغیر میسازه و به غیر از مقادیر قبل (و بعدش) اون ها رو به صورت ی آبجکت جدید توی متغیر قرار میده. فک کنم مثال زیر رو ببینید کامل متوجه بشین:

const user = {
  name: 'Chris',
  age: 33,
  username: 'DailyDevTips',
};

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

console.log(name);
// Chris

console.log(rest);
// { age: 33, username: 'DailyDevTips' }

اوکی؟ گرفتین چی شد؟ اگه نگرفتی توی کامنت ها بپرس تا بیشتر توضیح بدم

object های تو در تو یا به اصلاح nested object properties

خب ما همیشه با object های خیلی ساده طرف نیستیم و ممکنه object هایی که باهاشون کار میکنیم چندین لایه تودرتو داشته باشن. اما نگران نباشید چون مثل مثال زیر شما میتونید توی این موارد هم از ویژگی destructuring استفاده کنید.

const user = {
  name: 'Chris',
  age: 33,
  username: 'DailyDevTips',
  address: {
    country: 'South Africa',
    postalCode: '7700',
  },
};

const {
  address: { country },
} = user;

console.log(country);
// South Africa

به همین سادگی. اما ی نکته رو باید راجب این مورد بگم که حواستون باشه اون مقدار address گولتون نزنه چون ما اون مقدار رو استخراج نکردیم و فقط صرفا ازش به عنوان آدرس دهی استفاده کردیم. عملا ما گفتیم که برو به فیلد address و از داخلش مقدار country رو استخراج کن پس اگه شما مقدار address رو اینجا log بگیرید با مقدار ReferenceError: address is not defined رو به رو میشین که طبیعیه. اگه بخواین توی این مثال به مقدار address هم دسترسی داشته باشید باید مثل نمونه زیر عمل کنید و ی مقدار address رو هم اضافه کنید.

const {
  address: { country },
  address,
} = user;

console.log(address);
// { country: 'South Africa', postalCode: '7700' }

console.log(country);
// South Africa

تغییر نام متغیر ساخته شده در object destructuring جاوااسکریپت

خب بلاخره ی موقع هایی هم میشه که ما توی کد هامون مثلا به جایی خوردین که ی متغییری داریم که مقدارش address و الان هم میخوایم از توی object مقدار address رو فراخوانی کنیم و استفاده کنیم. خب توی این حالت دچار تداخل میشه و باید یکیش رو با ی اسم دیگه ذخیره کنیم. توی این حالت خب عقلانی نیست که بیایم اون آدرس قبلیه رو بریزیم توی ی متغیر دیگه و این حرفا. بهتره که بیایم حالا که میخوایم از object مقدار address رو فراخوانی کنیم اسمش رو هم عوض کنیم. اما چطوری؟ با عملگر ( : ) مثل مثال زیر:

const { address: shippingAddress } = user;

console.log(shippingAddress);
// { country: 'South Africa', postalCode: '7700' }

اینطوری میتونی اسم متغیری که میخوایم مقدار استخراج شده داخلش قرار بگیره رو عوض کنی.

مقدار پیشفرض در object destructuring جاوااسکریپت

بالاتر گفتم که اگه شما مقداری رو فراخوانی کرده باشید که وجود نداشته باشه، مقدار undefined داخل متغیر قرار میگیره اما شاید شما دلتون بخواد که در صورت موجود نبودن بیاین و ی مقدار پیشفرضی رو ست بکنید که اگر به هر دلیلی اون مقدار داخل آبجکت نبود بیاد و مقدار پیشفرض شما قرار داده بشه. برای اینکار هم میتونید از عملگر ( = ) استفاده کنید مثل نمونه زیر:

const user = {
  name: 'Yaatree',
};
const { age = 25 } = user;

console.log(age);
// ۲۵

استفاده از object destructuring در حلقه های جاوااسکریپت

خب object destructuring به ما کمک میکنه که توی پیمایش آبجکت ها هم کارمون راحت تر بشه. به صورتی که دیگه از حلقه های عادی که میایم براش step تعریف میکردیم راحت بشیم. ی نگاهی به مثال زیر بندازین:

const users = [
  {
    name: 'Chris',
    age: 33,
  },
  {
    name: 'Yaatree',
    age: 2,
  },
];

for (let { name, age } of users) {
  console.log(`User: ${name} is ${age} years old ?`);
}

// 'User: Chris is 33 years old ?'
// 'User: Yaatree is 2 years old ?'

به همین راحتی (دیگه نبینم حلقه هایی که روی object ها هستن رو جور دیگه ای بنویسیدا)

Dynamic name destructuring

شرمنده آخری رو ترجمه نکردم چون واقعا اینو نمیدونسم چی بنویسم که حل مطلب ادا بشه حالا خلاصه توضیح که بدم متوجه میشین.

خلاصه اینه که ما ی جاهایی ممکنه ی ابزار ها و توابعی رو توسعه بدیم که قرار نیست با ی آبجکت خاص با مقادیر خاص کار کنه و قراره کاملا پویا باشه. بنابراین باید بشه موارد پویایی رو از آبجکت ما استخراج کنه. برای همین ما نمیتونیم مستقیم مثلا بیاین و بگیم مقدار name رو استخراج کن. باید این name رو جوری هندل کنیم که ی توسعه دهنده دیگه که میخواد از پکیج یا تابعی که ما نوشتیم استفاده کنه اون بسته به نیازش این مقدار رو وارد کنه. ی نگا به مثال زیر بندازین:

const getProperty = 'name'; // or 'age'

const { [getProperty]: returnValue } = user;

console.log(returnValue);
// Chris

به همین راحتی حالا هر مقداری رو که به جای name قرار بدین از آبجکت استخراج میشه.

سخن پایانی

بازم مثل همیشه با پایان مقاله رسیدیم و امیدوارم این مقاله هم مفید بوده باشه براتون و چیزی به دانشتون اضافه کرده باشه. ممنونم بابت مطالعه این مطلب. موفق و پیروز

منبع: daily-dev-tips