How to Use the Continue Statement in TypeScript For Loops

When I build dashboard features or Node.js automation scripts, I often loop through API records that include incomplete, archived, or irrelevant entries. I do not want one bad record to stop the whole process. I want to skip it and move to the next item.

That is where the continue statement helps. It keeps a loop moving while avoiding code that should not run for the current item. You will learn how to use it in TypeScript for loops, for…of loops, nested loops, and real dashboard-style examples.

This Tutorial Covers:

What Is the Continue Statement in TypeScript?

TypeScript is JavaScript with optional static types. Static types let you describe what kind of data a variable should hold, such as a string, number, or object.

A loop repeats a block of code. The continue statement tells the loop to stop the current iteration and immediately begin the next one. An iteration means one complete pass through a loop.

This differs from break. The break statement exits the entire loop, while continue skips only the current item. If you need to stop looping completely, see this guide on the break statement in TypeScript for loops.

Here is the basic syntax:

for (let index = 0; index < 5; index++) {
  if (index === 2) {
    continue;
  }

  console.log(index);
}

This code prints:

I executed the above example code and added the screenshot below.

Continue Statement in TypeScript For Loops

When index reaches 2, TypeScript runs continue. It skips console.log(index) for that iteration, then increments the counter and continues with 3.

Use Continue in a TypeScript For Loop

A standard for loop works well when you need the item position, also called its index. This is common when you process API results, pagination data, or ordered dashboard rows.

Imagine a support dashboard that receives ticket IDs. Some tickets are archived, so you should not render them in the active queue.

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

for (let index = 0; index < ticketIds.length; index++) {
  const ticketId: number = ticketIds[index];

  if (archivedTicketIds.includes(ticketId)) {
    continue;
  }

  console.log(`Rendering active ticket: ${ticketId}`);
}

The ticketIds variable has the type number[], which means an array of numbers. An array is an ordered collection of values.

The if condition checks whether the current ticket ID exists in archivedTicketIds. When it does, continue skips the rendering line and moves to the next ticket.

For more ways to loop through typed arrays, read TypeScript for loops with arrays.

Why continue keeps loops readable

You could write the same logic by placing the work inside an if block:

for (let index = 0; index < ticketIds.length; index++) {
  const ticketId: number = ticketIds[index];

  if (!archivedTicketIds.includes(ticketId)) {
    console.log(`Rendering active ticket: ${ticketId}`);
  }
}

This works, but continue becomes easier to read when your loop has several conditions. It lets you reject unwanted data early, then keep the useful processing aligned at the left edge.

interface SupportTicket {
  id: number;
  subject: string;
  status: "open" | "closed" | "archived";
  customerEmail?: string;
}

const tickets: SupportTicket[] = [
  { id: 201, subject: "Login issue", status: "open", customerEmail: "maya@example.com" },
  { id: 202, subject: "Old billing request", status: "archived" },
  { id: 203, subject: "Export failed", status: "open" },
  { id: 204, subject: "Closed report", status: "closed", customerEmail: "noah@example.com" }
];

for (let index = 0; index < tickets.length; index++) {
  const ticket: SupportTicket = tickets[index];

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

  if (!ticket.customerEmail) {
    continue;
  }

  console.log(`Email ${ticket.customerEmail} about ticket #${ticket.id}`);
}

An interface defines the expected shape of an object. Here, each ticket needs an ID, subject, and status, while customerEmail remains optional because of the ?.

The loop skips archived tickets first. It also skips records without an email address. That leaves only tickets that your notification code can safely handle.

You can learn more about defining object shapes in this guide on TypeScript interfaces with arrays of objects.

Pro Tip: I use continue for early validation in import scripts and API processing jobs. It keeps the successful path simple and prevents deeply nested if statements that become hard to maintain.

Reverse an Array in TypeScript Before Looping

You may sometimes want to reverse an array in TypeScript before processing it. For example, an API may return support tickets from oldest to newest, but your dashboard should display the newest active tickets first.

