Lesson 17 / الدرس 17

Objects: values with names / الكائنات: قيم بأسماء

An array numbers its values; an object names them. Once a thing has more than two properties, an object is what stops you remembering which position the price was in.

المصفوفة ترقّم قيمها؛ والكائن يسمّيها. وما إن يصير للشيء أكثر من خاصيتين، حتى يكون الكائن هو ما يمنعك من تذكّر أي موضع كان فيه السعر.

const product = {
  name: 'Dates',
  price: 120,
  inStock: true
};

product.name          'Dates'      the usual way
product['name']       'Dates'      when the key is in a variable
product.colour        undefined    no error for a missing one
product.price = 130                change it
product.weight = '1kg'             add a new one

Each name is a key and each value is a value. Asking for a key that does not exist gives undefined rather than an error — the same quiet behaviour as an array position that is not there. Run the demonstration.

وكل اسم مفتاح وكل قيمة قيمة. وطلب مفتاح غير موجود يعطي undefined لا خطأً — السلوك الهادئ نفسه لموضع مصفوفة غير موجود. شغّل العرض.

A list of objects is what real data looks like

Almost everything a program handles arrives in this shape: an array of objects, each with the same keys. A basket, a list of students, the results of a search, and the JSON of lesson 20 in the web course — all the same. Everything from lesson 16 works on it directly, which is why those two lessons are next to each other.

Reading, changing and copying

To do this	Write
Get a value	product.price
Get one by a name in a variable	product[key]
Add or change	product.weight = "1kg"
Remove	delete product.weight
Does it have this key	"price" in product
All the keys	Object.keys(product)
All the values	Object.values(product)
Copy it	{ ...product }

The last row is worth learning now. const copy = product does not copy — both names point at the same object, and changing one changes the other. { ...product } makes an actual copy.

والسطر الأخير يستحق التعلم الآن. فـconst copy = product لا ينسخ — بل يشير الاسمان إلى الكائن نفسه، وتغيير أحدهما يغيّر الآخر. و{ ...product } يصنع نسخة فعلية.

والوصول مستويين داخل بيانات لم تنشئها مصدر "Cannot read properties of undefined" من الدرس 8. فـorder.customer.email يرمي خطأً إن لم يكن ثمة عميل — والرسالة تلوم email وليست هي موضع المشكلة. ولـJavaScript الحديثة order.customer?.email، وهي تعطي undefined بدل الرمي. وهي محرف واحد وتزيل صنفًا كاملًا من الانهيارات.

An object can hold anything, including arrays and other objects, and real data nests: a customer has an address, which has a city. Nesting more than two or three levels deep usually means the shape is fighting you, and flattening it — or naming the inner piece as its own variable before working with it — makes everything downstream shorter.

ولرؤية شكل بيانات لم تكتبها، اطبعها بـconsole.log(thing) ووسّعها في السجل — فهو يعطيك شجرة تنقر خلالها، وهي أنفع بكثير من JSON.stringify لمعرفة أي المفاتيح موجودة فعلًا. ومعظم الحيرة من استجابة API تختفي في الثلاثين ثانية التي يستغرقها هذا.

Try it live / جرّب بنفسك

<h1>Modelling something real</h1>
<table id="table"></table>
<pre id="out"></pre>

<script>
  const students = [
    { name: 'Sara', mark: 88, year: 2, passed: true }
    // add more
  ];

  // your table and answers here
</script>
<style>
  table { border-collapse: collapse; }
  th, td { border: 1px solid #cbd5e1; padding: .4rem .7rem; text-align: left; }
</style>

Preview / المعاينة

Check yourself / اختبر نفسك

1. What does const copy = product do?

ماذا يفعل const copy = product؟

2. What does order.customer?.email do when there is no customer?

ماذا تفعل order.customer?.email حين لا يوجد عميل؟

3. What shape does real program data usually take?

Your task / مهمتك

Model something real as an array of objects — a class of students with marks, a menu with prices and categories, your own bookshelf. Give each at least four keys including one boolean. Then answer four questions about it using the methods from lesson 16, print a formatted table of the whole list, and demonstrate the copy trap: change a value through a second name and show that the original changed too.

مثّل شيئًا حقيقيًا مصفوفةَ كائنات — صفًا من الطلاب بدرجات، أو قائمة طعام بأسعار وفئات، أو رفّ كتبك. وأعطِ كل واحد أربعة مفاتيح على الأقل بينها قيمة منطقية. ثم أجب أربعة أسئلة عنها بدوال الدرس 16، واطبع جدولًا منسّقًا للقائمة كلها، واعرض فخّ النسخ: غيّر قيمة عبر اسم ثانٍ وأظهر أن الأصل تغيّر أيضًا.

A real list of objects, four keys each قائمة كائنات حقيقية بأربعة مفاتيح لكل واحد
Four questions answered with array methods أربعة أسئلة مُجابة بدوال المصفوفات
The whole list printed as a table القائمة كلها مطبوعة جدولًا
The copy trap demonstrated, then fixed فخ النسخ معروضًا ثم مُصلحًا