How to Reverse an Array in TypeScript

When I build dashboard screens, API activity views, or support-ticket widgets, the server often returns records in oldest-first order. Users usually expect the newest ticket or event at the top, so I need to reverse an array in TypeScript before displaying it.

TypeScript is JavaScript with optional static types, which help you catch incorrect data shapes before runtime. An array is an ordered collection of values, such as ticket names, IDs, or objects returned from an API. Reversing one sounds simple, but choosing a mutating or immutable approach matters in real applications.

This guide shows the safest and most practical ways to reverse arrays, including reverse(), toReversed(), the spread operator, and a custom for loop.

Reverse an Array in TypeScript With reverse()

The fastest way to reverse an array in TypeScript uses the built-in reverse() method.

const ticketIds: number[] = [101, 102, 103, 104];

ticketIds.reverse();

console.log(ticketIds);
// [104, 103, 102, 101]

You can refer to the screenshot below to see the output.

This example declares a number[], which means the array must contain only numbers. Calling reverse() changes the element order directly and returns the same array.

That direct change is called a mutation. A mutation changes an existing value rather than creating a new one. This is useful when you own the array and no other part of your application needs its original order.

Here is the same idea with a support-ticket dashboard:

interface SupportTicket {
  id: number;
  subject: string;
  createdAt: string;
}

const recentTickets: SupportTicket[] = [
  { id: 301, subject: "Login issue", createdAt: "2026-08-16" },
  { id: 302, subject: "Payment failed", createdAt: "2026-08-17" },
  { id: 303, subject: "Cannot update profile", createdAt: "2026-08-18" }
];

recentTickets.reverse();

console.log(recentTickets[0].subject);
// Cannot update profile

You can refer to the screenshot below to see the output.

The interface defines the expected structure for every ticket object. After reverse(), the newest item in the original list moves to index 0.

Before working with object collections, it also helps to understand arrays of objects in TypeScript, especially when API results include nested data.

Why reverse() Can Cause Bugs

The reverse() method does not create a new array. It rearranges the original array in memory.

const ticketSubjects: string[] = [
  "Login issue",
  "Payment failed",
  "Cannot update profile"
];

const displayedTickets = ticketSubjects.reverse();

console.log(ticketSubjects);
// ["Cannot update profile", "Payment failed", "Login issue"]

console.log(displayedTickets === ticketSubjects);
// true

Both variables point to the same reversed array. The expression displayedTickets === ticketSubjects returns true because reverse() returns the original array after changing it.

This behavior can create hard-to-find bugs when one shared array feeds multiple views. For example, one dashboard component may need chronological order while another needs newest-first order. If the first component calls reverse(), it changes data for both components.

Pro Tip: I’ve found that reverse() causes subtle bugs most often in React components and shared utility functions because it changes the original array. When I need predictable state updates, I reverse a copied array instead.

If you work in React with TypeScript, this matters even more because state updates should avoid changing existing values directly. You can also review React state management hooks to see why predictable state updates matter.

Reverse an Array in TypeScript Without Mutation

An immutable update creates a changed copy while keeping the original value unchanged. This approach works well for frontend state management, cached API responses, and reusable utility functions.

Use the Spread Operator With reverse()

The spread operator (...) copies array items into a new array. Then you can reverse that copy safely.

const ticketSubjects: string[] = [
  "Login issue",
  "Payment failed",
  "Cannot update profile"
];

const newestFirst: string[] = [...ticketSubjects].reverse();

console.log(newestFirst);
// ["Cannot update profile", "Payment failed", "Login issue"]

console.log(ticketSubjects);
// ["Login issue", "Payment failed", "Cannot update profile"]

You can refer to the screenshot below to see the output.

[...ticketSubjects] creates a shallow copy. A shallow copy creates a new outer array, but object items inside it still refer to the same objects. That is completely fine when you only want to change item order.

For a deeper look at this syntax, see the guide on the TypeScript spread operator.

Here is a reusable function for a dashboard:

interface ActivityLog {
  id: string;
  action: string;
  createdAt: string;
}

function getNewestActivities(
  activities: readonly ActivityLog[]
): ActivityLog[] {
  return [...activities].reverse();
}

const activityLogs: readonly ActivityLog[] = [
  { id: "a1", action: "Ticket created", createdAt: "2026-08-16T08:00:00Z" },
  { id: "a2", action: "Ticket assigned", createdAt: "2026-08-17T11:15:00Z" },
  { id: "a3", action: "Ticket resolved", createdAt: "2026-08-18T09:30:00Z" }
];

const newestActivities = getNewestActivities(activityLogs);

console.log(newestActivities[0].action);
// Ticket resolved

A readonly array prevents methods that change array structure, including reverse(), push(), and splice(). The readonly ActivityLog[] type makes the function’s intent clear: it reads input and returns a reordered copy.

Learn more about working safely with readonly arrays in TypeScript.

Use toReversed() for an Immutable Array Update

Modern JavaScript includes toReversed(), which returns a reversed copy and leaves the source array unchanged.

const ticketIds: number[] = [101, 102, 103, 104];

const reversedTicketIds = ticketIds.toReversed();

console.log(reversedTicketIds);
// [104, 103, 102, 101]

console.log(ticketIds);
// [101, 102, 103, 104]

