الكائنات في JavaScript (Objects)

المصفوفة ممتازة لحفظ قائمة من الأشياء المتشابهة. لكن ماذا لو أردت أن تصف شيئاً واحداً له صفات كثيرة، مثل طالب له اسم وعمر ومدينة؟ هنا نستخدم الكائنات (Objects). في هذا الدرس ستتعلم كيف تنشئ كائناً، وتقرأ خصائصه وتعدّلها، وتضع بداخله دوالاً، وتجمع عدة كائنات في مصفوفة.

ما هو الكائن؟

الكائن مثل بطاقة الهوية: فيها خانات لها أسماء (الاسم، تاريخ الميلاد، المحافظة)، وفي كل خانة قيمة. في الكائن نسمي كل خانة خاصية (Property)، ولكل خاصية مفتاح وقيمة:

const student = {
  name: "منى",
  age: 14,
  city: "طنطا",
};

الكائن يُكتب بين قوسين معقوفين { }. كل خاصية مكتوبة على شكل المفتاح: القيمة، وبين الخصائص فواصل. ويمكن أن تكون القيمة من أي نوع: نص أو رقم أو قيمة منطقية أو مصفوفة أو حتى كائن آخر.

قراءة الخصائص

هناك طريقتان للوصول إلى قيمة خاصية:

console.log(student.name);
console.log(student["age"]);

الناتج

منى
14

• النقطة student.name: الطريقة الأشهر والأسهل.
• الأقواس المربعة student["age"]: مفيدة عندما يكون اسم الخاصية مخزناً في متغير.

وإذا طلبت خاصية غير موجودة، تحصل على undefined بدون خطأ:

console.log(student.phone);

الناتج

undefined

التعديل والإضافة والحذف

student.age = 15;               // تعديل
student.school = "مدرسة النور"; // إضافة خاصية جديدة
delete student.city;            // حذف خاصية
console.log(student);

الناتج

{ name: 'منى', age: 15, school: 'مدرسة النور' }

const مع الكائنات

الكائن المعرّف بـ const يمكن تعديل خصائصه بحرية. const تمنع فقط أن تستبدل الكائن كله بكائن آخر، تماماً كما رأينا مع المصفوفات.

الدوال داخل الكائن (Methods)

يمكن أن تكون قيمة الخاصية دالة، وتسمى عندها دالة الكائن (Method). وداخلها تشير الكلمة this إلى الكائن نفسه:

const car = {
  brand: "Toyota",
  speed: 0,
  accelerate() {
    this.speed += 20;
    console.log(`السرعة الآن ${this.speed}`);
  },
};

car.accelerate();
car.accelerate();

الناتج

السرعة الآن 20
السرعة الآن 40

الكلمة this تعني «هذا الكائن»، فـ this.speed تعني «سرعة هذه السيارة». بهذا تجتمع البيانات (السرعة) والأفعال (زيادة السرعة) في مكان واحد. ولاحظ أن console.log نفسها دالة داخل الكائن console!

المرور على خصائص الكائن

const prices = { tea: 10, coffee: 25 };

for (const key in prices) {
  console.log(key, prices[key]);
}

console.log(Object.keys(prices));
console.log(Object.values(prices));

الناتج

tea 10
coffee 25
[ 'tea', 'coffee' ]
[ 10, 25 ]

• حلقة for...in تمر على مفاتيح الكائن. ولأن المفتاح في متغير، نستخدم الأقواس المربعة prices[key].
• Object.keys تعطيك مصفوفة بالمفاتيح، و Object.values مصفوفة بالقيم.

مصفوفة من الكائنات

هذا من أكثر الأشكال شيوعاً في البرامج الحقيقية: قائمة منتجات، أو قائمة مستخدمين، كل عنصر فيها كائن:

const products = [
  { name: "قلم", price: 5 },
  { name: "حقيبة", price: 120 },
];

for (const p of products) {
  console.log(`${p.name}: ${p.price} جنيه`);
}

const cheap = products.filter((p) => p.price < 50);
console.log(cheap);

الناتج

قلم: 5 جنيه
حقيبة: 120 جنيه
[ { name: 'قلم', price: 5 } ]

هنا اجتمع كل ما تعلمته: مصفوفات، وكائنات، وحلقات، ودوال سهمية، و filter.

استخراج الخصائص (Destructuring)

اختصار مفيد لأخذ عدة خصائص في متغيرات بسطر واحد:

const user = { username: "ahmed", level: 3 };
const { username, level } = user;
console.log(username, level);

الناتج

ahmed 3

متى أستخدم كائناً ومتى مصفوفة؟

مصفوفة لقائمة أشياء من نفس النوع يهمك ترتيبها (قائمة طلاب). كائن لوصف شيء واحد بصفات لها أسماء (طالب واحد بكل بياناته).

جرّب بنفسك

كائن يمثل كتاباً تقرأه، وفيه دالة تحسب نسبة ما قرأته. غيّر عدد الصفحات المقروءة، وأضف خاصية author واطبعها:

جرّب بنفسكJavaScript

محرر الكود (JavaScript)const book = { title: "البرمجة للمبتدئين", pages: 220, read: 80, progress() { return Math.round((this.read / this.pages) * 100); }, }; console.log(`كتاب: ${book.title}`); console.log(`قرأت ${book.progress()}%`); book.read += 30; console.log(`قرأت ${book.progress()}%`);

شغّلارجع للكود الأصليأو اضغط Ctrl + Enter

الناتج

أخطاء شائعة

• نسيان الفاصلة بين الخصائص: كل خاصية تنتهي بفاصلة قبل الخاصية التالية، وإلا يظهر خطأ.
• استخدام النقطة مع متغير: إذا كان اسم الخاصية في متغير key، فإن obj.key تبحث عن خاصية اسمها حرفياً «key». الصحيح obj[key].
• نسيان this داخل الدالة: كتابة speed += 20 بدلاً من this.speed += 20 لن تعدّل خاصية الكائن.

اختبر نفسك

سؤال

إذا كان const p = { name: 'Sara', age: 13 }، فما قيمة p.city؟

undefinedخطأnull

سؤال

داخل دالة في كائن، إلى ماذا تشير الكلمة this؟

إلى الكائن الذي يحتوي الدالةإلى الدالة نفسهاإلى الصفحة كلها

الخلاصة

• الكائن مجموعة خصائص على شكل مفتاح: قيمة بين { }.
• تقرأ الخاصية بـ obj.key أو obj["key"]، والخاصية غير الموجودة قيمتها undefined.
• يمكنك تعديل الخصائص وإضافتها وحذفها بـ delete.
• الدوال داخل الكائن تستخدم this للإشارة إلى الكائن نفسه.
• for...in و Object.keys للمرور على الخصائص، ومصفوفات الكائنات شكل شائع جداً.