The reverse() method changes the order of the existing array. This direct change is called mutation. Mutation means changing an existing value or array instead of creating a new one.

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

ticketIds.reverse();

console.log(ticketIds);

The output is:

[104, 103, 102, 101]

This code changes ticketIds itself. Use reverse() only when you want the original array order to change.

Now combine reverse() with continue:

interface TicketSummary {
  id: number;
  status: "open" | "archived";
}

const recentTickets: TicketSummary[] = [
  { id: 301, status: "open" },
  { id: 302, status: "archived" },
  { id: 303, status: "open" }
];

recentTickets.reverse();

for (let index = 0; index < recentTickets.length; index++) {
  const ticket: TicketSummary = recentTickets[index];

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

  console.log(`Show ticket #${ticket.id}`);
}

The dashboard now starts from ticket 303, skips archived ticket 302, and then displays ticket 301.

For a deeper look at this array operation, see how to reverse an array in TypeScript.

Reverse without mutation

In frontend state management, especially in React, you should usually avoid changing a shared array. Immutability means creating a changed copy while leaving the original value untouched.

Use the spread operator (...) to create a shallow copy before calling reverse():

const apiTickets: TicketSummary[] = [
  { id: 401, status: "open" },
  { id: 402, status: "archived" },
  { id: 403, status: "open" }
];

const newestFirst: TicketSummary[] = [...apiTickets].reverse();

for (const ticket of newestFirst) {
  if (ticket.status === "archived") {
    continue;
  }

  console.log(`Add ticket #${ticket.id} to the dashboard`);
}

console.log(apiTickets);

The newestFirst array has reversed order, but apiTickets stays unchanged. This pattern avoids subtle bugs when multiple parts of an app reuse the same API data.

The TypeScript spread operator guide explains why this copying pattern works well with arrays and objects.

Pro Tip: I have found that reverse() causes subtle bugs most often in React components and shared utility functions. When the original order matters, I always reverse a copied array instead.

Use toReversed() for immutable updates

Modern JavaScript includes toReversed(), which returns a reversed copy without changing the original array. It offers a cleaner immutable array update.

const apiTickets: TicketSummary[] = [
  { id: 501, status: "open" },
  { id: 502, status: "archived" },
  { id: 503, status: "open" }
];

const newestFirst: TicketSummary[] = apiTickets.toReversed();

for (const ticket of newestFirst) {
  if (ticket.status === "archived") {
    continue;
  }

  console.log(`Queue ticket #${ticket.id}`);
}

This code produces the same result as [...apiTickets].reverse(), but it clearly communicates that you want a new reversed array.

Your TypeScript project needs appropriate library definitions for toReversed(). If TypeScript reports that the method does not exist, check your tsconfig.json lib setting and use a modern ECMAScript library target. If your browser or Node.js runtime does not support toReversed(), use [...array].reverse() instead.

Use Continue With a For…Of Loop

A for…of loop reads naturally when you only need each value and do not need its index. I use it often when processing typed API data.

const activityTypes: string[] = [
  "ticket_created",
  "system_ping",
  "ticket_updated",
  "system_ping",
  "ticket_closed"
];

for (const activityType of activityTypes) {
  if (activityType === "system_ping") {
    continue;
  }

  console.log(`Store activity: ${activityType}`);
}

I executed the above example code and added the screenshot below.

Use the Continue Statement in TypeScript For Loops

The loop ignores every system_ping value and processes meaningful customer activity. Since you do not use array positions, for...of makes the intent clearer than a counter-based loop.

Read more about for…of loops in TypeScript when you need to iterate through arrays, strings, maps, or other iterable values.

Continue does not work with forEach

Many developers try this:

const ticketIds: number[] = [601, 602, 603];

ticketIds.forEach((ticketId: number) => {
  if (ticketId === 602) {
    continue;
  }

  console.log(ticketId);
});

