Objects

Course 1 · Ch 7

Objects: Properties, Methods, and Dot/Bracket Access

Grouping related data and behaviour together — the other major data structure alongside arrays

Chapter 6 covered arrays — ordered lists of values. Objects solve a different problem: grouping named pieces of related data together. Chapter 5's counter example already used one briefly; this chapter covers objects properly, including how methods and this actually work.

Creating an Object and Reading Properties

const person = {
  name: "Philip",
  age: 34,
  isStudent: true
};

console.log(person.name);    // "Philip" — dot notation
console.log(person["age"]);  // 34 — bracket notation

An object is a set of key: value pairs, wrapped in curly braces. Each key (also called a property name) maps to a value, which can be of any type — string, number, boolean, even another object or array.

Dot Notation vs Bracket Notation

const field = "age";

console.log(person.field);     // undefined — looks for a literal property called "field"
console.log(person[field]);   // 34 — looks up the property named by the variable's VALUE

Dot notation (person.name) is shorter and used by default. Bracket notation (person["name"]) is required whenever the property name is stored in a variable, contains spaces, or is computed at runtime — dot notation cannot do any of that.

person.field vs person[field] are not the same thing

person.field always looks for a property literally named field. person[field] looks up whatever string is currently stored in the field variable. Mixing these up is a common source of silent undefined results.

Adding, Updating, and Deleting Properties

person.city = "London";     // adds a new property
person.age = 35;             // updates an existing one
delete person.isStudent;   // removes a property entirely

console.log(person);   // { name: "Philip", age: 35, city: "London" }

Properties can be added or changed after creation simply by assigning to them — even though person is declared with const, exactly the same rule that allowed array contents to change in Chapter 6. const only locks the variable binding itself, never the object's internal contents.

Methods — Functions Stored as Properties

const person = {
  name: "Philip",
  greet: function() {
    console.log(`Hi, I'm ${this.name}`);
  }
};

person.greet();   // "Hi, I'm Philip"

A property whose value is a function is called a method. Inside a method, this refers to the object the method was called on — person in this case — which is how greet can reach person.name without naming person directly. This is exactly the regular-function behaviour flagged in Chapter 5: methods should use the function keyword, not arrow syntax, specifically so this works.

Nested Objects and Arrays of Objects

const user = {
  name: "Philip",
  address: { city: "London", postcode: "E1 6AN" }
};

console.log(user.address.city);   // "London" — chain dots to go deeper

const products = [
  { name: "Book", price: 12 },
  { name: "Pen", price: 2 }
];

console.log(products[0].name);   // "Book"

Objects and arrays nest freely inside each other. products here is the same array-of-objects shape used in Chapter 6's cart challenge — it's worth recognising this pattern, since it's extremely common for representing real-world lists of records (rows from a database, items in a cart, entries in a form).

Looping Over an Object's Properties

const scores = { maths: 88, science: 72, art: 95 };

for (const subject in scores) {
  console.log(`${subject}: ${scores[subject]}`);
}
// maths: 88
// science: 72
// art: 95

for...in (introduced in Chapter 4 for arrays, where it's best avoided) is the natural fit for objects — it loops over each property name, which can then be used with bracket notation to read the matching value. Notice bracket notation is required here, since subject is a variable holding the property name.

Object.keys, Object.values, Object.entries

Object.keys(scores) returns ["maths", "science", "art"] as a real array — meaning map/filter/reduce from Chapter 6 can then be used on an object's data. This combination is covered properly in Intermediate Chapter 1.

Coding Challenges

Challenge 1

Create an object book with properties title, author, and pages. Log each property using dot notation, then log the same three values again using bracket notation with a variable holding the property name.

📄 View solution

Challenge 2

Create an object car with properties make, model, and a method describe() that uses this to log a sentence combining make and model. Call describe(), then add a new property year to car afterwards and call describe() again, updating it to include the year.

📄 View solution

Challenge 3

Create an object inventory where each key is an item name and each value is a quantity (e.g. apples: 10, bananas: 5). Use a for...in loop to log every item with its quantity, and keep a running total of all quantities combined, logging the total at the end.

📄 View solution

Chapter 7 Quick Reference

Object literal: { key: value, key2: value2 }
Dot notation (obj.key) — short, but key must be a literal name
Bracket notation (obj[expr]) — required for variable/dynamic/spaced keys
const objects are still mutable — properties can be added, changed, or deleted
Methods are functions stored as properties; use this inside them to reference the object
Use function, not arrow syntax, for methods — arrow functions don't get their own this (Ch 5)
for...in loops over an object's property names
Next chapter: the DOM — selecting and manipulating real HTML elements with JavaScript