فهم خاصية Destructuring في JavaScript

تعالى اكلمك النهاردة عن خاصية مهمة وجميلة من خواص الـ ES6 فى JavaScript
وهي خاصية Destructuring Assignment مع الكائنات - Objects

عايز أقولك لو بتتعامل مع بيانات كتير في الكود بتاعك، خاصية Destructuring Assignment في ES6 هتسهل عليك الدنيا جدًا!

بتعمل إيه الخاصية دي؟ ​

بتخليك تفكك البيانات بسهولة من الكائنات (Objects) بدل ما تكتب كود طويل ومكرر.
يعني ببساطة، هتقدر تاخد القيم اللي محتاجها بأسلوب مختصر أكتر بكتير وواضح جدًا.

مثال عملي (أوضح ف الصورة):
عندك أوبجكت فيه بيانات المستخدم:

const user = {
name: "Alaa Eldeyn",
age: 22,
job: "Frontend Developer",
};

الطريقة القديمة

const userName = user.name;
const userAge = user.age;
const userJob = user.job;

الطريقة الجديدة مع ES6

const { name, age, job } = user;

console.log(name); // Alaa Eldeyn
console.log(age); // 22
console.log(job); // Frontend Developer

تخيل بقى لو عندك في كل صفحة كميات مهولة من البيانات…
هي الأفضل إنك تتعامل معاها بالطريقة الجديدة ولا القديمة؟
أكيد الجديدة أفضل ومقروءة أكتر

شوفت ليه الـ Destructuring مهم بقى؟
يبقى باختصار كده:
بتقلل الكود.
بتخلي الكود أنضف وأسهل في القراءة.
مفيدة جدًا لما بتتعامل مع APIs أو بيانات كبيرة.

جربها وقولي رأيك