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

5:00 دقائق مجاني
في هذا الدرس ستتعلم كيف تخزن بيانات مع خصائصها باستخدام الكائنات

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

ما هو الكائن؟

الكائن هو متغير يحتوي على خصائص (Properties)، كل خاصية لها اسم وقيمة.

فكر في الكائن كأنه بطاقة تعريف لشخص أو شيء.

إنشاء كائن

مثال على كائن يمثل مستخدم: 


let user = {
  name: "أحمد",
  age: 25,
  email: "ahmed@example.com"
};

هنا أنشأنا كائنًا اسمه user يحتوي على ثلاث خصائص.

الوصول إلى خصائص الكائن

يمكنك الوصول بطريقتين:

1️⃣ باستخدام النقطة (.)


console.log(user.name); // أحمد
console.log(user.age);  // 25

2️⃣ باستخدام الأقواس []


console.log(user["email"]); // ahmed@example.com

الطريقة الأولى هي الأكثر استخدامًا.

تعديل خصائص الكائن 


user.age = 26;
user.city = "الرياض";

console.log(user);

لاحظ أننا:

  • عدّلنا خاصية موجودة (age)
  • أضفنا خاصية جديدة (city)

كائنات داخل مصفوفة (مهم جدًا)

هذا من أكثر الاستخدامات شيوعًا في المشاريع الحقيقية. 


let users = [
  { name: "أحمد", age: 25 },
  { name: "سارة", age: 22 },
  { name: "محمد", age: 30 }
];

for (let i = 0; i < users.length; i++) {
  console.log(users[i].name + " عمره " + users[i].age);
}

تستخدم هذا الأسلوب في:

  • قوائم المستخدمين
  • المنتجات
  • التعليقات

مثال واقعي: منتج في متجر 


let product = {
  name: "لابتوب",
  price: 3000,
  discount: 10,
  finalPrice: function () {
    return this.price - (this.price * this.discount / 100);
  }
};

console.log(product.finalPrice());

لاحظ:

  • الدالة داخل الكائن تُسمّى method
  • this تشير إلى الكائن نفسه

أخطاء شائعة مع الكائنات

  • نسيان الفاصلة بين الخصائص
  • الخلط بين المصفوفة والكائن
  • استخدام this خارج الكائن
  • الوصول لخاصية غير موجودة (تعطي undefined)

تمارين للتطبيق

  1. أنشئ كائن يمثل طالب (اسم، عمر، درجة).
  2. أضف خاصية جديدة للكائن.
  3. أنشئ مصفوفة تحتوي على 3 كائنات طلاب.

التطبيق العملي هو أسرع طريق للفهم 👍

ماذا بعد هذا الدرس؟

الدرس القادم: التعامل مع DOM (عناصر الصفحة)

سنبدأ ربط JavaScript بالصفحة وتغيير العناصر فعليًا.

الدرس التالي العودة للسابق