Objects Destructuring

💡 الفكرة:

تُستخدم لتفكيك خصائص كائن معين إلى متغيرات مستقلة.

🔹 الصيغة العامة:

const { property1, property2 } = object;
JavaScript

✅ لماذا نستخدم Destructuring؟
لتقليل الكود.
لسهولة قراءة البيانات.
لكتابة دوال مرنة.
لتفكيك استجابات APIs أو نتائج من دوال.

🟢 أمثلة:
1. التفكيك الأساسي:
const person = {
  name: 'Ali',
  age: 30,
  country: 'Egypt'
};

const { name, age } = person;

console.log(name); // Ali
console.log(age);  // 30
JavaScript
const user = { name: 'Yasin', age: 25 };
const { name, age } = user;
console.log(name); // Yasin
console.log(age);  // 25
JavaScript

الشرح: نأخذ الخصائص name و age من الكائن مباشرة ونخزنهم في متغيرات بنفس الاسم.

const car = { brand: 'Toyota', model: 'Corolla' };
const { brand, model } = car;
console.log(brand); // Toyota
console.log(model); // Corolla
JavaScript

2- تغيير اسم المتغير أثناء التفكيك:(Renaming Variables)

const user = {
  username: 'admin',
  password: '1234'
};

const { username: userName, password: pass } = user;

console.log(userName); // admin
console.log(pass);     // 1234
JavaScript
const user = { name: 'Ali' };
const { name: userName } = user;
console.log(userName); // Ali
JavaScript

الشرح: أخذنا name وسميناه userName بدلًا من تخزينه في متغير بنفس الاسم.

const settings = { theme: 'dark' };
const { theme: currentTheme } = settings;
console.log(currentTheme
JavaScript

3- استخدام قيمة افتراضية:(Default Values)

const settings = {
  theme: 'dark'
};

const { theme, fontSize = '16px' } = settings;

console.log(theme);    // dark
console.log(fontSize); // 16px (لأنه غير موجود في الكائن)
JavaScript
const user = { name: 'Sara' };
const { age = 18 } = user;
console.log(age); // 18
JavaScript

الشرح: الخاصية age غير موجودة، فتم تعيين القيمة الافتراضية 18.

const config = { mode: 'auto' };
const { speed = 'medium', mode } = config;
console.log(speed); // medium
console.log(mode);  // auto
JavaScript

4- تفكيك كائن داخل كائن (Nested Object Destructuring):

const student = {
  name: 'Sara',
  address: {
    city: 'Cairo',
    zip: '12345'
  }
};

const {
  address: { city, zip }
} = student;

console.log(city); // Cairo
console.log(zip);  // 12345
JavaScript

⚠️ ملاحظة: لا يوجد متغير address في المثال الأخير، لأنه لم يتم تفكيكه إلى متغير مستقل، فقط خصائصه.

5. استخدام Destructuring في دوال:(Nested Destructuring)
📌 مع الكائن:
function printUser({ name, age }) {
  console.log(`Name: ${name}, Age: ${age}`);
}

printUser({ name: 'Omar', age: 25 });
JavaScript
const person = {
  name: 'Yasin',
  address: {
    city: 'Cairo',
    zip: 12345
  }
};

const { address: { city, zip } } = person;
console.log(city); // Cairo
console.log(zip);  // 12345
JavaScript
const company = {
  name: 'CloudSoft',
  contact: {
    phone: '0123456789',
    email: '[email protected]'
  }
};

const { contact: { email } } = company;
console.log(email); // [email protected]
JavaScript

📌 مع المصفوفة:

function printScores([math, science]) {
  console.log(`Math: ${math}, Science: ${science}`);
}

printScores([90, 85]);
JavaScript

✅ ثانيًا: Nested Destructuring للمصفوفات والكائنات معًا

const data = {
  title: 'Course',
  students: [
    { name: 'Ali', score: 90 },
    { name: 'Mona', score: 95 }
  ]
};

const {
  students: [
    { name: firstStudentName },
    { score: secondStudentScore }
  ]
} = data;

console.log(firstStudentName);     // Ali
console.log(secondStudentScore);   // 95
JavaScript
5. تفكيك داخل معاملات الدالة (Destructuring in Function Parameters)
🧪 المثال 1:
function printUser({ name, age }) {
  console.log(`Name: ${name}, Age: ${age}`);
}

printUser({ name: 'Omar', age: 30 });
JavaScript
function displayProduct({ title, price }) {
  console.log(`${title} costs $${price}`);
}

displayProduct({ title: 'Laptop', price: 1200 });
JavaScript

6. Rest Properties (باقي الخصائص)

const user = { name: 'Ali', age: 30, country: 'Egypt' };
const { name, ...rest } = user;
console.log(name); // Ali
console.log(rest); // { age: 30, country: 'Egypt' }
JavaScript
const book = { title: 'JS Guide', pages: 300, author: 'Yasin' };
const { title, ...info } = book;
console.log(info); // { pages: 300, author: 'Yasin' }
JavaScript

7. التفكيك باستخدام مفاتيح محسوبة (Computed Keys)

const key = 'language';
const data = { language: 'Arabic' };
const { [key]: lang } = data;
console.log(lang); // Arabic
JavaScript
const field = 'score';
const result = { score: 95 };
const { [field]: value } = result;
console.log(value); // 95
JavaScript
8. التفكيك داخل الحلقات (Destructuring in Loops)
🧪 المثال 1:
const users = [
  { name: 'Ali', age: 20 },
  { name: 'Sara', age: 22 }
];

for (const { name, age } of users) {
  console.log(`${name} - ${age}`);
}
JavaScript
const products = [
  { title: 'Mouse', price: 25 },
  { title: 'Keyboard', price: 45 }
];

products.forEach(({ title, price }) => {
  console.log(`${title}: $${price}`);
});
JavaScript
9. التفكيك مع spread عند الإرجاع (Destructuring with Return + Spread)
🧪 المثال 1:
function getUser() {
  return { name: 'Yasin', role: 'Admin' };
}

const { name, role } = getUser();
console.log(name, role); // Yasin Admin
JavaScript
function getSettings() {
  return { theme: 'dark', font: 'Arial', size: 14 };
}

const { theme, ...others } = getSettings();
console.log(theme);  // dark
console.log(others); // { font: 'Arial', size: 14 }
JavaScript