אובייקטים ב-JavaScript: מאפיינים, מתודות ואיך משתמשים בהם

אובייקט הוא שק של ערכים עם שמות

מערך מקבץ ערכים לפי מיקום. אובייקט מקבץ אותם לפי שם. כשלדבר שאתם ממדלים יש חלקים עם תוויות, משתמש עם שם וגיל, בקשה עם method ו-URL, השתמשו באובייקט.

הדרך הקצרה ביותר ליצור אחד היא ליטרל של אובייקט:

const user = {
  name: "Ada",
  age: 30,
  isAdmin: false,
};

console.log(user);

כל רשומה היא זוג key: value. מאחורי הקלעים המפתחות הם מחרוזות (המירכאות אופציונליות עבור מזהים תקינים כמו name). הערכים יכולים להיות כל דבר ש-JavaScript יודעת לייצג: מספרים, מחרוזות, ערכים בוליאניים, מערכים, פונקציות, ואפילו אובייקטים אחרים.

פסיק אחרי הרשומה האחרונה זה בסדר. רוב הצוותים משאירים אותו: זה שומר על diffs נקיים כשמוסיפים מאפיין חדש בהמשך.

קריאה וכתיבה של מאפיינים

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

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

console.log(user.name);
console.log(user["age"]);

user.age = 31;
user["name"] = "Ada Lovelace";

console.log(user);

סימון נקודה מסודר יותר, ובו תשתמשו כברירת מחדל. סימון סוגריים מרובעים מוכיח את עצמו כשהמפתח שמור במשתנה, או כשהמפתח אינו מזהה תקין:

const user = { "first name": "Ada", age: 30 };
const field = "age";

console.log(user["first name"]);  // dot notation can't do this
console.log(user[field]);         // key from a variable

קריאה של מאפיין שלא קיים מחזירה undefined, בלי שגיאה:

const user = { name: "Ada" };
console.log(user.email);  // undefined

זה יכול להסתיר בשקט שגיאות הקלדה. אם אתם רוצים כישלון רועש, תצטרכו לבדוק את זה במפורש.

הוספה ומחיקה של מאפיינים

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

const user = { name: "Ada" };

user.age = 30;
user["email"] = "ada@example.com";

console.log(user);

ולהסיר אותם עם delete:

const user = { name: "Ada", age: 30, email: "ada@example.com" };

delete user.email;

console.log(user);
console.log("email" in user);  // false

delete הוא אחד האופרטורים שלא תשתמשו בהם כל יום, אבל כשצריך להיפטר ממפתח לגמרי (ולא רק להציב בו undefined), זה הכלי הנכון. הצבה של user.email = undefined משאירה את המפתח: "email" in user עדיין יחזיר true.

בדיקה אם מאפיין קיים

שלוש דרכים, לכל אחת משמעות מעט שונה:

const user = { name: "Ada", email: undefined };

console.log("name" in user);                // true
console.log("email" in user);               // true - key exists, value is undefined
console.log(Object.hasOwn(user, "name"));   // true
console.log(user.name !== undefined);       // true
console.log(user.email !== undefined);      // false - misleading!

• in בודק אם המפתח קיים, כולל מפתחות שעברו בירושה משרשרת ה-prototype.
• Object.hasOwn(obj, key) בודק רק את המפתחות העצמיים של האובייקט. השתמשו בו כשאתם רוצים להתעלם ממה שעבר בירושה. הוא מחליף את הקריאה הישנה hasOwnProperty.
• obj.key !== undefined עובד ברוב המקרים, אבל משקר כשמאפיין הוגדר במפורש כ-undefined.

כשאתם לא בטוחים, בחרו ב-Object.hasOwn: הוא עושה את מה שכנראה התכוונתם.

מתודות: פונקציות שחיות על אובייקטים

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

const user = {
  name: "Ada",
  greet() {
    return `Hello, I'm ${this.name}`;
  },
};

console.log(user.greet());

this בתוך מתודה מתייחס לאובייקט שעליו המתודה נקראה, במקרה הזה user. כך greet יודעת של מי השם שבו להשתמש.

דבר אחד שכדאי לשים לב אליו: לפונקציות חץ אין this משלהן, ולכן הן הבחירה הלא נכונה למתודות שצריכות לקרוא מאפיינים אחרים של האובייקט:

const user = {
  name: "Ada",
  greet: () => `Hello, I'm ${this.name}`,  // this is NOT user
};

console.log(user.greet());  // Hello, I'm undefined

השתמשו בתחביר המתודה המקוצר (greet() { ... }) לכל דבר שנוגע ב-this. פונקציות חץ מצוינות ל-callbacks, לא למתודות של אובייקטים.

