פרק 8: אובייקטים (Objects) ב-JavaScript

1. מה זה אובייקט?

אובייקט הוא מבנה נתונים המאפשר לאחסן נתונים בצורה מאורגנת ומובנית. אובייקטים בנויים מזוגות של מפתחות (keys) ו-ערכים (values), כלומר, כל פריט במבנה האובייקט מיוצג על ידי שם (key) וערך המתאים לאותו שם.

אובייקטים הם אחד ממבני הנתונים החשובים ביותר ב-JavaScript, והם מאפשרים לך לארגן את המידע בצורה נוחה וקלה לגישה.

2. איך נראה אובייקט?

אובייקט ב-JavaScript נוצר באמצעות סוגריים מסולסלים {}, ומכיל זוגות של מפתחות וערכים מופרדים בפסיק. המפתח הוא מחרוזת או משתנה, והערך יכול להיות כל סוג של נתון – מספר, מחרוזת, בוליאני, פונקציה או אובייקט אחר.

דוגמה בסיסית:

let person = {
    name: "Alice",
    age: 30,
    city: "New York"
};

הסבר:

• name, age, ו-city הם המפתחות של האובייקט.
• "Alice", 30, ו-"New York" הם הערכים המותאמים לאותם מפתחות.

3. גישה לערכים באובייקט

ישנן שתי דרכים עיקריות לגשת לערכים באובייקט:

1. גישה באמצעות נקודה (.)
2. גישה באמצעות סוגריים מרובעים ([])

גישה באמצעות נקודה:

let person = {
    name: "Alice",
    age: 30,
    city: "New York"
};

console.log(person.name); // מציג "Alice"
console.log(person.age);  // מציג 30

גישה באמצעות סוגריים מרובעים:

console.log(person["name"]); // מציג "Alice"
console.log(person["city"]); // מציג "New York"

הסבר:

• בגישה עם הנקודה, כותבים את שם המפתח מיד אחרי שם האובייקט.
• בגישה עם סוגריים מרובעים, שמים את שם המפתח בתוך סוגריים ומחרוזת.

4. הוספה ושינוי של ערכים באובייקט

אפשר להוסיף מפתחות חדשים לאובייקט או לשנות ערכים קיימים בקלות.

דוגמה להוספה:

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

person.city = "New York"; // הוספת מפתח חדש
console.log(person.city); // מציג "New York"

דוגמה לשינוי:

person.age = 31; // שינוי הערך הקיים
console.log(person.age); // מציג 31

הסבר:

• הוספת מפתח חדש מתבצעת כמו גישה רגילה לערך, ואם המפתח לא קיים, הוא מתווסף אוטומטית.
• שינוי ערך קיים נעשה על ידי השמה של ערך חדש למפתח.

5. מחיקת ערכים באובייקט

ניתן למחוק מפתח וערך באובייקט באמצעות המילה השמורה delete.

דוגמה:

delete person.city; // מחיקת המפתח "city"
console.log(person.city); // מציג undefined

הסבר:

• delete מוחק את המפתח מהאובייקט. לאחר מכן, הגישה למפתח תחזיר undefined כי הוא כבר לא קיים.

6. לולאה על מפתחות אובייקט עם for...in

כדי לעבור על כל המפתחות של אובייקט, משתמשים בלולאת for...in. הלולאה עוברת על כל המפתחות של האובייקט ומאפשרת לך לגשת לערכים שלהם.

דוגמה:

let person = {
    name: "Alice",
    age: 30,
    city: "New York"
};

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

הסבר:

• לולאת for...in עוברת על כל מפתח באובייקט person.
• הפלט יהיה:

name: Alice
age: 30
city: New York

7. אובייקטים עם פונקציות (Methods)

אובייקטים יכולים להכיל גם פונקציות בתור ערכים. פונקציות בתוך אובייקט נקראות שיטות (Methods), והן יכולות לבצע פעולות על המידע באובייקט.

דוגמה:

