Objects: Named Data

Introduction to Objects

As your programs grow more complex, you’ll need ways to organize related pieces of data. In JavaScript, an object is a collection of properties, and a property is an association between a name (or key) and a value. You can think of an object as a container that groups related variables together under a single name.

You can create an object using an object initializer (also known as an object literal). This is simply a comma-separated list of key-value pairs wrapped in curly braces {}.

const user = { name: 'Alice', age: 30 };
console.log(user.name);

Alice

In the example above, we created a user object with two properties: name and age. We then accessed the name property using dot notation (user.name).

Methods: Functions Inside Objects

A property’s value can be any JavaScript data type, including strings, numbers, booleans, arrays, or even other objects. Most importantly, a property’s value can be a function! When a function is attached to an object, the property is known as a method.

const user = {
  name: 'Bob',
  greet: function() {
    return 'Hello ' + this.name;
  }
};
console.log(user.greet());

Hello Bob

Creating Distinct Objects

When you create objects using object initializers, identical object initializers create distinct objects that do not compare to each other as equal. This is because JavaScript compares objects by memory reference, not by their internal values.

const obj1 = { a: 1 };
const obj2 = { a: 1 };
console.log(obj1 === obj2);

false

Even though obj1 and obj2 look exactly the same, they live in different places in memory!

String Keys and Bracket Notation

Each property name before the colon is either an identifier, a number literal, or a string literal. If your property name contains spaces or special characters, you MUST use quotes.

When you use string keys that aren’t valid identifiers, you cannot use dot notation. Instead, you must use bracket notation.

const config = {
  'api-key': '12345',
  'max retries': 3
};
console.log(config['max retries']);

The Power of Bracket Notation

A huge misconception is that dot notation and bracket notation do exactly the same thing. They don’t!

Dot notation expects a literal identifier (like .name). Bracket notation evaluates the expression inside the brackets. This means you can use a variable inside bracket notation to dynamically access a property based on its value!

const book = { title: '1984', author: 'George Orwell' };
const propToCheck = 'author';

// What will these two statements print?
console.log(book.propToCheck);
console.log(book[propToCheck]);

undefined
George Orwell

Because book.propToCheck looks for a property literally named “propToCheck” (which doesn’t exist), it returns undefined. But book[propToCheck] evaluates the variable first, turning into book['author'], which returns the correct value.

Modifying and Adding Properties

You can easily change the value of an existing property or add entirely new properties to an object on the fly.

const car = { make: 'Toyota' };
car.make = 'Honda'; // Modifying
console.log(car.make);

const book = { title: '1984' };
book.author = 'George Orwell'; // Adding
console.log(book.author);

Honda
George Orwell