✅ Destructuring Function Parameters

أي: تفكيك المعاملات داخل دوال (سواء كانت مصفوفة أو كائن).

✳️ الفكرة:

بدل ما تستقبل معاملًا واحدًا مثل obj وتتعامل معه داخليًا، يمكنك تفكيك القيم مباشرة في تعريف الدالة.

🟢 أولًا: Destructuring للكائن داخل دالة

✅ الشكل العادي:

function printUser(user) {
  console.log(user.name);
  console.log(user.age);
}

printUser({ name: 'Ali', age: 30 });

JavaScript

✅ باستخدام Destructuring:

function printUser({ name, age }) {
  console.log(name);
  console.log(age);
}

printUser({ name: 'Ali', age: 30 });

JavaScript

function showUser({ name, age }) {
  console.log(`Name: ${name}, Age: ${age}`);
}

showUser({ name: 'Yasin', age: 25 });

JavaScript

function greet({ username }) {
  console.log(`Hello ${username}`);
}

greet({ username: 'Ali' });

JavaScript

📌 مع إعادة تسمية:

function printUser({ name: userName, age: userAge }) {
  console.log(userName);
  console.log(userAge);
}

JavaScript

function printUser({ name: fullName }) {
  console.log(`Full Name: ${fullName}`);
}

printUser({ name: 'Sara Ahmed' });

JavaScript

function display({ country: userCountry }) {
  console.log(`Country: ${userCountry}`);
}

display({ country: 'Egypt' });

JavaScript

📌 مع قيمة افتراضية:

function printUser({ name = 'Guest', age = 18 }) {
  console.log(name);
  console.log(age);
}

printUser({}); // Guest - 18

JavaScript

function showInfo({ name, age = 18 }) {
  console.log(`${name} is ${age} years old`);
}

showInfo({ name: 'Omar' }); // age غير موجودة → 18

JavaScript

function settings({ mode = 'light', font = 'Arial' }) {
  console.log(`Mode: ${mode}, Font: ${font}`);
}

settings({ font: 'Verdana' }); // mode → default

JavaScript

🟢 ثانيًا: Destructuring لمصفوفة داخل دالة

✅ الشكل العادي:

function printScores(scores) {
  console.log(scores[0]);
  console.log(scores[1]);
}

printScores([90, 85]);

JavaScript

✅ باستخدام Destructuring:

function printScores([math, english]) {
  console.log(math);
  console.log(english);
}

JavaScript

🟢 ثالثًا: استخدام Destructuring مع القيمة الافتراضية + Rest Parameter

function showUser({ name = 'No Name', age = 0, ...rest }) {
  console.log(name, age);
  console.log(rest); // باقي الخصائص
}

showUser({ name: 'Sara', age: 25, job: 'Designer', country: 'Egypt' });

JavaScript

function handleUser({ name, ...rest }) {
  console.log(name);
  console.log(rest); // باقي الخصائص
}

handleUser({ name: 'Yasin', role: 'admin', active: true });

JavaScript

function showBook({ title, ...details }) {
  console.log(title);
  console.log(details);
}

showBook({ title: 'JS Basics', pages: 150, author: 'Ali' });

JavaScript

تفكيك Array في Parameters

function sum([a, b]) {
  return a + b;
}

console.log(sum([3, 7])); // 10

JavaScript

function showNames([first, second]) {
  console.log(`First: ${first}, Second: ${second}`);
}

showNames(['Ali', 'Sara']);

JavaScript

تفكيك متداخل (Nested Destructuring)

function printAddress({ address: { city, zip } }) {
  console.log(`City: ${city}, ZIP: ${zip}`);
}

printAddress({ address: { city: 'Cairo', zip: 12345 } });

JavaScript

function showProfile({ name, contact: { email } }) {
  console.log(`${name}'s email is ${email}`);
}

showProfile({ name: 'Ali', contact: { email: '[email protected]' } });

JavaScript

الآن سأقدّم لك مثالًا شاملًا ومختلطًا ومتقدمًا عن Destructuring يتضمن:

✅ تفكيك كائنات و مصفوفات
✅ تفكيك متداخل
✅ إعادة تسمية المتغيرات
✅ قيم افتراضية
✅ استخدام rest
✅ داخل الدالة (Function Parameters)

function processOrder({
  user: { name: fullName, contact: { email, phone = 'غير متوفر' } },
  items,
  ...orderDetails
}) {
  const [firstItem, ...otherItems] = items;

  console.log(`👤 الاسم: ${fullName}`);
  console.log(`📧 الإيميل: ${email}`);
  console.log(`📱 الهاتف: ${phone}`);

  console.log(`🛒 أول منتج: ${firstItem.name} - السعر: $${firstItem.price}`);
  console.log(`📦 باقي المنتجات:`, otherItems);

  console.log(`📄 تفاصيل أخرى:`, orderDetails);
}

const orderData = {
  user: {
    name: 'ياسين',
    contact: {
      email: '[email protected]'
      // لم يتم توفير رقم الهاتف
    }
  },
  items: [
    { name: 'كيبورد', price: 50 },
    { name: 'ماوس', price: 30 },
    { name: 'شاشة', price: 200 }
  ],
  orderId: 1234,
  status: 'قيد التنفيذ'
};

processOrder(orderData);

JavaScript

✅ شرح ما يحدث:

الجزء	التفسير
`user: { name: fullName }`	تفكيك خاصية `name` من داخل `user` وتخزينها باسم جديد `fullName`
`contact: { email, phone = 'غير متوفر' }`	تفكيك متداخل مع قيمة افتراضية في حال عدم وجود `phone`
`items`	تفكيك المصفوفة كاملة
`const [firstItem, ...otherItems] = items;`	تفكيك المصفوفة داخليًا لأخذ أول عنصر والباقي
`...orderDetails`	جمع باقي خصائص الكائن الأصلي (مثل `orderId`, `status`)

النتيجة:

👤 الاسم: ياسين  
📧 الإيميل: yasin@example.com  
📱 الهاتف: غير متوفر  
🛒 أول منتج: كيبورد - السعر: $50  
📦 باقي المنتجات: [ { name: 'ماوس', price: 30 }, { name: 'شاشة', price: 200 } ]  
📄 تفاصيل أخرى: { orderId: 1234, status: 'قيد التنفيذ' }

JavaScript