دیس ترکچرینگ (تقسیم ساختاری) (ES6 Destructuring)

دیس ترکچرینگ در ES6 یعنی از داخل آرایه یا آبجکت، خیلی راحت مقدارها را جدا کنیم. این کار مخصوصا در ری اکت، کد را تمیزتر و کوتاه تر می کند.

دیس ترکچرینگ در ری اکت یعنی چه؟

دیس ترکچرینگ (Destructuring) یک قابلیت جاوااسکریپت است. با آن می توانیم مقدارها را از آرایه ها و آبجکت ها جدا کنیم و مستقیم داخل متغیرها بریزیم.

در ری اکت، دیس ترکچرینگ خیلی کنار props، هوک ها و state استفاده می شود. چون دسترسی به داده ها را کوتاه می کند و کد راحت تر خوانده می شود.

نکته: دیس ترکچرینگ فقط یک میان بُر ظاهری است. منطق برنامه عوض نمی شود؛ فقط نوشتن و خواندن ساده می شود.

دیس ترکچرینگ آرایه ها در ES6

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

const vehicles = ['mustang', 'f-150', 'expedition'];

// old way
const car = vehicles[0];
const truck = vehicles[1];
const suv = vehicles[2];

// You can now access each variable separately:
document.getElementById('demo').innerHTML = truck;

مشاهده در ادیتور

اینجا سه بار از vehicles[...] استفاده کردیم. هم کد طولانی شده، هم اگر ترتیب عوض شود باید حسابی حواسمان باشد.

حالا همین کار را با دیس ترکچرینگ در ES6 می نویسیم. انگار از آرایه، سه متغیر جدا می کنیم.

const vehicles = ['mustang', 'f-150', 'expedition'];

const [car, truck, suv] = vehicles;

// You can now access each variable separately:
document.getElementById('demo').innerHTML = truck;

مشاهده در ادیتور

نکته: در دیس ترکچرینگ آرایه، ترتیب خیلی مهم است. خانه اول آرایه، داخل متغیر اول می رود و همین طور به ترتیب.

اگر بعضی خانه ها را نخواهیم، می توانیم آن ها را رد کنیم. فقط جای آن ها ویرگول می گذاریم.

const vehicles = ['mustang', 'f-150', 'expedition'];

const [car, , suv] = vehicles;

مشاهده در ادیتور

اینجا فقط car و suv را گرفتیم و truck را جا انداختیم. این روش وقتی مفید است که وسط آرایه چیزهایی داریم که لازم نیست.

دیس ترکچرینگ و خروجی تابع

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

function dateInfo(dat) {
  const d = dat.getDate();
  const m = dat.getMonth() + 1;
  const y = dat.getFullYear();

  return [d, m, y];
}

const [date, month, year] = dateInfo(new Date());

مشاهده در ادیتور

تابع dateInfo یک آرایه برمی گرداند. با یک خط، روز و ماه و سال را در سه متغیر جدا می گیریم. شبیه این است که معلم، سه نمره را در سه خانه دفترت بنویسد.

دیس ترکچرینگ آبجکت ها در ES6

حالا سراغ آبجکت (Object) برویم. آبجکت مثل یک کارت مشخصات است؛ داخلش فیلدهایی مثل firstName و age داریم. با دیس ترکچرینگ می توانیم این فیلدها را خیلی راحت بیرون بکشیم.

const person = {
  firstName: "John",
  lastName: "Doe",
  age: 50
};

// Destructuring
let { firstName, lastName, age } = person;

// You can now access each variable separately:
document.getElementById("demo").innerHTML = firstName;

مشاهده در ادیتور

تفاوت مهم آبجکت با آرایه این است که در آبجکت، ترتیب اهمیت ندارد. اسم property مهم است.

const person = {
  firstName: "John",
  lastName: "Doe",
  age: 50
};

// Destructuring
let { lastName, age, firstName } = person;

مشاهده در ادیتور

اینجا ترتیب lastName و age و firstName عوض شده؛ اما چون اسم ها همان است، مقدار درست وارد هر متغیر می شود.

انتخاب فیلدها و مقدار پیش فرض

گاهی فقط یک فیلد از آبجکت را لازم داریم. مشکلی نیست؛ همان را جدا می کنیم.

const person = {
  firstName: "John",
  lastName: "Doe",
  age: 50
};

// Destructuring
let { firstName } = person;

مشاهده در ادیتور

اگر property ممکن است وجود نداشته باشد، می توانیم برایش مقدار پیش فرض بگذاریم. مثل این است که اگر دانش آموز شهرش را ننوشته، خودت بنویسی «تهران».

const person = {
  firstName: "John",
  lastName: "Doe",
  age: 50
};

// Destructuring
let { firstName, lastName, age, country = "Norway" } = person;

مشاهده در ادیتور

