الكائنات فى جافا سكريبت | JavaScript Objects

JavaScript Objects – فى هذا الفصل سيتم شرح الكائنات وكيفية إنشائها و استخدامها بالتفصيل، مع الأمثلة التوضيحية.

الكائنات فى جافا سكريبت – JavaScript Objects

أولًا: ما هو الكائن؟  الكائن عبارة عن مجموعة من الخصائص properties، والخاصية هي ارتباط بين اسم (أو مفتاح) وقيمة key & value. يمكن أن تكون قيمة الخاصية دالة function، وفي هذه الحالة تُعرف الخاصية بالـ method.

مثال على كائن JavaScript:

const userInfo = {
    name:"Hamed", 
    gender:"male", 
    age:"30"
}; 

فى المثال السابق، الـ userInfo هو كائن يخزن المعلومات والقيم على هيئة key (مثل name) و value (مثل Hamed) وهكذا.

إعلان كائن JavaScript

بناء الجملة للإعلان عن كائن بخصائ، كالتالى:

const yourObjectName = {
    key1: value1,
    key2: value2,
    key3: value3,
    // ... etc 
}

لإنشاء كائن بخصائص ، يمكنك استخدام المفتاح: القيمة (key: value) داخل الأقواس المتعرجة {}. على سبيل المثال ، يؤدي ما يلي إلى إنشاء كائن student جديد:

const student = {name: "Mohamed", class: 3, age: 16};

يمكنك أيضًا تحديد كائن في أسطر متعددة، كالتالى:

const student = {
    name: "Mohamed",
    class: 3,
    age: 16
};

كيفية الوصول إلى خصائص الكائن؟

للوصول إلى خاصية كائن ما ، يمكنك استخدام واحدة من اثنتين:

1. Dot Notation.
2. Bracket Notation.

Dot Notation .1 ( . )

يوضح بناء الجملة التالى كيفية استخدام طريقة الـ dot notation للوصول إلى خاصية كائن:

yourObjectName.key;

على سبيل المثال:

const car = {
    name: "BMW",
    color: "Black"
};

console.log(car.name); // Outputs: BMW

2. Bracket Notation ( [] )

يوضح بناء الجملة التالى كيفية استخدام طريقة الـ bracket notation للوصول إلى خاصية كائن:

yourObjectName["key"];

على سبيل المثال:

const car = {
    name: "BMW",
    color: "Black"
};

console.log(car["color"]); // Outputs: Black

ملاحظة: عندما يحتوي اسم الخاصية على مسافات ، فأنت بحاجة إلى وضعه داخل علامات الاقتباس ‘ ‘ ، كالتالى:

const person = {
    name: "Ali",
    'Work address': "Egypt",
    age: 30
};

 فى المثال السابق، يحتوي كائن person على “Work address” كخاصية. للوصول إلى هذه الخاصية، تحتاج إلى استخدام notation يشبه المصفوفة، كالتالى:

person['Work address'];

تغيير قيمة الخاصية

لتغيير قيمة خاصية ما ، يمكنك استخدام عامل التعيين (=) ثم القيمة الجديدة. على سبيل المثال:

let person = {
    name: "Ali",
    age: 30
};

console.log(person['name']); // Outputs = Ali

person['name'] = 'Esam';

console.log(person['name']); // Outputs = Esam

إضافة خاصية جديدة إلى كائن

يمكنك إضافة خاصية إلى كائن بعد إنشاء الكائن. كالتالى:

let person = {
    name: "Ali",
    age: 30
};

person['gender'] = 'Male';

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

لحذف خاصية كائن ما ، يمكنك استخدام عامل الحذف delete، كالتالى:

let person = {
    name: "Ali",
    age: 30
};

delete person['name'];

console.log(person['name']); // Outputs = undefined

فى المثال السابق، بعد ما حذفت خاصية name، حاولت أوصل إلى الخاصية مرة أخرى ، لكن المخرجات كانت undefined.

الكائنات المتداخلة – Nested Objects

يمكن أن يحتوي الكائن أيضًا على كائن آخر. على سبيل المثال:

// Nested Object
const myMother = {
    name: "Eman Mohamed",
    age: 43,
    children: {
        firstChild: "Mona", 
        secondChild: "Hamed", 
        thirdChild: "Alaa", 
    }
};

// To access on myMother
console.log(myMother["name"]); // Outputs = Eman Mohamed

// To access on children of myMother
console.log(myMother["children"]["secondChild"]); // Outputs = Hamed

// ---- or -----
console.log(myMother.children.secondChild); // Outputs = Hamed

دوال الكائن

يمكن أن يحتوي الكائن أيضًا على دالة function. كالتالى:

let userInfo = {
    name:"Hamed", 
    gender:"male", 
    age:"30"
}; 

userInfo.message = function () {
    // Put here anything you want...
    console.log('Hello User!'); // Outputs = Hello User!
}

أو يمكنك إستخدام الطريقة المختصرة، كالتالى:

const userInfo = {
    name:"Hamed", 
    gender:"male", 
    age:"30",
    message: function () {
       // Put here anything you want...
       console.log('Hello User!'); 
    }
}; 

userInfo.message(); // Outputs = Hello User!