let person = {
    name: "Alice",
    age: 30,
    city: "New York",
    greet: function() {
        console.log("Hello, my name is " + this.name);
    }
};

person.greet(); // מציג "Hello, my name is Alice"

הסבר:

• השיטה greet היא פונקציה שמדפיסה הודעה המשלבת את שם האדם (this.name מתייחס לאובייקט הנוכחי).
• this משמשת לגישה למאפיינים של האובייקט מתוך הפונקציה.

8. בדיקה אם מפתח קיים באובייקט

ניתן לבדוק אם מפתח קיים באובייקט באמצעות האופרטור in או הפונקציה hasOwnProperty.

דוגמה עם in:

console.log("age" in person);   // true
console.log("salary" in person); // false

דוגמה עם hasOwnProperty:

console.log(person.hasOwnProperty("city")); // true
console.log(person.hasOwnProperty("salary")); // false

הסבר:

• in בודק אם מפתח קיים באובייקט, גם אם הוא ירש אותו מאובייקט אחר.
• hasOwnProperty בודק אם מפתח הוא חלק מהאובייקט עצמו, ולא הועבר בירושה.

9. אובייקטים בתוך אובייקטים (Nested Objects)

ניתן לאחסן אובייקטים בתוך אובייקטים אחרים, ובכך ליצור מבני נתונים מורכבים יותר.

דוגמה:

let person = {
    name: "Alice",
    age: 30,
    address: {
        street: "123 Main St",
        city: "New York",
        country: "USA"
    }
};

console.log(person.address.city); // מציג "New York"

הסבר:

• האובייקט address הוא אובייקט מקונן בתוך האובייקט person.
• ניתן לגשת לערכים באובייקט המקונן באמצעות הנקודה, כמו person.address.city.

10. שימוש ב-Object.keys() ו-Object.values()

פונקציות אלו מאפשרות לקבל את כל המפתחות או הערכים באובייקט כמערך.

דוגמה ל-Object.keys():

let person = {
    name: "Alice",
    age: 30,
    city: "New York"
};

let keys = Object.keys(person);
console.log(keys); // מציג ["name", "age", "city"]

דוגמה ל-Object.values():

let values = Object.values(person);
console.log(values); // מציג ["Alice", 30, "New York"]

הסבר:

• Object.keys() מחזירה מערך של כל המפתחות באובייקט.
• Object.values() מחזירה מערך של כל הערכים באובייקט.

דוגמה מלאה: אובייקט עם שיטות ומבנים מקוננים

נבנה דוגמה שמדגימה אובייקט מורכב עם שיטה פנימית ומבנה מקונן:

let person = {
    name: "Alice",
    age: 30,
    address: {
        street: "123 Main St",
        city: "New York",
        country: "USA"
    },
    greet: function() {
        console.log("Hello, my name is " + this.name + " and I live in " + this.address.city);
    }
};

person.greet(); // מציג "Hello, my name is Alice and I live in New York"

הסבר:

• האובייקט מכיל גם מאפיינים בסיסיים (name, age) וגם אובייקט מקונן (address).
• השיטה greet משלבת מידע ממאפיינים שונים כדי ליצור הודעה מורכבת.
• this.address.city מאפשר גישה למאפיין מתוך האובייקט המקונן.

סיכום

בפרק זה למדנו על:

1. איך ליצור אובייקטים ב-JavaScript ואיך לגשת לערכים שלהם.
2. איך להוסיף, לשנות ולמחוק מפתחות באובייקטים.
3. איך לעבור על מפתחות באובייקט בעזרת לולאת for...in.
4. יצירת פונקציות בתוך אובייקטים ושימוש ב-this כדי לגשת למאפיינים.
5. איך לבדוק אם מפתח קיים באובייקט.
6. שימוש באובייקטים מקוננים ודרכים לגשת אליהם.
7. שימוש ב-Object.keys() ו-Object.values() כדי להפיק רשימות של מפתחות וערכים מאובייקט.

בפרק הבא נלמד על Functions (פונקציות) וכיצד לכתוב ולהשתמש בהן ב-JavaScript.