مفهوم Destructuring در جاوا اسکریپت

تخریب یا Destructuring یک روش ساده و سریع برای ایجاد متغیره. مقادیر متغیرهای ایجاد شده از مقادیر داخل یک آرایه یا مشخصه های داخل یک آبجکت بدست میان. مزیت این روش خوانایی و بهره وری کد نوشته شده ست.

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

const person = {
  firstName: 'John',
  lastName: 'Smith',
  phoneNumber: 123456789,
}

بدون استفاده از Object Destructuring

بدون این روش، متغیرهارو با نوشتن نام آبجکت، گذاشتن یک نقطه بعدش، و بعد نوشتن نام مشخصه ایجاد میکنیم.

const firstName = person.firstName;
const lastName = person.lastName;
console.log(firstName);
// John
console.log(lastName);
// Smith

با استفاده از Object Destructuring

به کمک این روش ایجاد متغیرها بسادگی انجام میشه.

const { firstName, lastName } = person;
console.log(firstName);
// John
console.log(lastName);
// Smith

لازمه که بدونی با این روش بدنبال نام مشخصه هستیم. پس این مشخصه هارو در متغیرهایی با همین نام ذخیره کردیم.

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

میتونیم این روش روی آرایه هم پیاده کنیم.

بدون استفاده از Array Destructuring

const brands = ['McLaren',  'Renault', 'Ferrari', 'Honda'];
const brand = brands[0];
console.log(brand);
// McLaren

با استفاده از Array Destructuring

const brands = ['McLaren',  'Renault', 'Ferrari', 'Honda'];
const [ brand ] = brands;
console.log(brand);
// McLaren

همونطور که دیدی برداشتن آیتم اول از آرایه ساده ست، فرض کن بخوایم آیتم سوم رو برداریم. این آیتم در اندیس 2 قرار داره ولی نمیتونیم از اندیس استفاده کنیم. بهمین جهت مجبوریم دستی بشماریم و آیتم هایی که نمیخوایم رو خالی بذاریم.

const brands = ['McLaren', 'Renault', 'Ferrari', 'Honda'];
const [ , , brand ] = brands;
console.log(brand);
// Ferrari

ترکیبی از این دو روش بر روی آرایه ای از آبجکت ها

یکی از رایج ترین انواع داده در جاوا اسکریپت آرایه ای از آبجکت هاست. فرض کن با این آبجکت پیچیده سر و کار داریم:

const persons = [
  {
    firstName: 'John',
    lastName: 'Smith',
    phoneNumber: 123456789,
    accounts: {
      ing: 'NL69INGB0123456789',
      rabobank: 'NL44RABO0123456789',
      abnamro: 'NL02ABNA0123456789'
    }
  },
  {
    firstName: 'Josh',
    lastName: 'Cruz',
    phoneNumber: 987654321,
    accounts: {
      ing: 'NL71INGB0123456789',
      snsbank: 'NL12SNSB0123456789
    }
  }
]

اگه شماره حساب های ING این دو شخص رو بخوایم در دو متغیر ingJohn و ingJosh ذخیره کنیم مینویسیم:

const [
  {
    accounts: {ing: ingJohn}
  },
  {
    accounts: {ing: ingJosh}
  }
] = persons;
console.log(ingJohn);
// NL69INGB0123456789
console.log(ingJosh);
// NL71INGB0123456789