مقدمه

یکی از قابلیت‌های جذاب و مدرن جاوااسکریپت، سینتکس Destructuring Assignment است که از ES6 اضافه شد. با این سینتکس می‌توانید به راحتی عناصر یک آرایه یا پراپرتی‌های یک شیء را در یک خط به متغیرهای مستقل اختصاص دهید. این روش باعث خوانایی بیشتر، کوتاه‌تر شدن کدها و سادگی کار با داده‌های پیچیده می‌شود.

Destructuring برای آرایه‌ها

فرض کنید آرایه‌ای از اسامی دارید و می‌خواهید هر اسم را به یک متغیر جداگانه اختصاص دهید. با استفاده از Destructuring این کار بسیار ساده است. با Destructuring می‌توانید عناصر یک آرایه را در یک خط به چند متغیر مستقل اختصاص دهید. ترتیب متغیرها مهم است و به ترتیب عناصر آرایه مقداردهی می‌شوند. مثال زیر را ببینید.

Copy Icon JAVASCRIPT
let arr = ["Ali", "Sara", "Niloofar"];
let [first, second, third] = arr;
console.log(first); // "Ali"
console.log(third); // "Niloofar"

می‌توانید برخی عناصر را هم جا بیندازید و فقط آن‌هایی که لازم دارید را دریافت کنید.

Destructuring برای شیء

همین مفهوم برای شیءها نیز وجود دارد؛ با این تفاوت که نام متغیر باید با نام پراپرتی یکی باشد (یا می‌توانید نام دلخواه انتخاب کنید). این سینتکس کدهایی که داده‌های JSON یا پاسخ API را تجزیه می‌کنند، بسیار ساده‌تر و قابل فهم‌تر می‌کند.

Copy Icon JAVASCRIPT
let user = { name: "Ali", age: 25 };
let {name, age} = user;
console.log(name); // "Ali"

تعیین نام جدید برای متغیر

اگر نام متغیر شما با نام پراپرتی یکی نباشد، می‌توانید در سینتکس Destructuring نام جدید بدهید:

Copy Icon JAVASCRIPT
let {name: userName, age: userAge} = user;
console.log(userName, userAge); // "Ali" 25

قابلیت‌های پیشرفته Destructuring

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

Copy Icon JAVASCRIPT
let arr = [1];
let [a = 5, b = 10] = arr;
console.log(a, b); // 1 10
let [first, ...rest] = [1, 2, 3];
console.log(rest); // [2, 3]

این سینتکس‌ها کدنویسی شما را بسیار مختصر و حرفه‌ای می‌کنند.

Destructuring به‌خصوص هنگام کار با توابعی که چند مقدار برمی‌گردانند یا دریافت آرگومان‌های تو در تو بسیار مفید است. با این سینتکس می‌توانید کدهای کوتاه و قابل نگهداری بنویسید و خطاهای ناشی از اشتباه در ترتیب یا نام متغیرها را کاهش دهید.

Destructuring Assignment از ابزارهای کلیدی جاوااسکریپت مدرن است. با آن می‌توانید داده‌های پیچیده را به روشی سریع و خوانا به متغیرها تخصیص دهید و کار با آرایه و شیء را لذت‌بخش‌تر و حرفه‌ای‌تر کنید.