This code fails because continue only works inside actual loop statements such as for, for...of, while, and do...while. The forEach() method uses a callback function, and a callback is a function that runs later when another function calls it.

Use return inside forEach() when you want to skip the remaining callback code:

const ticketIds: number[] = [601, 602, 603];

ticketIds.forEach((ticketId: number) => {
  if (ticketId === 602) {
    return;
  }

  console.log(ticketId);
});

The return exits only the callback for ticket 602. It does not stop the entire forEach() operation.

If you need to use continue, prefer a for...of or standard for loop. You can also explore TypeScript forEach loops with an index for callback-based iteration patterns.

Use Continue in Nested Loops

A nested loop is a loop inside another loop. In a support dashboard, you might loop through teams and then through each team’s tickets.

interface SupportTeam {
  name: string;
  tickets: SupportTicket[];
}

const supportTeams: SupportTeam[] = [
  {
    name: "Billing",
    tickets: [
      { id: 701, subject: "Invoice missing", status: "open", customerEmail: "aisha@example.com" },
      { id: 702, subject: "Old invoice", status: "archived" }
    ]
  },
  {
    name: "Technical",
    tickets: [
      { id: 703, subject: "API timeout", status: "open", customerEmail: "liam@example.com" }
    ]
  }
];

for (const team of supportTeams) {
  for (const ticket of team.tickets) {
    if (ticket.status === "archived") {
      continue;
    }

    console.log(`${team.name}: #${ticket.id} - ${ticket.subject}`);
  }
}

The continue statement affects only the inner ticket loop. It skips the archived ticket, then checks the next ticket in that same team.

If you need to skip an entire outer loop iteration from inside an inner loop, use a labeled statement carefully:

outerLoop:
for (const team of supportTeams) {
  for (const ticket of team.tickets) {
    if (ticket.status === "archived") {
      continue outerLoop;
    }

    console.log(`Checking ${ticket.id}`);
  }
}

This code skips the remaining tickets for the current team whenever it finds an archived ticket. Labels work, but I avoid them unless they make a complex loop easier to understand. Often, a helper function produces cleaner code.

Things to Keep in Mind

Use continue for skipping: Use it when the loop should keep running but the current value fails a rule.
Do not confuse it with break: continue moves to the next iteration, while break ends the complete loop.
Avoid continue in forEach(): Use return inside the callback or switch to a for...of loop.
Validate early: Put rejection checks near the top of the loop so the valid processing path stays readable.
Watch array mutation: reverse() changes the original array, so use [...array].reverse() or toReversed() when shared data must remain unchanged.
Check runtime support: toReversed() needs modern browser or Node.js support, while the spread-and-reverse() pattern works in older environments.

Frequently Asked Questions

What does continue do in a TypeScript for loop?

The continue statement stops the current loop iteration and starts the next one. It skips code that appears after continue inside that iteration.

What is the difference between break and continue in TypeScript?

break exits the entire loop immediately. continue skips only the current item and allows the loop to keep processing later items.

Can I use continue in a for…of loop in TypeScript?

Yes. continue works in for...of, standard for, while, and do...while loops. It does not work directly inside a forEach() callback.

Why does continue not work in TypeScript forEach?

forEach() runs a callback function instead of a loop body that supports loop control statements. Use return to skip the rest of the current callback, or use for...of when you need continue.

Can I use multiple continue statements in one loop?

Yes. Multiple continue statements work well when you have separate validation checks. Keep each condition focused so readers can understand why the loop skips a record.

Does continue affect an outer loop in nested TypeScript loops?

By default, continue affects only the nearest loop. You can use a labeled continue to target an outer loop, but a helper function often gives clearer code.

The continue statement gives you a clean way to skip invalid, archived, or irrelevant data while keeping TypeScript loops running. Use it with for or for...of loops, validate records early, and choose immutable array updates when your dashboard or frontend state needs predictable data. I hope this practical guide helps you write cleaner TypeScript loops.