خاصية الـ Destructuring Assignment مع الكائنات Objects

[x32x01]

تعالى اكلمك النهاردة عن خاصية مهمة وجميلة من خواص الـ 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); // 20
console.log(job); // Frontend Developer

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