الـ objects والـ arrays: destructuring و spread و map و filter و reduce

أهلًا بيك. أي حاجة في الـ backend، مستخدم أو order أو كورس، بنمسكها كـ object. والـ object شنطة فيها قيم، كل قيمة ليها اسم، والاسم ده اسمه key. user فيه id و name و email. و roles جُوّاه array، يعني list بترتيب. وبنقرا بالـ dot أو بالـ square brackets، وبنضيف بنفس الطريقة. نشغّل.

const user = {
  id: 7,
  name: "مُنى",
  email: "[email protected]",
  roles: ["student"],
};

console.log(user.name, user.roles[0]);
console.log(user["email"]);
console.log(user.phone);

user.roles.push("teacher");
user.verified = true;
console.log(user);

$ node main.js
مُنى student
[email protected]
undefined
{
  id: 7,
  name: 'مُنى',
  email: '[email protected]',
  roles: [ 'student', 'teacher' ],
  verified: true
}

الاسم وأول role. الـ email بالـ brackets، ودي مفيدة لما اسم الـ key جُوّه متغير. و phone مش موجود، فرجع undefined من غير أي error. وفي الآخر الـ object بعد ما زودنا teacher و verified. خد بالك: user كان const، ومع كده عدلنا جُوّاه. const بتمنع إنك تحط object تاني مكانه، مش إنك تعدّل جُوّاه. الـ destructuring: بدل ما تكتب user dot name و user dot city، بتطلّعهم في سطر واحد. والأهم: الـ rest، بالـ three dots. password لوحده، و publicUser فيه كل حاجة غيره. ودي بالزبط الطريقة اللي هنشيل بيها الـ password قبل ما نبعت المستخدم في response. وبعدين الـ spread، نفس الـ three dots، بس بتعمل نسخة جديدة فيها تعديل. وآخر سطرين destructuring لـ array. نشغّل.

const user = { id: 7, name: "مُنى", password: "secret", city: "Cairo" };

// destructuring: طلّع القيم في متغيرات
const { name, city } = user;
console.log(name, city);

// rest: كل حاجة ما عدا password
const { password, ...publicUser } = user;
console.log(publicUser);

// spread: نسخة جديدة فيها تعديل
const updated = { ...user, city: "Alex" };
console.log(user.city, updated.city);

const [first, second] = ["GET", "POST", "PUT"];
console.log(first, second);

$ node main.js
مُنى Cairo
{ id: 7, name: 'مُنى', city: 'Cairo' }
Cairo Alex
GET POST

الاسم والمدينة. publicUser من غير password، وده اللي يتبعت. والنسخة الجديدة فيها Alex، والأصلية لسه Cairo، ما اتغيرتش. و first و second: GET و POST. الـ arrays وأهم أدواتها. عندنا أربع orders. filter بترجّع اللي الشرط بتاعه صح: المدفوع بس. map بتحوّل كل item لحاجة تانية: الإجمالي بس. reduce بتلم كل الـ items في قيمة واحدة: المجموع، وبتبدأ من zero. find بترجّع أول item يطابق. some: فيه واحد على الأقل؟ و every: كلهم؟ و includes: القيمة دي موجودة؟ نشغّل.

const orders = [
  { id: 1, user: "mona", total: 250, paid: true },
  { id: 2, user: "omar", total: 90, paid: false },
  { id: 3, user: "mona", total: 400, paid: true },
  { id: 4, user: "sara", total: 60, paid: true },
];

const paid = orders.filter((o) => o.paid);
const totals = paid.map((o) => o.total);
const revenue = totals.reduce((sum, t) => sum + t, 0);

console.log(paid.length, totals, revenue);
console.log(orders.find((o) => o.id === 2));
console.log(orders.some((o) => o.total > 300), orders.every((o) => o.paid));
console.log(orders.map((o) => o.user).includes("sara"));

$ node main.js
3 [ 250, 400, 60 ] 710
{ id: 2, user: 'omar', total: 90, paid: false }
true false
true

تلات orders مدفوعة، وأرقامها، والمجموع سبعمية وعشرة. find جابت الـ order بتاع عمر. some بـ true لأن فيه order فوق التلتمية، و every بـ false لأن order عمر مش مدفوع. و sara موجودة. الأدوات دي مش بتغيّر الـ array الأصلية، بترجّع واحدة جديدة، ودي حاجة بنحبها. فخ أخير. sort من غير حاجة بترتب الأرقام على إنها كلام! وكمان sort بتغيّر الـ array الأصلية، علشان كده بنعمل نسخة الأول بالـ spread. نشغّل.

const nums = [10, 9, 100, 1];
console.log([...nums].sort());
console.log([...nums].sort((a, b) => a - b));
console.log(nums);

$ node main.js
[ 1, 10, 100, 9 ]
[ 1, 9, 10, 100 ]
[ 10, 9, 100, 1 ]

من غير function: one، ten، one hundred، nine. ترتيب حروف، مش أرقام. بـ a minus b: الترتيب الصح. والأصلية زي ما هي، بفضل النسخة. افتكر: sort للأرقام لازم معاها function. التحدي: إيراد كل عميل. المدفوع بس. reduce تبني object: اسم المستخدم ومجموعه. Object dot entries تحوّله لـ array. ترتيب تنازلي. وطباعة. الكومنت فيه الخطوات والتلميحات، حتى شكل الـ reduce لو اتزنقت.

الحل. filter وبعده reduce على طول، وده اسمه chaining. جُوّه الـ reduce: لو المستخدم لسه مالوش قيمة، الـ double question mark بتخليها zero، ونزود عليها. وبعدين entries و sort بـ b minus a، تنازلي. وللطباعة destructuring جُوّه الـ for of. نشغّل.

const orders = [
  { id: 1, user: "mona", total: 250, paid: true },
  { id: 2, user: "omar", total: 90, paid: false },
  { id: 3, user: "mona", total: 400, paid: true },
  { id: 4, user: "sara", total: 60, paid: true },
  { id: 5, user: "omar", total: 300, paid: true },
];

const byUser = orders
  .filter((o) => o.paid)
  .reduce((acc, o) => {
    acc[o.user] = (acc[o.user] ?? 0) + o.total;
    return acc;
  }, {});

const ranked = Object.entries(byUser).sort((a, b) => b[1] - a[1]);
for (const [user, total] of ranked) {
  console.log(`${user}: ${total}`);
}

$ node main.js
mona: 650
omar: 300
sara: 60

مُنى ستمية وخمسين، وعمر تلتمية، لأن أول order ليه مش مدفوع، وسارة ستين. الدرس الجاي: JSON، اللغة اللي أي backend بيتكلم بيها.