(Objects) في JavaScript – شرح موسّع وشامل

الدرس الثامن: الكائنات (Objects) في JavaScript

مقدمة: الكائنات كأحد الركائز الأساسية للبرمجة بلغة JavaScript

الكائنات (Objects) في JavaScript ليست مجرد طريقة لتخزين البيانات، بل هي العمود الفقري الذي يُبنى عليه كل شيء تقريبًا في اللغة. سواء كنت تعمل على تطوير مواقع ويب ديناميكية أو تطبيقات متقدمة، ستتعامل مع الكائنات بشكل كبير لأنها توفر طريقة مرنة لتجميع البيانات والسلوكيات في وحدة واحدة. الكائن عبارة عن مجموعة من الخصائص (Properties)، حيث تأخذ كل خاصية زوجًا من اسم وقيمة. يمكن أن تكون القيمة نصوصًا، أرقامًا، مصفوفات، دوال، أو حتى كائنات أخرى.

---

إنشاء الكائنات واستخدام الخصائص

1. إنشاء كائن بسيط:

لإنشاء كائن في JavaScript، نستخدم الأقواس {}. داخل هذه الأقواس، نقوم بتعريف الخصائص بصيغة اسم الخاصية: القيمة.

const car = {
  brand: "Toyota",
  model: "Corolla",
  year: 2023
};

في المثال أعلاه:

• الخاصية brand تحتوي على قيمة نصية "Toyota".
• الخاصية model تحتوي على قيمة "Corolla".
• الخاصية year تحتوي على قيمة رقمية 2023.

2. الوصول إلى خصائص الكائن:

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

• النقطة (Dot Notation): console.log(car.brand); // Toyota
• الأقواس المربعة (Bracket Notation): console.log(car["model"]); // Corolla

3. إنشاء كائن فارغ وإضافة الخصائص لاحقًا:

يمكنك إنشاء كائن فارغ وإضافة خصائص إليه بعد إنشائه:

const person = {};
person.name = "Ahmed";
person.age = 30;

console.log(person); // { name: "Ahmed", age: 30 }

4. إنشاء كائن باستخدام Object Constructor:

يمكنك استخدام البنية المدمجة Object لإنشاء كائن جديد:

const user = new Object();
user.username = "Ali";
user.isAdmin = true;

console.log(user); // { username: "Ali", isAdmin: true }

---

إضافة وتعديل الخصائص داخل الكائنات

1. إضافة خصائص جديدة:

لإضافة خاصية جديدة إلى كائن موجود، يمكنك ببساطة تعيين اسم الخاصية والقيمة:

car.color = "White";
console.log(car.color); // White

2. تعديل قيمة خاصية:

تُستخدم نفس الطريقة لتعديل قيمة خاصية موجودة:

car.year = 2024;
console.log(car.year); // 2024

3. حذف خصائص:

لإزالة خاصية من كائن، استخدم الكلمة المفتاحية delete:

delete car.model;
console.log(car.model); // undefined

---

إضافة الدوال داخل الكائنات (Methods)

الكائنات ليست مجرد بيانات ثابتة، بل يمكن أن تحتوي أيضًا على دوال تُسمى “أساليب” (Methods). هذه الدوال تضيف سلوكًا للكائن وتعمل على تسهيل التعامل مع بياناته.

1. إضافة دالة إلى كائن:

const user = {
  name: "Sara",
  greet: function () {
    return `Hello, my name is ${this.name}`;
  }
};

console.log(user.greet()); // Hello, my name is Sara

• الكلمة المفتاحية this تُشير إلى الكائن نفسه.

2. تعريف الدوال باستخدام طريقة مختصرة:

ابتداءً من ES6، يمكننا تعريف الأساليب بصيغة مختصرة:

const calculator = {
  add(a, b) {
    return a + b;
  }
};

console.log(calculator.add(5, 3)); // 8

3. ملاحظات حول Arrow Functions داخل الكائنات:

عند استخدام دوال السهم (Arrow Functions)، فإن الكلمة المفتاحية this لا تُشير إلى الكائن، بل تأخذ السياق من المستوى الأعلى:

const obj = {
  value: 10,
  getValue: () => {
    return this.value; // undefined
  }
};

console.log(obj.getValue());

---

Destructuring لتفكيك الكائنات

Destructuring هي تقنية قوية لاستخراج الخصائص من الكائنات بسهولة في متغيرات مستقلة.

1. التفكيك الأساسي:

const book = {
  title: "JavaScript Guide",
  author: "John",
  year: 2022
};

const { title, author } = book;
console.log(title); // JavaScript Guide
console.log(author); // John

2. إعادة تسمية الخصائص أثناء التفكيك:

const { title: bookTitle, year: publicationYear } = book;
console.log(bookTitle); // JavaScript Guide
console.log(publicationYear); // 2022

3. استخدام القيم الافتراضية:

إذا كانت الخاصية غير موجودة، يمكنك تعيين قيمة افتراضية:

const { publisher = "Unknown" } = book;
console.log(publisher); // Unknown

---

استخدام الكائنات في التطبيقات العملية

1. تخزين بيانات معقدة:

const school = {
  name: "Modern Academy",
  location: "Cairo",
  students: [
    { name: "Ali", grade: "A" },
    { name: "Sara", grade: "B" }
  ]
};

console.log(school.students[0].name); // Ali

2. إدارة واجهات برمجية (API Responses):

const response = {
  status: 200,
  data: {
    user: {
      id: 101,
      name: "Ahmed"
    }
  }
};

const { data: { user } } = response;
console.log(user.name); // Ahmed

---

خاتمة: أهمية الكائنات في JavaScript

الكائنات ليست مجرد وسيلة لتخزين البيانات، بل هي أساس لتطوير برامج وتطبيقات معقدة في JavaScript. من خلال فهم الكائنات واستخدامها بفعالية، يمكنك إنشاء تطبيقات ديناميكية ومنظمة وقابلة للتوسيع. مع التقدم في تعلم اللغة، ستكتشف أن الكائنات تُشكل العمود الفقري للعديد من المزايا الحديثة مثل البرمجة الكائنية (OOP) وإدارة الحالة في تطبيقات الويب.