حتى الآن كان المصروف في Pocket مجرّد رقم. لكن المصروف الحقيقي له عدّة حقائق مترابطة: ما هو، وكم كلّف، وما فئته، ومتى كان. وحفظها في مصفوفات منفصلة (labels[2] وamounts[2] وcategories[2]) ينجح إلى أن تُرتَّب إحدى المصفوفات دون الأخرى. تحتاج إلى قيمة واحدة تحملها كلها: الكائن (object).
يُكتب الكائن بأقواس معقوفة ويحتوي على خصائص (properties)، كل منها اسم وقيمة:
\nconst expense = {\n id: \"exp-1\",\n label: \"Coffee\",\n amount: 450,\n category: \"food\",\n};\n\nconsole.log(expense.label); // dot notation\nconsole.log(expense[\"amount\"]); // bracket notation\nconsole.log(expense.note); // missing property: undefinedصيغة النقطة هي الطريقة اليومية لقراءة خاصية. والأقواس المربّعة تؤدّي المهمة نفسها، لكنها تحسب ما بداخلها، وهذا ما تحتاجه حين يكون اسم الخاصية في متغيّر: const field = "category"; expense[field]. وقراءة خاصية غير موجودة تعطي undefined، لا خطأ.
يمكنك إضافة الخصائص وتغييرها وحذفها بعد إنشاء الكائن:
\nconst expense = { label: \"Coffee\", amount: 450 };\nexpense.category = \"food\"; // add\nexpense.amount = 500; // change\ndelete expense.category; // remove\nconsole.log(expense);\nconsole.log(Object.keys(expense), Object.values(expense));حين يكون لديك متغيّر يحمل أصلًا الاسم الذي تريده للخاصية، يمكنك كتابته مرة واحدة. { label, amount } اختصار لـ { label: label, amount: amount }، وستراه باستمرار في الكود الحقيقي:
const label = \"Bus\";\nconst amount = 270;\nconst expense = { label, amount, category: \"travel\" };\nconsole.log(expense);Object.keys وObject.values تعطيانك مصفوفتين بالأسماء والقيم، وObject.entries تعطيك أزواجًا، لذلك تمرّ for (const [key, value] of Object.entries(expense)) على كل خاصية.
صارت بيانات Pocket الآن مصفوفة من الكائنات، وهي أكثر أشكال البيانات شيوعًا في JavaScript، وكل ما تعلّمته في الدرس السابق ما زال ينطبق:
\nconst expenses = [\n { id: \"exp-1\", label: \"Coffee\", amount: 450, category: \"food\" },\n { id: \"exp-2\", label: \"Train\", amount: 1220, category: \"travel\" },\n { id: \"exp-3\", label: \"Lunch\", amount: 1350, category: \"food\" },\n];\nconst food = expenses.filter((e) => e.category === \"food\");\nconsole.log(food.map((e) => e.label));هذا أهم ما يجب أن تفهمه عن الكائنات والمصفوفات. المتغيّر لا يحمل الكائن نفسه؛ بل يحمل مرجعًا (reference) إليه، مثل العنوان. ونسخ المتغيّر ينسخ العنوان:
\nconst original = { label: \"Coffee\", amount: 450 };\nconst alias = original;\nalias.amount = 999;\nconsole.log(original.amount); // 999\nconsole.log(alias === original); // true: the same object\nconsole.log({ a: 1 } === { a: 1 }); // false: two different objects=== مع الكائنات تقارن المراجع، لا المحتويات. فالكائنان اللذان يبدوان متطابقين يظلّان كائنين مختلفين.
ولهذا أهمية لأن الدوال تستلم المراجع أيضًا. فإن غيّرت دالة كائنًا أُعطي لها، تغيّر كائن المُستدعي:
\nfunction applyDiscount(expense) {\n expense.amount = Math.round(expense.amount * 0.9);\n return expense;\n}\n\nconst lunch = { label: \"Lunch\", amount: 1350 };\nconst discounted = applyDiscount(lunch);\nconsole.log(discounted.amount, lunch.amount); // both 1215تبدو الدالة كأنها تُرجع نسخة مخفّضة، لكنها أعادت كتابة الأصل أيضًا بصمت. وفي مكان آخر، صار مجموع كان يشمل lunch خاطئًا، ولا شيء على الشاشة يقول لماذا. هكذا تحدث أخطاء من نوع “كل ما فعلته أنني عرضت المصاريف، فلماذا تغيّرت مبالغها؟”. والحل أن تبني كائنًا جديدًا بدلًا من تغيير الكائن الذي أُعطي لك، والنشر يجعل ذلك سهلًا.
صيغة النشر (spread)، أي النقاط الثلاث، تنسخ كل خصائص كائن (أو عناصر مصفوفة) إلى كائن جديد:
\nconst expense = { id: \"exp-1\", label: \"Coffee\", amount: 450 };\nconst updated = { ...expense, amount: 500 };\nconsole.log(expense.amount, updated.amount);\n\nconst list = [expense];\nconst longer = [...list, { id: \"exp-2\", label: \"Bus\", amount: 270 }];\nconsole.log(list.length, longer.length);في { ...expense, amount: 500 } تُنسخ الخصائص بالترتيب، وamount اللاحقة تكتب فوق المنسوخة. فتحصل على كائن جديد، ويبقى الأصل دون مساس. ومع map، هذه هي الطريقة المعتمدة لتغيير عنصر واحد في قائمة دون تعديل أي شيء في مكانه:
const expenses = [\n { id: \"exp-1\", label: \"Coffee\", amount: 450 },\n { id: \"exp-2\", label: \"Bus\", amount: 270 },\n];\nconst fixed = expenses.map((e) => (e.id === \"exp-2\" ? { ...e, amount: 300 } : e));\nconsole.log(fixed[1].amount, expenses[1].amount);التفكيك (destructuring) يسحب الخصائص من كائن إلى متغيّرات تحمل الأسماء نفسها:
\nconst expense = { label: \"Train\", amount: 1220, category: \"travel\" };\nconst { label, amount, note = \"no note\" } = expense;\nconsole.log(label, amount, note);\n\nconst [first, second] = [\"food\", \"travel\", \"fun\"];\nconsole.log(first, second);= "no note" قيمة افتراضية، تُستخدم حين تكون الخاصية مفقودة أو undefined. ومع المصفوفات، يعتمد التفكيك على الموضع بدلًا من الاسم.
والتفكيك أكثر ما يكون نفعًا في معاملات الدوال، حيث يوثّق بالضبط الخصائص التي تحتاجها الدالة:
\nfunction describe({ label, amount, category = \"other\" }) {\n return `${label}: $${(amount / 100).toFixed(2)} (${category})`;\n}\nconsole.log(describe({ label: \"Train\", amount: 1220 }));قارنها بالنسخة الخالية من التفكيك، التي تكرّر expense. في كل سطر وتُخفي الخصائص المهمة حتى تقرأ الجسم كله. أما مع التفكيك، فالسطر الأول من الدالة هو عقدها: أعطني شيئًا فيه تسمية ومبلغ، وفئة اختيارية. ويستطيع المُستدعون تمرير كائن مصروف كامل فيه عشر خصائص أخرى؛ والدالة ببساطة تتجاهل الباقي.
وتعمل ... أيضًا بالعكس، بصفتها rest (البقية): const { id, ...details } = expense تضع id في متغيّر خاص به، وكل الخصائص الأخرى في كائن جديد اسمه details. وهذه طريقة أنيقة للتخلّص من خاصية دون تعديل الأصل: كل ما لم تسمّه ينتهي في الكائن الجديد.
صارت لدى Pocket بيانات واقعية. وفي الدرس التالي تلخّصها: مجاميع لكل فئة، وقوائم مرتّبة حسب المبلغ.
\n","toc":[{"id":"sec-1","text":"الكائنات: قيم مسمّاة مجتمعة","level":2},{"id":"sec-2","text":"المراجع: اسمان وكائن واحد","level":2},{"id":"sec-3","text":"النشر: انسخ وحدّث دون تعديل في المكان","level":2},{"id":"sec-4","text":"التفكيك: فكّ الحزمة إلى متغيّرات","level":2}],"takeaways":["الكائن يجمع قيمًا مسمّاة (خصائص)؛ اقرأها بصيغة النقطة، أو بالأقواس المربّعة حين يكون اسم الخاصية في متغيّر.","الكائنات والمصفوفات تُتداوَل عبر المرجع (reference)، لذلك يمكن أن يشير اسمان إلى الكائن نفسه، ويظهر التغيير عبر أحدهما من خلال الآخر.","النشر ({ ...expense, amount: 500 } و[...list, item]) يصنع نسخة جديدة سطحية، وهكذا تحدّث البيانات دون تعديلها في مكانها.","التفكيك (const { label, amount } = expense) يسحب الخصائص إلى متغيّرات، ويعمل في معاملات الدوال مع القيم الافتراضية."],"further":[{"title":"Working with objects (MDN)","url":"https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Working_with_objects"},{"title":"Destructuring (MDN)","url":"https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Destructuring"},{"title":"Spread syntax (MDN)","url":"https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Spread_syntax"}],"quiz":[{"q":"ماذا يطبع هذا الكود؟
\nconst a = { label: \"Coffee\", amount: 450 };\nconst b = a;\nb.amount = 500;\nconsole.log(a.amount);500، لأن a وb يشيران إلى الكائن نفسه.","why":"صحيح. هناك كائن واحد فقط. وتغييره عبر b يظهر من خلال a."},{"text":"450، لأن b نسخة من a.","why":"إسناد كائن إلى اسم آخر ينسخ المرجع، لا الكائن. فكلا الاسمين يشيران إلى الكائن نفسه."},{"text":"خطأ TypeError، لأن a مُصرَّح به بـ const.","why":"const تمنع إعادة توجيه a. أما تغيير خاصية في الكائن الذي يشير إليه فمسموح."}],"answer":0},{"q":"const updated = { ...expense, amount: 500 }; ما الصحيح بعد ذلك؟
expense.amount تساوي 500.","why":"النشر يبني كائنًا جديدًا تمامًا، ولا يمسّ الأصل."},{"text":"updated هو الكائن نفسه expense.","why":"{ ... } تُنشئ دائمًا كائنًا جديدًا، لذلك updated === expense تساوي false."},{"text":"لدى updated كل خصائص expense، مع استبدال amount بـ 500.","why":"صحيح. تُنسخ الخصائص بالترتيب، وamount اللاحقة تكتب فوق المنسوخة."}],"answer":2},{"q":"إذا كان const expense = { label: "Bus", amount: 270 };، فماذا يعطيك const { label, category = "other" } = expense;؟
label تساوي “Bus” وcategory تساوي “other”.","why":"صحيح. تُنسخ label من الكائن، وcategory غير موجودة فيه، فتُستخدم القيمة الافتراضية."},{"text":"label تساوي “Bus” وcategory تساوي undefined.","why":"هذا صحيح لو لم توجد القيمة الافتراضية. لكن = "other" تُطبَّق حين تكون الخاصية مفقودة."},{"text":"يرمي خطأ، لأن category ليست خاصية في expense.","why":"تفكيك خاصية مفقودة لا يرمي خطأ أبدًا؛ إنه يعطي undefined، أو القيمة الافتراضية إن وفّرت واحدة."}],"answer":0},{"q":"لديك const key = "category";. كيف تقرأ expense.category باستخدام key؟
expense.key","why":"صيغة النقطة تستخدم الاسم الحرفي بعد النقطة، لذلك تبحث هذه عن خاصية اسمها “key”."},{"text":"expense[key]","why":"صحيح. الأقواس المربّعة تحسب التعبير بداخلها، لذلك تقرأ expense[key] الخاصية التي اسمها هو قيمة key."},{"text":"expense["key"]","why":"علامات التنصيص تجعلها النص الحرفي “key”، تمامًا مثل expense.key."}],"answer":1}],"exercise":{"kind":"web","mode":"js","starter":{"js":"const expenses = [\n { id: \"exp-1\", label: \"Coffee\", amount: 450, category: \"food\" },\n { id: \"exp-2\", label: \"Train\", amount: 1220, category: \"travel\" },\n];\n\n// Return a NEW array with the expense added at the end\nfunction addExpense(list, expense) {\n list.push(expense);\n return list;\n}\n\n// Return a NEW array where the expense with this id has the new amount\nfunction updateAmount(list, id, amount) {\n const found = list.find((e) => e.id === id);\n found.amount = amount;\n return list;\n}\n\n// \"Train: $12.20 (travel)\"; category defaults to \"other\"\nfunction describe(expense) {\n return expense.label;\n}\n\nconsole.log(describe(expenses[1]));\n"},"solution":{"js":"const expenses = [\n { id: \"exp-1\", label: \"Coffee\", amount: 450, category: \"food\" },\n { id: \"exp-2\", label: \"Train\", amount: 1220, category: \"travel\" },\n];\n\nfunction addExpense(list, expense) {\n return [...list, expense];\n}\n\nfunction updateAmount(list, id, amount) {\n return list.map((e) => (e.id === id ? { ...e, amount } : e));\n}\n\nfunction describe({ label, amount, category = \"other\" }) {\n return `${label}: $${(amount / 100).toFixed(2)} (${category})`;\n}\n\nconsole.log(describe(expenses[1]));\n"},"checks":[{"id":"add","test":"const list = [{ id: 'a', label: 'A', amount: 1 }];\nconst item = { id: 'b', label: 'B', amount: 2 };\nconst out = addExpense(list, item);\nreturn Array.isArray(out) && out.length === 2 && out[1] === item && out[0] === list[0];\n"},{"id":"add-pure","test":"const list = [{ id: 'a', label: 'A', amount: 1 }];\nconst out = addExpense(list, { id: 'b', label: 'B', amount: 2 });\nreturn list.length === 1 && out !== list;\n"},{"id":"update","test":"const list = [{ id: 'a', label: 'A', amount: 1 }, { id: 'b', label: 'B', amount: 2 }];\nconst out = updateAmount(list, 'b', 300);\nreturn Array.isArray(out) && out.length === 2 && out[1].amount === 300 && out[1].label === 'B' && out[1].id === 'b' && out[0].amount === 1;\n"},{"id":"update-pure","test":"const list = [{ id: 'a', label: 'A', amount: 1 }, { id: 'b', label: 'B', amount: 2 }];\nconst out = updateAmount(list, 'b', 300);\nreturn list[1].amount === 2 && out !== list && out[1] !== list[1];\n"},{"id":"describe","test":"return describe({ label: 'Train', amount: 1220, category: 'travel' }) === 'Train: $12.20 (travel)' && describe({ label: 'Gift', amount: 5000 }) === 'Gift: $50.00 (other)';\n"}],"title":"حدّث المصاريف دون تعديلها في مكانها","prompt":"دوال كود البداية تغيّر المصفوفات والكائنات التي تُعطى لها، فتتغيّر بيانات المُستدعي من وراء ظهره. أعِد كتابتها بحيث تُرجع قيمًا جديدة بدلًا من ذلك:
\naddExpense(list, expense) تُرجع مصفوفة جديدة في نهايتها expense.updateAmount(list, id, amount) تُرجع مصفوفة جديدة يكون فيها المصروف صاحب ذلك الـ id كائنًا جديدًا بالمبلغ الجديد amount. وتبقى المصاريف الأخرى كما هي، ولا يتغيّر أي شيء في list.describe(expense) تُرجع نصًا مثل "Train: $12.20 (travel)"، مستخدمةً "other" حين لا توجد فئة. فكّك المعامل.[...list, expense].","للتحديث، استخدم map على القائمة وأرجع إمّا { ...e, amount } أو e دون تغيير، بحسب إن كانت e.id === id.","فكّك مع قيمة افتراضية في قائمة المعاملات: function describe({ label, amount, category = "other" })."],"explanation":"[...list, expense] تنسخ مراجع العناصر الموجودة إلى مصفوفة جديدة وتضيف عنصرًا آخر، فتحتفظ مصفوفة المُستدعي بطولها. وفي updateAmount، تبني map أصلًا مصفوفة جديدة؛ وللعنصر المطابق تُرجع { ...e, amount }، أي كائنًا جديدًا فيه كل خصائص e والمبلغ الجديد (والاختصار amount يعني amount: amount). أما العناصر غير المتغيّرة فتُرجَع كما هي، وهذا آمن لأن لا شيء يعدّلها. وفي describe، يوثّق التفكيك في قائمة المعاملات الخصائص الثلاث التي تحتاجها الدالة، وتغطّي القيمة الافتراضية المصاريف التي لا فئة لها.
addExpense تُرجع القائمة وفي نهايتها المصروف الجديد","add-pure":"addExpense تترك المصفوفة الأصلية دون تغيير","update":"updateAmount تغيّر مبلغ المصروف المطابق","update-pure":"updateAmount تترك المصفوفة والكائنات الأصلية دون تغيير","describe":"describe تنسّق المصروف، وتجعل الفئة “other” افتراضيًا"}},"words":601,"readMinutes":4}