Using `Object.freeze`

In this lesson, we will explore how the JavaScript Object.freeze method can be used with TypeScripts' readonly` modifier to create immutable objects and arrays at both runtime and compile-time.

Using Object.freeze on arrays

Object.freeze is a JavaScript method that can make objects and arrays immutable at runtime. We are going to explore this along with TypeScript's readonly modifier in the TypeScript playground.

• Open the TypeScript playground by clicking the link below:

• Paste the code from below into the TypeScript playground:

Copy
let billScores = Object.freeze([90, 65, 80]);

The code creates a frozen array.

• Let's try to add an array item to billScores:

Copy
billScores.push(100);

• Output billScores to the console at the end of the code:

Copy
console.log(billScores);

• Click the Run option in the TypeScript Playground and open the console.

Nice!

• Clear the code from the TypeScript Playground, ready for the next section.

Using Object.freeze on objects

• Let's add a simple object with a type to the TypeScript Playground:

Copy
let bill = Object.freeze({
  name: "Bill",
  age: 30,
});

The code creates a frozen object.

• Let's try to change an age on bill:

Copy
bill.age = 31;

• Output bill to the console at the end of the code:

Copy
console.log(bill);

• Click the Run option in the TypeScript Playground and open the console.

Neat!

• Add the following additional properties to the bill object:

Copy
let bill = Object.freeze({
  ...
  scores: [90, 65, 80],
  profile: {
    level: 1
  }
});

• Remove the assigment to bill.age and add the following assignments just before the console.log statement:

Copy
bill.scores.push(100);
bill.profile.level = 2;

• Click the Run option in the TypeScript and open the console.

Object.freeze performs a shallow freeze on an object.

Summary

Object-freeze with the readonly modifier allows us to create immutable arrays and objects at runtime and compile-time. It is important to note that Object.freeze only performs a shallow freeze.

In the next lesson, we will learn how to implement readonly function parameters.