toReversed() communicates your intent clearly: you want a reversed result without changing the original. It is often easier to read than [...array].reverse().

However, compatibility matters. Older browsers and older Node.js versions may not support toReversed() at runtime. Your TypeScript configuration must also include a recent JavaScript library definition.

For example, use a modern target in tsconfig.json:

{
  "compilerOptions": {
    "target": "ES2023",
    "lib": ["ES2023", "DOM"],
    "strict": true
  }
}

The target option controls the JavaScript version TypeScript produces. The lib option tells TypeScript which built-in APIs exist. If TypeScript reports that toReversed does not exist, update your TypeScript version and use an ES2023-compatible library setting, or use [...array].reverse().

Reverse an Array in TypeScript With a for Loop

Use a for loop when you need custom logic while reversing. For example, you may want to ignore archived tickets, transform fields, or stop after a specific number of entries.

const ticketSubjects: string[] = [
  "Login issue",
  "Payment failed",
  "Cannot update profile"
];

const reversedSubjects: string[] = [];

for (let index = ticketSubjects.length - 1; index >= 0; index--) {
  reversedSubjects.push(ticketSubjects[index]);
}

console.log(reversedSubjects);
// ["Cannot update profile", "Payment failed", "Login issue"]

The loop starts at the last valid index: ticketSubjects.length - 1. It moves backward one index at a time and pushes each item into a new array. This keeps ticketSubjects unchanged.

If you need a refresher on indexes and loop syntax, read TypeScript for loops with arrays and how to use a for loop range in TypeScript.

Here is a more realistic dashboard example. It skips archived tickets and displays only the latest three active items.

interface DashboardTicket {
  id: number;
  subject: string;
  status: "open" | "resolved" | "archived";
}

const tickets: DashboardTicket[] = [
  { id: 101, subject: "Login issue", status: "resolved" },
  { id: 102, subject: "Payment failed", status: "archived" },
  { id: 103, subject: "Profile update error", status: "open" },
  { id: 104, subject: "Export failed", status: "open" },
  { id: 105, subject: "Email notification delayed", status: "resolved" }
];

const latestActiveTickets: DashboardTicket[] = [];

for (let index = tickets.length - 1; index >= 0; index--) {
  const ticket = tickets[index];

  if (ticket.status === "archived") {
    continue;
  }

  latestActiveTickets.push(ticket);

  if (latestActiveTickets.length === 3) {
    break;
  }
}

console.log(latestActiveTickets);

The continue statement skips the archived ticket and moves to the next loop iteration. The break statement stops the loop after collecting three tickets. This is a good reason to choose a loop over reverse().

You can explore these controls further in TypeScript continue statements in for loops and breaking out of TypeScript loops.

Choose the Right TypeScript Array Reverse Method

For most production UI code, I use toReversed() when the project supports it. Otherwise, [...items].reverse() remains a dependable option.

Reverse API Results for a Dashboard

API results often need both validation and ordering. Let’s say your Node.js service fetches ticket activity and the API sends oldest-first records.

interface TicketActivity {
  id: string;
  message: string;
  createdAt: string;
}

async function loadLatestActivities(): Promise<TicketActivity[]> {
  const response = await fetch("/api/ticket-activities");

  if (!response.ok) {
    throw new Error("Unable to load ticket activities");
  }

  const activities: TicketActivity[] = await response.json();

  return [...activities].reverse();
}

This function returns a Promise<TicketActivity[]>, meaning it completes asynchronously and eventually provides an array of ticket activity objects. It checks response.ok first so your application handles unsuccessful HTTP responses before trying to use the data.

The copied reverse protects the API result from mutation. That gives other code the freedom to reuse the original chronological list. For related patterns, see TypeScript REST API calls and exception handling in TypeScript.

Things to Keep in Mind

• reverse() mutates data: It changes the original array and returns that same array reference.
• Copy before reversing: Use [...array].reverse() when another function, component, or cache may need the original order.
• Check toReversed() support: It needs a modern JavaScript runtime and an appropriate TypeScript lib configuration.
• Respect readonly arrays: A readonly array blocks reverse() because the method mutates; use toReversed() or copy first.
• Use loops for custom processing: A backward for loop makes sense when you need filtering, limits, transformations, continue, or break.
• Avoid UI state mutation: In React, Angular, Vue, and similar applications, create a new array before changing display order.

Frequently Asked Questions

Reversing an array in TypeScript is straightforward, but the right technique depends on whether you can change the original data. Use reverse() for quick local transformations, and create a copy with [...array].reverse() or toReversed() when the original order matters. I hope this practical guide helps you write safer TypeScript array code.

You May Also Like

• How to initialize an array in TypeScript
• How to sort arrays in TypeScript
• How to filter arrays in TypeScript
• How to iterate over arrays in TypeScript
• How to use the TypeScript forEach method on arrays

Bijay Kumar

Bijay Kumar is an experienced Python and AI professional who enjoys helping developers learn modern technologies through practical tutorials and examples. His expertise includes Python development, Machine Learning, Artificial Intelligence, automation, and data analysis using libraries like Pandas, NumPy, TensorFlow, Matplotlib, SciPy, and Scikit-Learn. At PythonGuides.com, he shares in-depth guides designed for both beginners and experienced developers. More about us.

enjoysharepoint.com/