Switch statement not working correctly in JavaScript

Question

I have the following piece of code. For some reason the case statement that I don't want to execute (second for Case '2') is getting executing in addition to the correct one (Case '4'). After reading online it appears most ppl were able to resolve similar issue by adding a "break" statement. However it isn't working for me. Please advise.Output below is from my Browser

var chk = '4'

switch (chk) {
  case '4':
    var locations = [
      ["936001_STURGEON_BAY_MEYER", 44.8358, -87.3305, "LRA", 1],
      ["936087_SHADOW_LAKE", 45.2183, -88.5981, "LRA", 2],
      ["936136_PIG", 44.5925, -88.0808, "OMS", 3],
      ["936136_PIG", 44.5925, -88.0808, "OMS", 4]
    ];

    var map = new google.maps.Map(document.getElementById('map'), {
      zoom: 15,
      center: new google.maps.LatLng(locations[0][1], locations[0][2]),
      mapTypeId: google.maps.MapTypeId.ROADMAP
    });

    var infowindow = new google.maps.InfoWindow({
      maxWidth: 400000
    });
    var locations_all_cells1 = locations;
    var marker, i;

    for (i = 0; i < locations_all_cells1.length; i++) {
      var type1 = locations_all_cells1[i][3];

      switch (type1) {
        case "OMS":
          marker1 = new google.maps.Marker({
            position: new google.maps.LatLng(locations_all_cells1[i][1], locations_all_cells1[i][2]),
            map: map,
            icon: 'http://maps.google.com/mapfiles/ms/icons/green-dot.png'
          });
          google.maps.event.addListener(marker1, 'click', (function(marker1, i) {
            return function() {
              infowindow.setContent(locations_all_cells1[i][0]);
              infowindow.open(map, marker1);
            }
          })(marker1, i));
          break;

        case "LRA":
          marker2 = new google.maps.Marker({
            position: new google.maps.LatLng(locations_all_cells1[i][1], locations_all_cells1[i][2]),
            map: map,
            icon: 'http://maps.google.com/mapfiles/ms/icons/red-dot.png'
          });
          google.maps.event.addListener(marker2, 'click', (function(marker2, i) {
            return function() {
              infowindow.setContent(locations_all_cells1[i][0]);
              infowindow.open(map, marker2);
            }
          })(marker2, i));
          break;

        case "UPSAVE":
          marker3 = new google.maps.Marker({
            position: new google.maps.LatLng(locations_all_cells1[i][1], locations_all_cells1[i][2]),
            map: map,
            icon: 'http://maps.google.com/mapfiles/ms/icons/yellow-dot.png'
          });
          google.maps.event.addListener(marker3, 'click', (function(marker3, i) {
            return function() {
              infowindow.setContent(locations_all_cells1[i][0]);
              infowindow.open(map, marker3);
            }
          })(marker3, i));
      }
    }
    break;

  case '2':
    var locations = [
      ["936001_STURGEON_BAY_MEYER", 44.8358, -87.3305, "LRA", 1],
      ["936087_SHADOW_LAKE", 45.2183, -88.5981, "LRA", 2],
      ["936136_PIG", 44.5925, -88.0808, "OMS", 3],
      ["936136_PIG", 44.5925, -88.0808, "OMS", 4]
    ];

    var map = new google.maps.Map(document.getElementById('map'), {
      zoom: 15,
      center: new google.maps.LatLng(locations[0][1], locations[0][2]),
      mapTypeId: google.maps.MapTypeId.ROADMAP
    });

    var infowindow = new google.maps.InfoWindow({
      maxWidth: 400000
    });
    var locations_all_cells = ;
    var marker, i;

    for (i = 0; i < locations_all_cells.length; i++) {
      var type1 = locations_all_cells[i][3];
    }
    break;
    
  default:
    text = "Looking forward to the Weekend";
}
console.log(text);

Error Information

enter image description here

