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

یکی از قابلیت‌های بسیار کاربردی جاوا اسکریپت، مفهومی به نام object destructuring با هدف استخراج propertyها از آبجکت و تخصیص یک متغیر برای آنهاست. حتی بهتر! این قابلیت می‌تواند چندین property را با یک دستور استخراج کند، به propertyها در یک آبجکت تودرتو دسترسی دارد و می‌تواند در صورت عدم وجود property یک مقدار پیش‌فرض را تعریف کند. در این مقاله یاد می‌گیریم چطور از این قابلیت در جاوا اسکریپت استفاده کنیم.

چرا به object destructuring نیاز داریم

فرض کنید قصد دارید چند propertyرا از درون یک آبجکت استخراج کنید، تا قبل از ES6 شما به کدی مشابه کد زیر احتیاج داشتید:

let hero = {
    name: 'Batman',
    realName: 'Bruce Wayne'
  };

  const heroName = hero.name;
  const heroRealName = hero.realName;

  console.log(heroName);     // => 'Batman',
  console.log(heroName); // => 'Bruce Wayne'

اینجا قسمتی است که فایده object destructuring را درک می‌کنیم؛ شما می‌توانید یک property را بخوانید و مقدار آن را درون متغیری بریزید بدون اینکه اسم property را دوبار تکرار کنید. علاوه بر آن، میتوان چندین property از یک آبجکت را تنها با یک دستور استخراج کرد!

اجازه دهید کد بالا را بازنویسی کنیم تا این بار به وسیله object destructuring به propertyها دسترسی داشته باشیم:

const hero = {
    name: 'Batman',
    realName: 'Bruce Wayne'
  };

  const { name, realName } = hero;

  console.log(name);     // => 'Batman',
  console.log(realName); // => 'Bruce Wayne'

در کد بالا، قسمت const { name, realName } = hero یک انتصاب به شیوه object destructuring است. این دستور، متغیرهایی با نام‌های name و realName ساخته، سپس مقادیر propertyهای hero.name و hero.realName را درون آن ها می‌ریزد. واضح است که استفاده از روش دوم راحت تر است زیرا کد کوتاه‌تر نوشته می‌شود و از تکرار اسم propertyها جلوگیری می‌شود.

استخراج چندین property

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

const { identifier } = expression;

که identifier اسم property مورد نظر و expression یک آبجکت است. ( قابلیت destructuring بر روی آرایه‌ها نیز کار می‌کند اما در مقاله تنها بر آبجکت‌ها تمرکز شده است.) بعد از انجام destructuring، مقدار property درون متغیر ریخته خواهد شد.

برای استخراج چندین property، نام تمامی propertyهای مورد نظر خود را نوشته و آن‌ها را با کاما ( , ) از یکدیگر جدا کنید:

const { identifier1, identifier2, ..., identifierN } = expression;

این همان کاریست که درباره مثال اول مقاله انجام دادیم.

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

اگر property مورد نظر درون آبجکت وجود نداشته باشد، متغیر مقدار undefined خواهد گرفت.

  const hero = {
    name: 'Batman',
    realName: 'Bruce Wayne'
  };

  const { enemies } = hero;

  console.log(enemies);     // => undefined

خوشبختانه میتوان مقدار پیش‌فرضی برای این مواقع تعریف کرد تا در صورت عدم وجود property، متغیر با آن مقداردهی شود.

  const { identifier = defaultValue } = expression;

بر این اساس متغیر identifier در صورت عدم وجود property مورد نظر، با مقدار defaultValue مقداردهی می‌شود.

کد مشابه این دستور بدین صورت خواهد بود:

const identifier = expression.identifier === undefined ?  defaultValue : expression.identifier;

حالا مثال این قسمت را با این تفاسیر بازنویسی می‌کنیم:

  const hero = {
    name: 'Batman',
    realName: 'Bruce Wayne'
  };

  const { enemies = ['Joker'] } = hero;

  console.log(enemies);     // => ['Joker']

اسامی مستعار یا aliases

اگر بخواهید متغیرهایی با نام های مختلف نسبت به propertyها بسازید، می‌توانید از قابلیت اسامی مستعارِ object destructuring در جاوا اسکریپت استفاده کنید.

  const { identifier: aliasIdentifier } = expression;

