Destructuring (ساختارشکنی)

تو جاوااسکریپت، وقتی با آبجکت‌ها یا آرایه‌های بزرگ کار می‌کنیم، معمولاً لازمه چند مقدار رو استخراج کنیم. بدون Destructuring، این کار باعث میشه کد طولانی و تکراری باشه:

const user = {
  name: "John",
  age: 30,
  email: "john@example.com",
}

const name = user.name
const age = user.age
const email = user.email

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

اینجا Destructuring میاد کمکمون..

Destructuring برای آبجکت‌ها

با Destructuring می‌تونیم چند مقدار رو همزمان استخراج کنیم:

const { name, age, email } = user

console.log(name)  // John
console.log(age)   // 30
console.log(email) // john@example.com

به همین راحتی، هر متغیری که داخل {} میذاریم، برابر با پراپرتی متناظرش تو آبجکت میشه و کد کوتاه‌تر و خوندنش راحت‌تر میشه.

مقدار پیش‌فرض (Default Values)

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

با Destructuring می‌تونیم مقدار پیش‌فرض بدیم:

const { name, age = 25, role = "user" } = user

console.log(age)  // 30
console.log(role) // "user"

اگه role داخل آبجکت نباشه، خودش به طور خودکار مقدار "user" می‌گیره. این خیلی کمک می‌کنه که از خطاهای undefined جلوگیری کنیم.

تغییر نام متغیرها (Renaming)

گاهی لازمه اسم متغیرها با نام پراپرتی فرق داشته باشه:

const { name: username, email: userEmail } = user

console.log(username)  // John
console.log(userEmail) // john@example.com

حالا username و userEmail مستقل از نام اصلی پراپرتی هستن و می‌تونیم راحت‌تر ازشون استفاده کنیم.

Destructuring در آرایه‌ها

Destructuring برای آرایه‌ها هم خیلی کاربردیه و ترتیب عناصر مهمه:

const colors = ["red", "green", "blue"]

const [firstColor, secondColor] = colors

console.log(firstColor)  // red
console.log(secondColor) // green

همچنین می‌تونیم مقادیر باقی‌مونده رو با Rest Syntax جمع کنیم:

const [first, ...rest] = colors

console.log(first) // red
console.log(rest)  // ["green", "blue"]

Destructuring تو پارامترهای فانکشن

می‌تونیم از Destructuring تو پارامترهای فانکشن استفاده کنیم تا مستقیم مقادیر مورد نیازمون رو از هر آبجکتی که به فانکشن پاس داده میشه بگیریم:

function displayUser({ name, email }) {
  console.log(name)
  console.log(email)
}

const user1 = { name: "John", email: "john@example.com" }
const user2 = { name: "Alice", email: "alice@example.com" }

displayUser(user1)
displayUser(user2)

مزایای این روش:

• مشخص می‌کنه فانکشن دقیقاً به چه داده‌هایی نیاز داره

• دیگه لازم نیست چند بار user.name یا user.email رو تکرار کنیم

Nested Destructuring

وقتی آبجکت‌ها یا آرایه‌ها تو در تو هستن، می‌تونیم با Nested Destructuring همه مقادیر رو یکجا استخراج کنیم:

const response = {
  data: {
    user: {
      name: "John",
      address: {
        city: "New York",
        zip: "10001"
      }
    }
  }
}

const {
  data: {
    user: {
      name,
      address: { city, zip }
    }
  }
} = response

console.log(name) // John
console.log(city) // New York
console.log(zip)  // 10001

اگه مرحله به مرحله نگاه کنیم:

• response یه آبجکت بزرگه

• داخلش یه پراپرتی به اسم data داریم که خودش یه آبجکت هست

• داخل data یه user داریم

• داخل user یه name و یه address داریم

• address هم خودش یه آبجکت با city و zip هست

اگر بخوایم دستی همه رو استخراج کنیم، معمولاً می‌نوشتیم:

const name = response.data.user.name
const city = response.data.user.address.city
const zip = response.data.user.address.zip

که درست ولی طولانی و تکراریه.

با Nested Destructuring همه چیز تمیز و قابل خوندنه و یکجا انجام میشه:

const {
  data: {
    user: {
      name,
      address: { city, zip }
    }
  }
} = response

• data: یعنی از response.data شروع کن

• user: یعنی از data.user ادامه بده

• name و address: { city, zip } یعنی از user مقدار name و از user.address مقادیر city و zip رو استخراج کن

حالا ما سه متغیر داریم که می‌تونیم مستقیم استفاده کنیم:

console.log(name) // John
console.log(city) // New York
console.log(zip)  // 10001

جمع‌بندی

Destructuring یه روش ساده و کاربردیه که:

• استخراج مقادیر از آبجکت‌ها و آرایه‌ها رو کوتاه‌تر و خوندنش رو هم راحت‌تر می‌کنه

• امکان مقدار پیش‌فرض و تغییر نام متغیرها رو میده

• کار با فانکشن‌ها و داده‌های پیچیده رو آسون می‌کنه

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