شرح مفهوم Destructuring في JavaScript

🧩 Destructuring في JavaScript: السر وراء الكود الأنيق والقصير! ✨

اليوم سنتعلم واحدة من أكثر الميزات أناقة وفائدة في JavaScript الحديثة (ES6+)، وهي Destructuring أو "التفكيك". إذا كنت تشعر أن كتابة كود لاستخراج القيم من المصفوفات أو الكائنات طويلة ومتكررة، فاستعد لتغيير رأيك! 🚀

Destructuring يسمح لك باستخراج قيم متعددة من المصفوفات (Arrays) أو الكائنات (Objects) وتعيينها لمتغيرات جديدة، كل ذلك في سطر واحد من الكود. هذا يجعل الكود أكثر نظافة، قابلية للقراءة، وأقل عرضة للأخطاء.

📦 لماذا نحتاج Destructuring؟ (المشكلة القديمة)

لنفهم الفائدة، دعنا نرى كيف كنا نستخرج القيم قبل وجود هذه الميزة.

مثال: استخراج قيم من مصفوفة بالطريقة التقليدية

// لدينا مصفوفة تحتوي على أسماء أشخاص
const people = ["Ahmed", "Sarah", "Khaled"];

// لاستخراج كل اسم في متغير منفصل، كنا نكتب:
const firstPerson = people[0];
const secondPerson = people[1];
const thirdPerson = people[2];

console.log(firstPerson); // "Ahmed"
console.log(secondPerson); // "Sarah"
// لاحظ التكرار والكتابة الطويلة!

مثال: استخراج خصائص من كائن بالطريقة التقليدية

// لدينا كائن يمثل بيانات مستخدم
const user = {
    name: "Noor",
    age: 25,
    city: "Riyadh"
};

// لاستخراج الخصائص، كنا نكتب:
const userName = user.name;
const userAge = user.age;
const userCity = user.city;

console.log(userName); // "Noor"
// مرة أخرى، كود متكرر وطويل.

Destructuring يأتي لحل هذه المشكلة بشكل أنيق! 🎯

🧱 Destructuring المصفوفات (Array Destructuring)

التفكيك يسمح لك بفك المصفوفة وتعيين قيمها مباشرة لمتغيرات جديدة بناءً على موقعها (Index).

الصيغة الأساسية:

const [variable1, variable2, variable3] = array;

مثال عملي بسيط:

const colors = ["Red", "Green", "Blue"];

// هيا نفكك المصفوفة!
const [firstColor, secondColor, thirdColor] = colors;

console.log(firstColor); // "Red"
console.log(secondColor); // "Green"
console.log(thirdColor); // "Blue"

✨ لاحظ كيف أصبح السطر الذي يستخرج القيم أقصر وأوضح!

💡 تخطي العناصر (Skipping Items)

ماذا لو أردت العنصر الأول والثالث فقط وتخطي الثاني؟ الأمر سهل!

const numbers = [10, 20, 30, 40];

// نستخدم فاصلة `,` لتخطي الموضع الذي لا نريده
const [firstNumber, , thirdNumber] = numbers;

console.log(firstNumber); // 10
console.log(thirdNumber); // 30 (لاحظ أننا تخطينا العنصر في الموضع 1 وهو 20)

💡 القيمة الافتراضية (Default Values)

يمكنك تعيين قيمة افتراضية لمتغير في حالة كان الموضع المقابل في المصفوفة غير محدد (undefined).

const fruits = ["Apple"];

// المصفوفة تحتوي على عنصر واحد فقط
const [fruit1, fruit2 = "Banana"] = fruits; // قيمة افتراضية لـ fruit2

console.log(fruit1); // "Apple"
console.log(fruit2); // "Banana" (تم استخدام القيمة الافتراضية)

🗂️ Destructuring الكائنات (Object Destructuring)

التفكيك مع الكائنات أكثر شيوعاً وفائدة! هنا نستخرج الخصائص بناءً على اسم المفتاح (Key Name) وليس الموضع.

الصيغة الأساسية:

const { property1, property2 } = object;

مثال عملي أساسي:

const student = {
    fullName: "Fatima Ali",
    grade: 95,
    major: "Computer Science"
};

// نفكك الكائن لاستخراج الخصائص التي نريدها
const { fullName, grade } = student;

console.log(fullName); // "Fatima Ali"
console.log(grade); // 95
// لاحظ أننا لم نستخرج `major` لأننا لم نذكرها.

💡 تعيين أسماء متغيرات مختلفة (Aliasing)

ماذا لو أردت أن يكون اسم المتغير مختلفاً عن اسم الخاصية في الكائن؟ يمكنك ذلك بسهولة.

const car = {
    brand: "Toyota",
    model: "Camry",
    year: 2022
};

// نستخرج خاصية `brand` ولكن نخزن قيمتها في متغير اسمه `company`
const { brand: company, model } = car;

console.log(company); // "Toyota" (القيمة من `brand`)
console.log(model); // "Camry"
// console.log(brand); // سيعطي خطأ! المتغير `brand` غير معرف.

💡 القيم الافتراضية مع الكائنات

كما في المصفوفات، يمكنك تعيين قيم افتراضية للخصائص التي قد تكون غير موجودة.

const settings = {
    theme: "dark",
    language: "en"
    // خاصية `fontSize` غير موجودة
};

const { theme, language, fontSize = 16 } = settings;

console.log(fontSize); // 16 (القيمة الافتراضية لأن الخاصية غير موجودة)

🎯 خلاصة وأمثلة واقعية بسيطة

لنجمع ما تعلمناه في أمثلة عملية صغيرة:

المثال ١: تبادل قيم متغيرين (Swap)

let a = 5;
let b = 10;

// تبادل القيم بطريقة Destructuring (بدون متغير مؤقت!)
[a, b] = [b, a];

console.log(a); // 10
console.log(b); // 5

المثال ٢: استقبال قيم من دالة

// دالة ترجع مصفوفة
function getCoordinates() {
    return [24.7136, 46.6753]; // خط الطول، خط العرض
}

// نستقبل القيم مباشرة في متغيرات مفككة
const [latitude, longitude] = getCoordinates();
console.log(`خط العرض: ${latitude}`); // خط العرض: 24.7136