JavaScript Objects

Basic

An object in JavaScript is a collection of named values, written in braces as key: value pairs, and it is the shape nearly all real data takes: one object per order, per user, per menu item, arrays of them for the collections. Python calls the same idea a dictionary; JavaScript goes further and lets objects carry behavior as well as data, functions stored as properties, called methods.

Reading and writing properties

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11

const loaf = {
  name: "sourdough",
  weight: 500,
  price: 45.5,
  vegan: true,
};

loaf.name          // dot notation, the everyday form
loaf["price"]      // brackets, for computed or quoted keys
loaf.weight = 750  // assignment writes through
loaf.origin = "Cairo"  // new property created on the spot

Dot notation is the default and reads best; brackets earn their keep when the key lives in a variable or arrives as text, loaf[field]. Reading a missing property returns undefined rather than raising, forgiving and dangerous in exactly the way arrays are, and the cure is the same: test explicitly, or reach for the chaining tools below.

Destructuring and the spread

Pulling several values out of an object is so common that the language grew a syntax for it: destructuring declares variables named after the properties, in place, with defaults allowed. Its partner, spread, expands an object's properties into a new one, which is how objects get copied and updated without being mutated, the idiom behind nearly every state update in modern code.

1
2
3
4
5
6

const { name, price, discount = 0 } = loaf;
// name === "sourdough", price === 45.5, discount === 0

// spread: a new object, the old one untouched
const priced = { ...loaf, price: 49 };
// priced.price === 49, loaf.price still 45.5

Methods: behavior as a property

A property whose value is a function is a method, callable with dot notation, and inside a regular method the this keyword refers to the object the method was called on. That last sentence carries the famous complexity of this, and the practical summary for everyday code is short: define methods with the shorthand syntax, call them as obj.method(), and this is the object you expect. Arrow functions do not bind their own this, which makes them wrong as object methods and right inside callbacks, one distinction worth carrying forward.

 1
 2
 3
 4
 5
 6
 7
 8
 9
10

const counter = {
  count: 0,
  increment() {
    this.count += 1;
    return this.count;
  },
  describe() {
    return `The count is ${this.count}`;
  },
};

Optional chaining, for data that might be absent

Real data has holes: an order without a customer, a customer without an address. Chained property access through a hole throws, and the old guard was a trench of && checks. Optional chaining, ?., short-circuits the whole chain to undefined at the first hole, and pairs with ?? for a default, turning five defensive lines into one readable one.

1
2
3
4
5
6
7

const city = order.customer?.address?.city ?? "unknown";

// the same meaning, pre-?. style:
const city =
  order.customer && order.customer.address
    ? order.customer.address.city
    : "unknown";

Run the order book

The example below keeps the day's orders as an array of objects and reports on them with the lesson's tools, printing to the preview console. Run it, then work the edges: destructure first with a discount = 0 default, add a method summary() to an order and call it, and delete one customer entirely to watch optional chaining keep the report alive where plain access would have thrown.

What to notice

• Spread gave updated copies while the originals held still, which is how larger programs stay predictable.

• Optional chaining with ?? described missing data in one line per field.

• The method found its total through this.orders, the object it was called on.

Quick check

If you can destructure with defaults, update an object without mutating it, and read through missing data without a guard trench, labeled data is yours to command. Next, the last stop: loops. When you are ready, take the JavaScript Objects quiz.