You haven't defined the `type1`! And I am definitely sure, this won't go to case 2... Or if it does go, make the `chk = '4';` as string. — Praveen Kumar Purushothaman, Dec 18 '16 at 20:15
In your code above only the default branch will be executed (neither case '2', nor case '4' will), because none of your cases match `4`. Note that `4 !== '4'`. — Paul, Dec 18 '16 at 20:17
@PraveenKumar Yeah, take a look at the forth question I asked on StackOverflow five years ago http://stackoverflow.com/questions/6989902/is-it-safe-to-assume-strict-comparison-in-a-javascript-switch-statement haha — Paul, Dec 18 '16 at 20:19

Praveen Kumar Purushothaman · Answer 1 · 2016-12-18T20:34:25.590

1

From the MDN Docs for switch:

A switch statement first evaluates its expression. It then looks for the first case clause whose expression evaluates to the same value as the result of the input expression (using strict comparison, ===) and transfers control to that clause, executing the associated statements.

The switch performs a strict check, which doesn't match your '4' (string) and 4 (number). So you need to change your code like:

var chk = '4';

Update

If your browser is indeed loading it correctly, like chk = '4', then it should work. See here:

var chk = '4';
// Added this for checking.
var type1 = 'OMS';

switch (chk) {
  case '4':
    switch (type1) {
      case "OMS":
        text = "4 - OMS";
        break;
      case "LRA":
        text = "4 - LRA";
        break;
      case "UPSAVE":
        text = "4 - UPSAVE";
    }
    break;
  case '2':
    // ####Do some Stuff here##
    break;
  default:
    text = "Looking forward to the Weekend";
}
console.log(text);

edited Dec 18 '16 at 20:34

answered Dec 18 '16 at 20:20

Praveen Kumar Purushothaman

164,888
24
203
252

@ssharma If your browser's code is indeed `chk = '4'`, then it should definitely work man. Can you post the right code please? – Praveen Kumar Purushothaman Dec 18 '16 at 20:30
So I am actually getting value of the Variable chk var chk = '<%= @tag %>' by doing some other stuff in the background. I checked my browser and the output is indeed coming as var chk = '4'. Still No luck! – ssharma Dec 18 '16 at 20:30
@ssharma Post the full code, that's rendered in the browser. – Praveen Kumar Purushothaman Dec 18 '16 at 20:30
@ssharma See the above updated answer. – Praveen Kumar Purushothaman Dec 18 '16 at 20:34
Please see the output from my browser. I have updated by original question. – ssharma Dec 18 '16 at 20:55
@ssharma Checking it, seems like there are syntax errors. Did you notice them? – Praveen Kumar Purushothaman Dec 18 '16 at 20:55
@ssharma `var locations_all_cells = ;` Syntax error dude. – Praveen Kumar Purushothaman Dec 18 '16 at 20:57
@ssharma Did you see the syntax error? That's a **syntax error**! Please fix it. – Praveen Kumar Purushothaman Dec 18 '16 at 21:01
in my code I have - var locations_all_cells = <%="ATall_cells_map%>; since the incorrect Case is executing the value of ATall_cells_map is not present... In my earlier code I only populate ATall_cells_map when chk = 2 which is not the case here. The value of chk is 4. – ssharma Dec 18 '16 at 21:13
@ssharma Always enclose them inside `''`. – Praveen Kumar Purushothaman Dec 18 '16 at 21:13

score 1 · Accepted Answer · answered Dec 18 '16 at 22:20

I finally worked out my problem with help from a friend. It turns out Javascript does not like variables inside a case statement that are un-initialized. In one of the case statements I was using a Variable to which I was assigning a value based on some logic before. Even though this case statement was not evaluated as "true" my program was throwing an error.

For example in the code below the program will error out for cases n and m if b is blank/null even though m is "false":

switch(expression) {
case n:
    break;
case m:
    Var a=b;
    break;
default:
    default code block
}

Switch statement not working correctly in JavaScript

2 Answers2