Understanding Objects

Keep Related Information Together

In the previous lesson, you learned how arrays store collections of values. But what happens when you want to describe one person, product, or project using several different pieces of information?

An object groups related values using named properties. Each property has a name and a value.

const developer = {
  name: "Moe",
  language: "TypeScript",
  level: 6
};

console.log(developer.name);

Here, name, language, and level are properties. Together, they describe one developer.

Access Data Using Property Names

You can read object properties using dot notation or bracket notation.

const developer = {
  name: "Moe",
  language: "TypeScript",
  level: 6
};

console.log(developer.name);
console.log(developer["language"]);

Dot notation is convenient when you know the property name. Bracket notation is useful when working with property names stored in variables.

Change Information Inside an Object

Object properties can be updated when they are writable, even if the object itself was declared using const.

const developer = {
  name: "Moe",
  level: 6
};

developer.level = 7;

console.log(developer.level);

TypeScript infers the original property types. Since level starts as a number, assigning a string to it would produce a type error.

Describe Exactly What an Object Needs

TypeScript allows you to specify the required properties and their types. This gives your objects a predictable structure.

const developer: {
  name: string;
  language: string;
  level: number;
} = {
  name: "Moe",
  language: "TypeScript",
  level: 6
};

console.log(developer.name);

TypeScript checks that the object provides the expected properties and values.

const developer: {
  name: string;
  level: number;
} = {
  name: "Moe",
  level: "six" // TypeScript error
};

The value "six" is a string, but the level property requires a number.

Give an Object Structure a Name

Writing the same object type repeatedly can make code difficult to maintain. A type alias lets you give a type a reusable name.

type Developer = {
  name: string;
  language: string;
  level: number;
};

const moe: Developer = {
  name: "Moe",
  language: "TypeScript",
  level: 6
};

console.log(moe.language);

Now you can use Developer whenever you need another object with the same structure.

Make Some Information Optional

Not every object needs every possible property. Add a question mark after a property name to make it optional.

type Developer = {
  name: string;
  language: string;
  website?: string;
};

const moe: Developer = {
  name: "Moe",
  language: "TypeScript"
};

console.log(moe.name);

The website property can be omitted. When accessed, an absent optional property has the value undefined.

if (moe.website !== undefined) {
  console.log(moe.website);
} else {
  console.log("No website added yet.");
}

Protect Values from Reassignment

The readonly modifier tells TypeScript that a property should not be reassigned after the object is created.

type Developer = {
  readonly id: number;
  name: string;
};

const moe: Developer = {
  id: 101,
  name: "Moe"
};

moe.name = "Moe Merheb";

// TypeScript error:
// moe.id = 202;

TypeScript prevents reassignment of id during type checking. However, readonly alone does not freeze the object at runtime.

Give Your Objects Actions

An object can contain functions as properties. These functions are commonly called methods.

const developer = {
  name: "Moe",
  greet(): void {
    console.log("Hello from " + this.name);
  }
};

developer.greet();

The this keyword refers to the object when the method is called as developer.greet().

Combine Collections with Structured Data

Objects and arrays work beautifully together. You can create an array where every element follows the same object type.

type Developer = {
  name: string;
  level: number;
};

const developers: Developer[] = [
  { name: "Moe", level: 6 },
  { name: "Jordan", level: 4 }
];

for (const developer of developers) {
  console.log(
    developer.name + ": level " + developer.level
  );
}

This pattern is useful for lists of users, products, lessons, and other structured information.

Pass Structured Information to Functions

Functions can accept entire objects as parameters. TypeScript checks that the object contains the required information.

type Developer = {
  name: string;
  language: string;
  level: number;
};

function describeDeveloper(person: Developer): void {
  console.log(
    person.name + " is learning " + person.language
  );
}

describeDeveloper({
  name: "Moe",
  language: "TypeScript",
  level: 6
});

Instead of passing several separate values, you can pass one well-defined object.