اگر country در person نبود، مقدار آن Norway می شود. اگر بود، همان مقدار موجود استفاده می شود.

دیس ترکچرینگ تو در تو (Nested Destructuring)

گاهی داخل آبجکت، یک آبجکت دیگر داریم. مثلا person خودش یک فیلد car دارد. می توانیم هم زمان هم فیلد اصلی را بگیریم، هم فیلدهای car را.

const person = {
  firstName: "John",
  lastName: "Doe",
  age: 50,
  car: {
    brand: 'Ford',
    model: 'Mustang'
  }
};

// Destructuring
let { firstName, car: { brand, model } } = person;

let message = `My name is ${firstName}, and I drive a ${brand} ${model}.`;

مشاهده در ادیتور

اینجا متغیر car جدا ساخته نمی شود. مستقیم brand و model را از داخل car بیرون کشیدیم. در نهایت یک پیام متنی message ساختیم.

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

مشاهده مطلب Destructuring در جاوااسکریپت

کاربرد دیس ترکچرینگ در ES6 و ری اکت

در ری اکت، دیس ترکچرینگ تقریبا همه جا دیده می شود؛ از props تا هوک ها. این بخش ها را اگر خوب یاد بگیری، خواندن پروژه های ری اکتی خیلی راحت تر می شود.

دیس ترکچرینگ props در کامپوننت ها

وقتی یک کامپوننت props می گیرد، به جای props.name می توانیم مستقیم name را جدا کنیم. این روش ظاهر کد را مرتب تر می کند.

// Using destructuring:
function Greeting({ name, age }) {
  return (
    <h1>
      Hello, {name}! You are {age} years old.
    </h1>
  );
}

مشاهده در ادیتور

بدون دیس ترکچرینگ، باید همیشه قبل از نام فیلد، props بگذاریم. این کار کد را شلوغ تر می کند.

// NOT using destructuring:
function Greeting(props) {
  return (
    <h1>
      Hello, {props.name}! You are {props.age} years old.
    </h1>
  );
}

مشاهده در ادیتور

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

مثال کامل دیس ترکچرینگ props در ری اکت

حالا یک مثال کامل با createRoot ببینیم. این جا هم در ورودی Greeting از دیس ترکچرینگ استفاده شده است.

import { createRoot } from 'react-dom/client';

function Greeting({ name, age }) {
  return (
    <h1>
      Hello, {name}! You are {age} years old.
    </h1>
  );
}

createRoot(document.getElementById('root')).render(
  <Greeting name="John" age={25} />
);

مشاهده در ادیتور

مثل این است که معلم به جای گفتن «دانش آموز.نام»، مستقیما بگوید «نام». مسیر دسترسی کوتاه می شود؛ اما همان اطلاعات است.

دیس ترکچرینگ در useState

هوک useState یک آرایه برمی گرداند. خانه اول مقدار state است و خانه دوم تابعی برای تغییر آن. این جا دیس ترکچرینگ حسابی به کار می آید.

import { createRoot, useState } from 'react-dom/client';

function Counter() {
  // Destructuring the array returned by useState
  const [count, setCount] = useState(0);

  return (
    <button
      onClick={() => {
        setCount(count + 1);
      }}
    >
      Count: {count}
    </button>
  );
}

createRoot(document.getElementById('root')).render(
  <Counter />
);

مشاهده در ادیتور

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

تمرین گام به گام دیس ترکچرینگ (تقسیم ساختاری)

این چند قدم ساده را انجام بده تا دیس ترکچرینگ در ES6 برایت جا بیفتد.

1. یک آرایه از سه رنگ دلخواه بساز و آن را colors بنام.
2. با دیس ترکچرینگ، سه متغیر color1 و color2 و color3 از آن بگیر.
3. یک آبجکت student با فیلدهای name و grade و city بساز.
4. با دیس ترکچرینگ، فقط name و grade را از student جدا کن.
5. یک کامپوننت ساده ری اکت بنویس که props آن { name, grade } باشد.

برای مرور بخش های قبلی ES6 می توانی صفحه متد map روی آرایه ها (ES6 Array map()) و همین صفحه دیس ترکچرینگ در ES6 را کنار هم بخوانی.

جمع بندی سریع

• دیس ترکچرینگ در ES6 مقدارها را راحت از آرایه و آبجکت جدا می کند.
• در آرایه ها ترتیب مهم است؛ در آبجکت ها نام property مهم است.
• می توانی بعضی فیلدها را انتخاب کنی و برای بعضی مقدار پیش فرض بگذاری.
• در ری اکت، دیس ترکچرینگ برای props و useState خیلی استفاده می شود.
• دیس ترکچرینگ کد را کوتاه تر، تمیزتر و خواناتر می کند؛ منطق برنامه عوض نمی شود.