Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Is a reversed switch statement acceptable JavaScript?

JSLint is complaining that (true) is a weird condition. Which is understandable if I wasn't using it on a reversed switch statement. So is JSLint wrong or should I not be using reversed switch statements?

Thanks for any help/enlightenment.

switch (true) {
    case (menuLinksLength < 4):
        numberOfColumns = 1;
        break;
    case (menuLinksLength > 3 && menuLinksLength < 7):
        numberOfColumns = 2;
        break;
    case (menuLinksLength > 6 && menuLinksLength < 10):
        numberOfColumns = 3;
        break;
    case (menuLinksLength > 9):
        numberOfColumns = 4;
        break;
    default:
        numberOfColumns = 0;
}
like image 522
moefinley Avatar asked Oct 05 '11 08:10

moefinley


People also ask

Can we use switch in JavaScript?

The switch statement is a part of JavaScript's "Conditional" Statements, which are used to perform different actions based on different conditions. Use switch to select one of many blocks of code to be executed. This is the perfect solution for long, nested if/else statements.

What is not allowed in a switch statement?

The switch statement doesn't accept arguments of type long, float, double,boolean or any object besides String.

Can we use return in switch case in JavaScript?

The JavaScript switch statement can contain return statements if it is present inside a function. The function will return the value in the switch statement and the code after the switch statement will not be executed.

What can I use instead of a switch statement JavaScript?

Luckily, JavaScript's object literals are a pretty good alternative for most switch statement use-cases I can think of. The idea is to define an object with a key for each case you would have in a switch statement. Then you can access its value directly using the expression you would pass to the switch statement.


3 Answers

Personally I wouldn't like seeing reversed switch in a code base. It doesn't buy you anything when compared to a plain if/elseif block, and its exotic nature can be cause for confusion.

That's also what JSLint is complaining about:

You are doing something unorthodox. Is there a good reason for it? If not, it might be better to stick to the basics.

like image 147
Jon Avatar answered Sep 29 '22 09:09

Jon


The third edition of the ECMA-262 standard (supported by Firefox 1.0+, Google Chrome 1.0+, MSIE 5.5+ and others) defines that

switch (expression) {
    case label1:
        statements1
    .
    .
    .
}

executes statements1 if (expression) matches label1.

That means that your switch statement is perfectly fine.

I tried it out on Firefox, Chrome and IE. None complains...

Edit:

Now the guessing part:

JSLint is a code anaylisis tool. When it sees switch (true), it assumes that you don't know what you're doing. Weird doesn't mean necessarily wrong...

like image 44
Dennis Avatar answered Sep 29 '22 09:09

Dennis


numberOfColumns = Math.max(4, Math.floor(menuLinksLength / 3));

This will give you identical results to your existing code. Your question is fairly ambiguous, as "acceptable" is a very subjective term. I would personally reject any merge request with a reversed switch statement, because I actually can't think of a situation where that couldn't be replaced with something simpler and/or easier to read.

like image 26
Tex Andersen Avatar answered Sep 29 '22 08:09

Tex Andersen