تخریب ساختار Destructuring در جاوا اسکریپت

چرا Destructuring وجود داره؟

چون مشکلمونو حل میکنه. یک مثال ببینیم.

این یک آبجکت ساده شامل اسم 5 نفره.

const names = {
  hamidreza: 'Hamidreza',
  cinna: 'Cinna',
  amir: 'Amir',
  pooya: 'Pooya',
  majid: 'Majid'
};

اگه ازت بخوام این اسمارو روی کنسول چاپ کنی، احتمالا اینجوری مینویسی.

console.log(names.hamidreza);
console.log(names.cinna);
console.log(names.amir);
console.log(names.pooya);
console.log(names.majid);

کار میکنه. ولی این نقطه گذاری* خیلی منزجرکنندست. چجوری بهترش کنیم؟

const hamidreza = names.hamidreza;
const cinna = names.cinna;
const amir = names.amir;
const pooya = names.pooya;
const majid = names.majid;

console.log(hamidreza);
console.log(cinna);
console.log(amir);
console.log(pooya);
console.log(majid);

خیلی بهتر شد. ولی خب هنوزم داریم همون کارو تکرار میکنیم. حالا اگه بتونیم در یک خط این متغیرهارو مقداردهی کنیم چی میشه؟

بهتر میشه مگه نه؟ اینجاست که destructuring بدردمون میخوره. میتونیم اینجوری بنویسیم:

const { hamidreza, cinna, amir, pooya, majid } = names;

console.log(hamidreza);
console.log(cinna);
console.log(amir);
console.log(pooya);
console.log(majid);

خیلی بهتر از قبل شد!

ولی خب چجوری کار میکنه؟

سادست. مشخصه های آبجکت* رو بیرون میکشیم و به متغیر انتساب میدیم. و اسم متغیر هم بصورت پیش فرض مشابه اسم مشخصه ست. میتونی اینجوری تغییرش بدی.

const { hamidreza: hamid, cinna, amir, pooya, majid } = names;

حالا destructuring برای آرایه چجوریه؟

برای آرایه چند تفاوت داریم.

میدونیم که داده آرایه با اندیس ذخیره میشه که به ترتیبه. پس، باید ترتیب رو رعایت کنیم:

const arr = ['hamidreza', 'cinna'];
const [hamidreza, cinna] = arr;

اینم میدونیم که آرایه مشخصه نداره. پس، هر اسمی که دلت بخواد میتونی انتخاب کنی.

چندتا مثال از تخریب ساختار destructuring برای آبجکت و آرایه ببینیم.

تخریب ساختار برای آرایه

• جابجا کردن متغیرها

let a = 1;
let b = 3;

[a, b] = [b, a];
console.log(a); // 3
console.log(b); // 1

• نادیده گرفتن برخی مقادیر برگشتی از تابع

function f() {
  return [1, 2, 3];
};

const [a, , b] = f();
console.log(a); // 1
console.log(b); // 3

• انتساب مقادیر پیش فرض*

let a, b;

[a=5, b=7] = [1];
console.log(a); // 1
console.log(b); // 7

تخریب ساختار برای آبجکت

• تخریب آبجکت بعنوان پارامتر تابع

این تکنیک برای props خیلی بدرد میخوره.

const hamidreza = {
  name: 'Hamidreza', age: 30
};

const statement = ({name, age}) => {
  return `My name is ${name}. I am ${age} years old.`
};
statement(hamidreza);

• تخریب ساختار تو در تو*

const profile = {
  name: 'Hamidreza',
  age: 30,
  professional: {
    profession: 'Frontend Developer'
  }
};

const {name, age, professional: {profession}} = profile;
console.log(professional); // error
console.log(profession); // Frontend Developer

• انتساب مقادیر پیش فرض

const {a = 10, b = 5} = {a: 3};

console.log(a); // 3
console.log(b); // 5

پاورقی

* نقطه گذاری = dot notation
* مشخصه های آبجکت = object properties
* انتساب مقادیر پیش فرض = default assignment
* تخریب ساختار تو در تو = nested destructuring