Why do these two switch statements give different outputs to console?

Question

These two switch statements are the same, other than the use of console.log. When outputting the result to the chrome console I get two different results. The first one outputs:

this is the one

while the second outputs:

1

this is the one

Why is that?

const q = 1;
switch (q) {

    case '1':
        answer = "one";

    case 1:
       answer = 1;

    case 2:
       answer = "this is the one";
        break;

    default:
        answer = "not working";

}
console.log(answer);

const q1 = 1;
switch (q1) {

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

    case 1:
       console.log(1);

    case 2:
        console.log("this is the one");
        break;

    default:
        console.log ("not working");
}

READ https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/switch#breaking_and_fall-through — epascarello, Oct 06 '22 at 15:32
because a switch is not "if ... else if ... else if ... else ...", it's "turn this switch on once a case matches, _and stay on_ until the end of the switch block". If you only need it to trigger a single thing, for a low number of cases consider not using a switch at all, or add `break` everywhere. — Mike 'Pomax' Kamermans, Oct 06 '22 at 15:37
Have you tried stepping line by line through the code using your debugger? It would show you which lines are evaluated. You'd be surprised. — jabaa, Oct 06 '22 at 16:07

score 1 · Answer 1 · answered Oct 06 '22 at 15:47

I put a star(*) on the lines that executed. The switches need breaks, or else one hit can execute multiple sections.

*const q = 1;
*switch (q) {

    case '1':
        answer = "one";

    case 1:
*       answer = 1;

    case 2:
*       answer = "this is the one";  //changed the value of answer
*        break;

    default:
        answer = "not working";

}
*console.log(answer); //the first line of output.

*const q1 = 1;
*switch (q1) {

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

    case 1:  //where the hit occurred.
*       console.log(1);  // the second line of output.

    case 2:
*        console.log("this is the one");  //the third line of output.
*        break;

    default:
        console.log ("not working");
}

epascarello · Answer 2 · 2022-10-06T15:45:00.853

A switch is not like a if/else if/ else. In an if structure it only runs the code in the block that follows it.

In a switch a case statement falls through to the next. If you do not want it to fall through you add a break.

function countDown(start) { 
  console.log('called with: ', start);
  switch (start) {  
    case 3:
    case 'three':
          console.log(3);
    case 2:
    case 'two':
          console.log(2);
    case 1:
    case 'one':
      console.log(1);
  }
}

countDown(3); // 3 2 1
countDown('two');  // 2 1

Now when you add a break it will not fall through

function countDown(start) { 
  console.log('called with: ', start);
  switch (start) {  
    case 3:
    case 'three':
          console.log(3);
          break;
    case 2:
    case 'two':
          console.log(2);
          break;
    case 1:
    case 'one':
      console.log(1);
      break;
  }
}

countDown(3); // 3
countDown('two');  // 2

specifically, it acts like an actual, physical switch. It turns on at some point _and then stays on_. — Mike 'Pomax' Kamermans, Oct 06 '22 at 15:39

score 0 · Answer 3 · answered Oct 06 '22 at 15:42

This is because you are not using break; at the end of each case block. Use something like this:

const q = 1;
switch (q) {

    case '1':
        answer = "one";
        break;

    case 1:
       answer = 1;
       break;

    case 2:
       answer = "this is the one";
        break;

    default:
        answer = "not working";

}
console.log(answer);

const q1 = 1;
switch (q1) {

    case '1':
        console.log("one");
        break;

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

    case 2:
        console.log("this is the one");
        break;

    default:
        console.log ("not working");
}

break; just means that stop the execution here and don't move to the block below, just like in your case

score 0 · Answer 4 · answered Oct 06 '22 at 15:45

If we execute each line of code or verify each line code, you can see, in first switch case is executed case 1 and thencase 2, which makes value = this is the one now the break is executed and we are out of switch case 1.

Now,console.log(answer); hits and prints this is the one

Next, q1 =1

case 1:
   console.log(1);

case 2:
    console.log("this is the one");

Both of the above statement executes since, case 1 is correct match for switch case number 2, but there is no break so case 2 is also executed.

Hence, you see this output. You can also refer these links also: Why is Break needed when using Switch?

https://javascript.info/switch

score 0 · Answer 5 · answered Oct 06 '22 at 15:47

0

You need to add break to skip the next switch case.

switch (month) {
case 1:
case 3:
case 5:
case 7:
case 8:
case 10:
case 12:
    conosle.log('case is 1 to 12');
    break;
case 13:
    console.log('case 13');
    break;

answered Oct 06 '22 at 15:47

Tim Whatley

68
8

score 0 · Answer 6 · answered Oct 06 '22 at 15:48

const q = 1; switch (q) {

case '1':
    answer = "one";

case 1:
   answer = 1;

case 2:
   answer = "this is the one";
    break;

default:
    answer = "not working";

} console.log(answer);

switch case default behaviour is that when a case will get true value then the following case statements will run without checking the condition . in this case case 1 is implemented as true so the next cases will not evaluate .

const q1 = 1; switch (q1) {

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

case 1:
   console.log(1);

case 2:
    console.log("this is the one");
    break;

default:
    console.log ("not working");

}

in your second code , case 1 will evaluated as true so the compiler will not evaluate your case 2 . it will directly go to the case 2 block and console that until compiler find a break s

Why do these two switch statements give different outputs to console?

6 Answers6