TypeScript Academy · Lesson

Readonly Arrays and Immutable Data

Use ReadonlyArray to prevent accidental mutations.

Lesson 2 of 413 steps

Readonly Arrays and Immutable Data is a free TypeScript Academy lesson on CoddyKit. This is lesson 2 of 4. You can read the complete lesson below for free — then practise it hands-on in the browser with a built-in code editor and a 24/7 AI tutor. It is part of the TypeScript Academy learning path, and your progress syncs across the web and the CoddyKit app. The TypeScript Academy course includes 4 lessons in total.

Welcome

Mutable arrays can be accidentally modified anywhere in your code. TypeScript's ReadonlyArray and readonly modifier help you enforce immutability.

The readonly Modifier on Arrays

Add the `readonly` modifier before the array type to prevent mutation. The array can be read but not changed.

const ids: readonly number[] = [1, 2, 3];
// ids.push(4);   // Error
// ids[0] = 99;   // Error
console.log(ids[0]); // OK — reading is fine

ReadonlyArray<T> Generic Form

`ReadonlyArray` is the generic equivalent of `readonly T[]`. Both prevent push, pop, splice, and index assignment.

const names: ReadonlyArray<string> = ['Alice', 'Bob'];
// names.push('Charlie'); // Error

Returning Readonly Arrays from Functions

Return readonly arrays from functions to signal to callers that the result should not be mutated.

function getConfig(): readonly string[] {
  return ['host', 'port', 'db'];
}

Immutable Function Parameters

Mark array parameters as readonly to prevent the function from mutating the caller's array.

function sum(nums: readonly number[]): number {
  return nums.reduce((a, b) => a + b, 0);
  // nums.push(99); // Error inside function
}

as const for Literal Arrays

The `as const` assertion makes an array readonly and infers a tuple type with literal element types instead of widened types.

const colors = ['red', 'green', 'blue'] as const;
// type: readonly ['red', 'green', 'blue']
// colors.push('yellow'); // Error

Readonly Does Not Deep-Freeze

readonly only prevents the array reference from being mutated. If the elements are objects, their properties can still be changed.

const users: readonly { name: string }[] = [{ name: 'Alice' }];
// users.push({}); // Error
users[0].name = 'Bob'; // Allowed — object itself is mutable

Deeply Immutable with Readonly<T>

For deep immutability of objects, combine ReadonlyArray with Readonly on the elements. Or use a library like immer.

type ImmutableUser = Readonly<{ name: string; scores: readonly number[] }>;
const u: ImmutableUser = { name: 'Alice', scores: [90, 85] };
// u.name = 'Bob';       // Error
// u.scores.push(100);  // Error

Mutable vs Readonly Assignment

A readonly array is NOT assignable to a mutable array type. This protects against accidentally passing an immutable array where mutation is expected.

const ro: readonly number[] = [1, 2];
const mutable: number[] = ro; // Error!

When to Use Readonly Arrays

Use readonly arrays for configuration objects, constants, function parameters you promise not to mutate, and return values from pure functions.

Spreading Creates a New Mutable Array

Spreading a readonly array into a new array literal creates a mutable copy. This is a clean pattern for making changes without mutation.

const base: readonly number[] = [1, 2, 3];
const extended: number[] = [...base, 4]; // new mutable array

Quick Check

Which operation is NOT allowed on a `readonly number[]` in TypeScript?

Answer it in the interactive lesson

Recap

Use `readonly T[]` or `ReadonlyArray` to prevent array mutation. Use `as const` for literal constant arrays. Spreading creates a mutable copy when you need to extend a readonly array.

Free to start

Learn TypeScript with an AI tutor — free

Write and run real code in your browser, get instant help from a 24/7 AI tutor, and pick up where you left off on the web or in the app.

Courses: 101
Lessons: 352

Start learning free View the full course

Frequently Asked Questions

Is the “Readonly Arrays and Immutable Data” lesson free?

Yes — the full text of “Readonly Arrays and Immutable Data” is free to read here on the web. To practise it interactively (a built-in code editor and a 24/7 AI tutor) and unlock the rest of the TypeScript Academy course, upgrade to CoddyKit PRO. The TypeScript Academy course includes 4 lessons in total.

What will I learn in “Readonly Arrays and Immutable Data”?

Use ReadonlyArray to prevent accidental mutations. You practise TypeScript Academy with hands-on code you run directly in the browser, and a 24/7 AI tutor answers your questions as you work through the lesson.

Do I need any experience to start TypeScript Academy?

No prior experience is required. TypeScript Academy on CoddyKit is structured for beginners through advanced learners, so you can start here or from the beginning and move at your own pace. This is lesson 2 of 4.

How long does the “Readonly Arrays and Immutable Data” lesson take?

Most CoddyKit lessons take about 5–10 minutes. Each one is bite-sized and interactive, so you make steady progress and pick up exactly where you left off across the web and the app.

Can I write and run code in this TypeScript Academy lesson?

Yes. Every TypeScript Academy lesson includes a built-in code editor, so you write and run real code right in your browser and get instant AI feedback — no local setup required.

All lessons in this course

← Back to TypeScript Academy