Objects In JavaScript

🎯 ما هو الكائن (Object) في JavaScript؟

الكائن (Object) هو نوع بيانات يُستخدم لتخزين مجموعة من البيانات والمعلومات المرتبطة معًا، باستخدام أزواج من مفتاح وقيمة (Key/Value).

يشبه الكائن حقيبة تحتوي على معلومات.

✅ الصيغة الأساسية:

const person = {
  name: "Ali",
  age: 25,
  isStudent: true
};

JavaScript

🔍 التوضيح:

name, age, isStudent: هي المفاتيح (keys).
"Ali", 25, true: هي القيم (values).

📦 الكائن يمكن أن يحتوي على:

نصوص
أرقام
Boolean
مصفوفات
كائنات أخرى
دوال (Functions)

🧠 متى تستخدم الكائنات؟

عندما تحتاج إلى تمثيل شيء يحتوي على مواصفات متعددة (مثل مستخدم، سيارة، منتج…).
عندما تحتاج إلى تجميع بيانات مرتبطة.
عند استخدام APIs (مثل جلب بيانات JSON).

📌 الوصول إلى القيم:

1. باستخدام النقطة:

console.log(person.name); // "Ali"

JavaScript

باستخدام الأقواس:

console.log(person["age"]); // 25

JavaScript

🛠️ تعديل القيم:

person.age = 30;
person["name"] = "Omar";

JavaScript

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

person.country = "Egypt";

JavaScript

❌ حذف خاصية:

delete person.isStudent;

JavaScript

🧪 مثال مع دالة داخل كائن:

const car = {
  brand: "Toyota",
  model: "Camry",
  year: 2022,
  start: function() {
    console.log("The car started.");
  }
};

car.start(); // The car started.

JavaScript

🔁 التكرار على خصائص كائن:

for (let key in person) {
  console.log(key + ": " + person[key]);
}

JavaScript

📥 إنشاء كائن باستخدام Object:

const user = new Object();
user.name = "Sarah";
user.role = "Admin";

JavaScript

📦 مثال عملي:

const product = {
  id: 101,
  name: "Laptop",
  price: 1500,
  specs: {
    ram: "16GB",
    cpu: "Intel i7"
  }
};

console.log(product.specs.cpu); // Intel i7

JavaScript

لنفهم الفرق بين Dot Notation و Bracket Notation في JavaScript عند التعامل مع الكائنات.

📌 أولًا: ما هما؟

Dot Notation (.): الطريقة الأكثر استخدامًا للوصول إلى قيمة خاصية (property) من كائن.
Bracket Notation (["key"]): طريقة بديلة تُستخدم عندما لا يمكنك استخدام النقطة.

✅ 1. Dot Notation

💡 الصيغة:

object.key

JavaScript

🧪 مثال:

const user = {
  name: "Ali",
  age: 30
};

console.log(user.name); // "Ali"
console.log(user.age);  // 30

JavaScript

✅ متى تستخدمها؟

عندما يكون اسم الخاصية مكونًا صالحًا كـ identifier (بدون مسافات، ولا يبدأ برقم، ولا يحتوي رموز غريبة).
عندما تعرف اسم الخاصية مسبقًا.

✅ 2. Bracket Notation

💡 الصيغة:

object["key"]

JavaScript

const user = {
  name: "Ali",
  age: 30,
  "home address": "Cairo"
};

console.log(user["name"]);         // "Ali"
console.log(user["home address"]); // "Cairo"

JavaScript

✅ متى تستخدمها؟

عندما يحتوي اسم الخاصية على مسافات أو رموز خاصة.
عندما تريد الوصول إلى الخاصية باستخدام متغيّر.
عندما يكون الاسم ناتج من المستخدم أو من API.

🔁 مثال مهم: استخدام متغيّر

const key = "age";
console.log(user[key]); // ✅ 30
console.log(user.key);  // ❌ undefined (لأن هذا يعني user["key"])

JavaScript

🚫 متى لا تعمل Dot Notation؟

const user = {
  "first name": "Ali"
};

console.log(user.first name); // ❌ Syntax Error
console.log(user["first name"]); // ✅ "Ali"

JavaScript

🧠 خلاصة المقارنة:

المقارنة	Dot Notation	Bracket Notation
الصيغة	`object.key`	`object["key"]`
تقبل المتغير؟	❌ لا	✅ نعم
تقبل فراغات؟	❌ لا	✅ نعم
تقبل رموز خاصة؟	❌ لا	✅ نعم
سهولة القراءة	✅ سهلة وواضحة	🔸 مقبولة
استخدام شائع؟	✅ نعم	✅ عند الحاجة فقط

🧪 مثال تطبيقي:

const setting = {
  theme: "dark",
  "user-role": "admin"
};

const key = "theme";

console.log(setting.theme);          // "dark" ✅ Dot
console.log(setting["user-role"]);   // "admin" ✅ Bracket
console.log(setting[key]);           // "dark" ✅ باستخدام متغير

JavaScript