در کد زیر یک مثال از این قابلیت می‌بینیم:

  const hero = {
    name: 'Batman',
    realName: 'Bruce Wayne'
  };

  const { realName: secretName } = hero;

  console.log(secretName); // => 'Bruce Wayne'

استخراج property از آبجکت‌های تودرتو

در مثال قبل، با یک آبجکت ساده طرف بودیم اما می‌دانیم که آبجکت ها می‌توانند تو در تو یا به اصطلاح nested باشند. در چنین مواردی شما همچنان می‌توانید عمل object destructuring را انجام دهید و به propertyهایی که در عمق بیشتری از آبجکت قرار دارند دسترسی داشته باشید. سینتکس مانند زیر خواهد بود:

const { nestedObjectProp: { identifier } } = expression;

که در آن nestedObjectProp نام property حاوی یک آبجکت و Identifier نام property مورد نظر برای دسترسی است. مهم نیست چقدر سطح تو در تویی زیاد باشد، اگر قصد دارید property را از عمق زیادی استخراج کنید تنها باید مراحل مثال بالا را به صورت زیر تکرار کنید:

  const { propA: { propB: { propC: { .... } } } } = object;

برای درک بیشتر به مثال زیر توجه کنید:

  const hero = {
    name: 'Batman',
    realName: 'Bruce Wayne',
    address: {
      city: 'Gotham'
    }
  };

  const { address: { city } } = hero;
  console.log(city); // => 'Gotham'

استخراج باقیمانده‌ی Object

فرض کنید یک آبجکت شامل تعدادی فیلد دارید. می‌خواهید یک property از آن را استخراج کنید و همچنین به propertyهای باقیمانده هم دسترسی داشته باشید. برای این کار میتوان به سادگی از عملگر (...) استفاده کرد.

  const user = {
    name: 'Chris Richard',
    age: 33,
    username: 'Crichard33',
    website: 'sokanacedemy.com'
  };
  
  const { name, ...rest } = user;
  
  console.log(name);  // Chris
  
  console.log(rest);   // { age: 33, username: 'Crichard33', website: 'sokanacedemy.com' }

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

استخراج به صورت داینامیک

در یک سناریو ما تنها در زمان اجرا متغیری که می‌خواهیم استخراج کنیم را می‌دانیم! فرض کنید کاربر روی دکمه‌ا‌ی کلیک می‌کند که با کلیک بر روی آن یک property بسته به شرایط، لازم است از درون آبجکت استخراج شود. این کار را می‌توان به صورت زیر انجام داد:

  const user = {
    name: 'Chris Richard',
    age: 33,
    username: 'Crichard33',
    website: 'sokanacedemy.com'
  };
  
  const getProperty = 'name';

  const { [getProperty]: returnValue } = user;

  console.log(returnValue);  // Chris Richard

استخراج درون یک حلقه

تمامی مثال های بالا درباره یک آبجکت بودند اما در بیشتر مواقع ما با آرایه‌ای از آبجکت‌ها روبرو هستیم.

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

ما این امکان را داریم که بر روی آبجکت‌های درون آرایه پیمایش کنیم و property مورد نظر خود را استخراج کنیم.

  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'

استخراج از یک تابع

حالا ما یک تابع داریم که آبجکتی را برمی‌گرداند.

  const getProduct = () => {
    return {
      id: 1,
      name: 'Macbook',
    };
  };

اگر آن را به صورت عادی فراخوانی کنیم نتیجه بدین صورت خواهد بود:

  const product = getProduct();
  console.log(product); // { id: 1, name: 'Macbook' }

اما ما تنها به id نیاز داریم. به کمک object destructuring در جاوا اسکریپت می‌توانیم به آن دسترسی داشته باشیم.

  const { id } = getProduct();
  console.log(id);  // 1

جمع‌بندی

object destructuring در جاوا اسکریپت، یک قابلیت قدرتمند است که به وسیله آن می‌توانیم propertyهای موردنظر را از درون آبجکت استخراج کرده و متغیرهایی را به آن ها اختصاص دهیم. استفاده از این ویژگی منجر به تولید کدهایی با خوانایی بیشتر و کوتاه‌تر خواهد شد. در این مقاله سعی بر این بود تا به زبان ساده و مقدماتی با این ویژگی مفید آشنا شوید. امیدوارم از مطالعه این مقاله لذت برده باشید.