אובייקטים מקוננים

גם ערכים יכולים להיות אובייקטים, לכל עומק:

const user = {
  name: "Ada",
  address: {
    city: "London",
    postcode: "NW1",
  },
  tags: ["admin", "early-adopter"],
};

console.log(user.address.city);
console.log(user.tags[0]);

user.address.city = "Cambridge";
console.log(user.address);

קריאה של מאפיין מקונן עובדת בשרשור: user.address.city. המלכודת: אם אחד השלבים בדרך הוא null או undefined, תקבלו TypeError:

console.log(user.profile.city);
// TypeError: Cannot read properties of undefined (reading 'city')

Optional chaining (user.profile?.city) הוא הפתרון המודרני: הוא מחזיר undefined במקום לזרוק שגיאה כשחוליה חסרה. יש על זה עמוד נפרד בהמשך הפרק.

לולאה על אובייקט

כשצריך לעבור על כל מפתח באובייקט, המשפחה Object.keys, Object.values ו-Object.entries היא מה שאתם צריכים:

const scores = { ada: 95, boris: 82, rosa: 91 };

for (const name of Object.keys(scores)) {
  console.log(name);
}

for (const score of Object.values(scores)) {
  console.log(score);
}

for (const [name, score] of Object.entries(scores)) {
  console.log(`${name}: ${score}`);
}

Object.entries הכי שימושי: הוא נותן לכם גם את המפתח וגם את הערך בבת אחת, ומשתלב יפה עם פירוק מערכים.

יש גם לולאת for...in, אבל היא עוברת גם על מאפיינים שעברו בירושה, ובדרך כלל זה לא מה שרוצים:

for (const key in scores) {
  console.log(key);  // works, but includes inherited keys
}

העדיפו Object.keys / Object.entries, אלא אם אתם רוצים במפורש גם מאפיינים שעברו בירושה.

תחביר מקוצר ששווה להכיר

שתי פיסות של סוכר תחבירי שתראו בכל מקום:

const name = "Ada";
const age = 30;

// Property shorthand: { name: name, age: age }
const user = { name, age };

console.log(user);

// Computed keys: the key comes from an expression
const field = "email";
const update = {
  [field]: "ada@example.com",
  [`${field}Verified`]: true,
};

console.log(update);

קיצור המאפיינים נכנס לפעולה כששם המשתנה תואם למפתח. מפתחות מחושבים (הצורה [expr]) מאפשרים לבנות שמות מאפיינים באופן דינמי: שימושי כשכותבים פונקציות שמעדכנות שדה לפי שם.

שוויון בין אובייקטים נבדק לפי הפניה

זה מפיל כמעט את כולם לפחות פעם אחת:

const a = { x: 1 };
const b = { x: 1 };
const c = a;

console.log(a === b);  // false - different objects
console.log(a === c);  // true  - same object

=== על אובייקטים בודק אם שני הצדדים מתייחסים לאותו אובייקט בזיכרון, לא אם יש להם אותו תוכן. שני אובייקטים עם מאפיינים זהים הם עדיין שני אובייקטים שונים.

כדי לבדוק "האם יש להם אותו מבנה?" תצטרכו להשוות שדות ידנית, או להשתמש בפונקציית עזר להשוואה עמוקה. JSON.stringify(a) === JSON.stringify(b) היא בדיקה מהירה ומלוכלכת שעובדת לנתונים פשוטים, אבל נכשלת על כל דבר עם פונקציות, undefined או הפניות מעגליות.

אובייקטים ניתנים לשינוי גם עם const

const נועל את המשתנה לערך אחד. הוא לא מקפיא את האובייקט שהערך מצביע עליו:

const user = { name: "Ada" };

user.name = "Boris";    // fine - mutating the object
user.age = 30;          // fine - adding a property

console.log(user);

// user = { name: "Rosa" };  // TypeError - reassigning the variable

אם אתם באמת רוצים אי-שינוי, Object.freeze(user) עוצר שינויים נוספים (באופן רדוד: אובייקטים מקוננים עדיין ניתנים לשינוי). בפועל, רוב הקוד נשען על מוסכמות ולא על Object.freeze: התייחסו לאובייקטים ב-const כ"לא להציב מחדש את הקישור הזה", וטפלו באי-שינוי ברמת התכנון.

הבא בתור: מערכים

אובייקטים ומערכים הם שתי אבני הבניין שמהן בנוי כל השאר. אובייקטים מטפלים בנתונים עם תוויות; מערכים מטפלים בנתונים מסודרים. בהמשך: איך מערכים ב-JavaScript עובדים, וקומץ המתודות (push, slice, map וחברותיהן) שעושות את רוב העבודה הקשה.