خصائص الكائنات في JavaScript: الوصول والتعديل والإضافة والحذف خطوة بخطوة

بعد إنشاء Object، الخطوة المهمة هي التعامل مع خصائصه: كيف نقرأ القيمة؟ كيف نعدّلها؟ وكيف نضيف أو نحذف خاصية؟

إذا كنت تبحث عن شرح خصائص object في JavaScript أو الفرق بين dot و bracket notation أو كيف أعدل بيانات الكائن، فهذا الدرس يشرحها بأمثلة عملية واضحة.

ما هي Properties في JavaScript Object؟

الخاصية هي زوج من key: value داخل الكائن. مثال: name: 'Ali' يعني المفتاح name وقيمته 'Ali'.

قاعدة بسيطة: Object = مجموعة خصائص، وكل خاصية يمكن قراءتها أو تعديلها أو إضافتها.

1) الوصول للخصائص باستخدام Dot Notation

const user = { name: 'أحمد', age: 25 };

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

ماذا يفعل هذا الكود؟ يقرأ قيم الخصائص مباشرة عبر النقطة.

النتيجة المتوقعة: الوصول السريع لبيانات الكائن.

خطأ شائع: كتابة اسم خاصية غير موجودة فتكون النتيجة undefined.

2) الوصول باستخدام Bracket Notation

const user = { name: 'أحمد', age: 25 };

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

ماذا يفعل هذا الكود؟ يقرأ نفس الخصائص لكن بصيغة الأقواس.

النتيجة المتوقعة: نفس نتيجة dot notation.

خطأ شائع: نسيان علامات الاقتباس حول المفتاح النصي داخل brackets.

3) متى نحتاج Bracket Notation؟ (مفتاح ديناميكي)

const user = { name: 'Sara', age: 22 };
const key = 'name';

console.log(user[key]); // Sara

ماذا يفعل هذا الكود؟ يصل للخاصية عبر متغير يحمل اسم المفتاح.

النتيجة المتوقعة: مرونة أكبر في الوصول الديناميكي.

خطأ شائع: استخدام user.key بدل user[key] في هذا السيناريو.

4) تعديل وإضافة خصائص

const user = { name: 'أحمد', age: 25 };

user.age = 26;        // تعديل خاصية موجودة
user.city = 'الرياض'; // إضافة خاصية جديدة

console.log(user);

ماذا يفعل هذا الكود؟ يغير قيمة موجودة ويضيف قيمة جديدة للكائن.

النتيجة المتوقعة: الكائن يتحدث مباشرة بالقيم الجديدة.

خطأ شائع: الاعتقاد أن const تمنع تعديل الخصائص الداخلية.

5) حذف خاصية من الكائن

const user = { name: 'أحمد', age: 25, city: 'الرياض' };

delete user.city;
console.log(user); // { name: 'أحمد', age: 25 }

ماذا يفعل هذا الكود؟ يحذف خاصية محددة نهائياً من الكائن.

النتيجة المتوقعة: الخاصية المحذوفة لم تعد موجودة.

خطأ شائع: استخدام delete على متغير كامل بدل خاصية داخل object.

6) الوصول الآمن لخاصية غير مؤكدة (Optional Chaining)

const user = { profile: { email: 'a@example.com' } };

console.log(user.profile?.email); // a@example.com
console.log(user.account?.email); // undefined (بدون خطأ)

ماذا يفعل هذا الكود؟ يتجنب الأخطاء عند الوصول لخصائص قد لا تكون موجودة.

النتيجة المتوقعة: رجوع undefined بأمان بدل crash.

خطأ شائع: الوصول المباشر لخصائص متداخلة غير مضمونة فيسبب خطأ runtime.

Story قصيرة: لماذا ظهر undefined رغم وجود البيانات؟

مبتدئ كتب user.Name بحرف كبير N بدل user.name. ظهرت undefined وظن أن object فارغ. المشكلة كانت فقط في حساسية الأحرف.

const product = { title: 'Laptop', price: 900 };

console.log(product.title);
product.price = 850;
console.log(product.price);

Checklist سريعة قبل التعامل مع خصائص Object

• هل اسم الخاصية صحيح ومطابق لحالة الأحرف؟
• هل المفتاح ثابت (dot) أم ديناميكي (bracket)؟
• هل الخاصية موجودة فعلاً قبل القراءة؟
• هل تريد تعديل القيمة أم إضافة خاصية جديدة؟

روابط المتابعة بعد هذا الدرس

الخطوة التالية مباشرة: دوال الكائنات Methods في JavaScript ثم مقدمة Strings في JavaScript.

الأسئلة الشائعة — FAQ (أسئلة بحثية شائعة)

كيف أصل إلى خصائص Object في JavaScript؟

باستخدام object.property أو object['property'].

ما الفرق بين dot و bracket notation؟

dot للمفاتيح الثابتة، bracket للمفاتيح الديناميكية أو المفاتيح الخاصة.

هل يمكن تعديل object معرف بـ const؟

نعم، يمكنك تعديل الخصائص الداخلية، لكن لا يمكنك إعادة تعيين الكائن بالكامل.

كيف أحذف خاصية من object؟

باستخدام delete object.property.

كيف أتجنب أخطاء الوصول للخصائص المتداخلة؟

استخدم optional chaining مثل obj?.a?.b عند الحاجة.

للمتابعة مباشرة: ابدأ بدرس دوال الكائنات Methods في JavaScript ثم انتقل إلى مقدمة Strings في JavaScript.