Troubleshooting: Why is my switch-case statement in TypeScript not functioning as expected

Here is a simple switch case scenario:

let ca: string = "2";

switch (ca) {
case "2":
    console.log("2");

 case "1":
    console.log("1");

default:
    console.log("default");

}

I am puzzled by the output of this code, which is as follows:

2
1
default

My anticipated output would be

2 default

Why does it print

1

even though ca does not equal "1"?

EDIT: I am aware that adding a break statement could stop this behavior - however, I am trying to understand why case "1" is executed when ca="2"

Thank you.

Answer №1

It is important to include a break statement after each case in a switch block in order to prevent the code from continuing execution once a match is found.

let num: string = "3";

switch (num) {
  case "3":
    console.log("3");
    break;

  case "4":
    console.log("4");
    break;

  default:
    console.log("default case");
}

Answer №2

In the realm of JavaScript, the switch statement has a peculiar behavior where it falls through to the next case unless a break statement interrupts its flow:

When the switch statement evaluates an expression, it matches the value to a case clause and executes statements associated with that case. Interestingly, it also runs statements in cases that come after the matching one.

This idiosyncrasy is not unique to JavaScript; TypeScript also follows this pattern. It seems to be a legacy feature inherited from the C language or even older programming languages.

To avoid accidentally omitting the necessary break statement, it is advisable to enable the compiler option --noFallthroughCasesInSwitch.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Exploring Angular 2: Unveiling the secrets of lifecycle hooks in lazy loaded

Currently, I'm working on an application that involves lazy loaded Angular modules. I have a straightforward inquiry: Is there a way to detect an event once a module is loaded? For instance, similar to the OnInit lifecycle hook for components. I fo ...

Issue with Cypress TypeScript: Unable to locate @angular/core module in my React application

I am currently in the process of updating my Cypress version from 9.70 to 10.7.0. Although I have fixed almost all the bugs, I have encountered a strange message stating that @angular/core or its corresponding type declarations cannot be found. My applica ...

Prevent financial disagreement by utilizing jQuery carefully

While I'm sure this question has been asked in a similar form before, my searches for the $ sign did not return any results here. I have already built a large system and heavily utilized jQuery, using $ as a reference. Now, I don't want to rever ...

A step-by-step guide on duplicating the functionality of the jQuery

Issue at Hand: I'm attempting to recreate the functionality of jQuery's ajax method as I find myself utilizing XMLHttpRequest multiple times within a script. However, I am hesitant to include jQuery as a dependency since I only require a few meth ...

Exploring the world of AngularJS with nested JSON structures and utilizing ng-repeat

While going through code left behind by a previous team member, I find myself navigating the transition to Angular solo, without anyone around to brainstorm with. This brings me to my question for the community. I am working with JSON data that contains t ...

Puppeteer failing to detect dialog boxes

I'm attempting to simulate an alert box with Puppeteer for testing purposes: message = ''; await page.goto('http://localhost:8080/', { waitUntil: 'networkidle2' }); await page.$eval('#value&apos ...

Utilizing shared components across a Next.js application within a monorepo

Utilizing a monorepo to share types, DTOs, and other isomorphic app components from backend services (Nest.js) within the same mono repo has presented some challenges for me. In my setup, both the next.js app and nest.js app (which itself is a nest.js mono ...

Tips for setting up my bot to pull random messages from a channel and send one when an autoresponse is activated

As per the headline, I attempted to utilize fetchMessages in order to monitor the messages being sent in a specific channel. However, when I experimented with this method, it simply generated never-ending blocks of data in the console. Upon inspection, I ...

What could be the reason my black overlay doesn't show up when the button is clicked?

Attempting to craft a pop-up window on my own, I encountered an issue. Upon pressing the button, instead of the anticipated pop-up appearing and darkening the background below it, the entire page freezes with no sign of the pop-up box. If I eliminate the ...

Implementing Jquery after async ajax refresh in an asp.net application

My ASP.net page is heavily reliant on jQuery. Within this page, I have a GridView placed inside an UpdatePanel to allow for asynchronous updates. <asp:GridView ID="gvMail" runat="server" GridLines="None" AutoGenerateColumns="false" ...

Storing JavaScript arrays in CSV format on the server

I am currently facing an issue while trying to save a multidimensional Javascript array as a CSV file on the server. Despite my efforts, the CSV file created does not seem to contain the actual array data, and I am unsure of what is causing this discrepanc ...

The size of objects on canvas is not consistent when loading with fabric.js loadFromJSON

Click here to view the code var canvas = new fabric.Canvas('canvas_1'); var canvas2 = new fabric.Canvas('canvas_2'); var imgObj = new Image(); imgObj.src = "https://gtaprinting.ca/wp-content/uploads/2021/05/blank-t-shirt-front-gre ...

Node.js environment variable returns a value of 'undefined'

One method I use to safeguard my bot tokens is by utilizing dotenv to keep them separate from the main app. However, a problem arises when running the code - the environment variables appear as undefined, resulting in an error message: Error: An invalid to ...

AJAX: Learn how to execute an AJAX call using a JavaScript function

Is there a method to determine (using developer tools like Chrome, Firefox, Opera, etc) the most recent function that triggers an AJAX call? This could be helpful for debugging web applications. Appreciate your help ...

`A straightforward technique for establishing client-server communication using NodeJS`

Stumbling upon a valuable code snippet on GitHub for enabling straightforward server-client communication in NodeJS has been quite enlightening. Upon making some adjustments, the finalized structure of my code looks like this: The client (Jade + Javascri ...

Arranging an ng-repeat list in a dynamic order

I am currently working with AngularJS and focusing on reordering the ng-repeat list. The list represents online users who can receive messages at any time. When a user receives a message, I update the UI to display the most recent message beneath their nam ...

Exploring the dynamics of parent and child components in Angular

I'm currently working on an Angular2 project and I've hit a roadblock with the parent/child component interaction. My goal is to have a "Producer" entity that can have multiple "Products". Ultimately, I aim to retrieve lists of products associat ...

What could be causing the table to display empty when we are passing data to the usetable function?

Visit Codesandbox to view Table While the header appears correctly, I noticed something strange. When I console log the data props, it shows all the necessary data. However, when I try to console.log row, there doesn't seem to be any single object re ...

Encountering an EJS error stating SyntaxError: a closing parenthesis is missing after the argument list in the file path C:Userscomputer pointDesktopproject2viewshome.ejs

Struggling to retrieve data from app.js through ejs and encountering an error. Pursuing a degree in Computer Science <%- include('header'); -%> <h1><%= foo%></h1> <p class = "home-content">It is a fact that readers ...

The array of objects has vanished into thin air

I am receiving a JSON string from my server through a PHP file, which contains 25 meals. The PHP script is initiated by a JavaScript function. My goal is to convert the JSON into an array of objects. The response stream displays the correct values and eac ...