78- آموزش جاوااسکریپت | آموزش Destructuring در (ES6)

قابلیت Destructuring که در ES6 معرفی شد، روشی بسیار منعطف و ساده برای استخراج داده‌ها از آرایه‌ها (Arrays) و اشیا (Objects) و انتساب آن‌ها به متغیرهاست. اگر با فریم‌ورک‌هایی مثل React کار کرده باشید یا از ماژول‌های جاوااسکریپت استفاده کرده باشید، قطعاً با این مفهوم برخورد داشته‌اید.

در این آموزش، نحوه استفاده از Destructuring را در سناریوهای مختلف بررسی می‌کنیم.

---

۱. Destructuring در آرایه‌ها

در ساده‌ترین حالت، می‌توانیم مقادیر یک آرایه را مستقیماً به متغیرهای مجزا اختصاص دهیم.

انتساب ساده

let a, b;
[a, b] = [100, 200];

console.log(a); // 100
console.log(b); // 200

استفاده از Rest Pattern (الگوی باقی‌مانده)

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

[a, b, ...rest] = [100, 200, 300, 400, 500];

console.log(a);    // 100
console.log(b);    // 200
console.log(rest); // [300, 400, 500]

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

این قابلیت برای توابعی که یک آرایه برمی‌گردانند بسیار کاربردی است:

function getPeople() {
  return ['John', 'Beth', 'Mike'];
}

const [person1, person2, person3] = getPeople();

console.log(person1, person2, person3); // John Beth Mike

---

۲. Destructuring در آبجکت‌ها

این روش در پروژه‌های مدرن و هنگام کار با APIها بسیار رایج‌تر و مفیدتر است. برخلاف آرایه‌ها که بر اساس ترتیب (Index) کار می‌کنند، در آبجکت‌ها استخراج بر اساس نام کلید (Key) انجام می‌شود.

روش قدیمی (ES5)

const person = {
  name: 'John Doe',
  age: 32,
  city: 'Miami',
  gender: 'Male'
};

// جدا کردن متغیرها به صورت تک‌تک
const name = person.name;
const age = person.age;
const city = person.city;

روش جدید (ES6 Destructuring)

در این روش کد بسیار تمیزتر و خواناتر می‌شود:

const { name, age, city, sayHello } = {
  name: 'John Doe',
  age: 32,
  city: 'Miami',
  sayHello: function() {
    console.log('Hello');
  }
};

console.log(name, age, city); // John Doe 32 Miami
sayHello(); // Hello

استفاده از Rest Pattern در آبجکت‌ها

مشابه آرایه‌ها، اینجا هم می‌توانیم بقیه ویژگی‌های آبجکت را در یک متغیر جداگانه ذخیره کنیم:

const { a, b, ...rest } = { a: 100, b: 200, c: 300, d: 400 };

console.log(a, b);   // 100 200
console.log(rest);  // { c: 300, d: 400 }

---

چرا از Destructuring استفاده می‌کنیم؟

1. کدنویسی تمیزتر: از تکرار نام آبجکت (مثلاً person.name) جلوگیری می‌کند.
2. مدیریت بهتر داده‌ها: در ماژول‌ها و فریم‌ورک‌هایی مثل React، برای دریافت Props یا خروجی هوک‌ها (مانند useState) ضروری است.
3. انعطاف‌پذیری: به‌راحتی می‌توانیم فقط داده‌هایی را که نیاز داریم استخراج کنیم.

---

جمع‌بندی

Destructuring یکی از قدرتمندترین ابزارهای ES6 برای مدیریت داده‌هاست. یادگیری این مفهوم به شما کمک می‌کند تا کدهای حرفه‌ای‌تر و خواناتری بنویسید، مخصوصاً زمانی که شروع به کار با ماژول‌ها و فریم‌ورک‌های مدرن می‌کنید.