JavaScript: right switch-case statement - javascript

My code is such:
switch(typeof src) {
case 'string':
case 'boolean':
return String(src).toLowerCase().indexOf(value.toLowerCase()) > -1;
case 'object':
return true;
default:
return false;
}
but code checker say that: n unconditional "break" statement shall terminate every non-empty switch-clause
will it be right and normal if I will write it so?
switch(typeof src) {
case 'string':
case 'boolean':
return String(src).toLowerCase().indexOf(value.toLowerCase()) > -1;
break;
case 'object':
return true;
break;
default:
return false;
// in default i need it or not?
}
or I missed somewhat else?

Your code checker is wrong then, because a return terminates the entire function in which the switch statement resides.
Anything after a return (like the break it wants you to put there) will be unreachable and never executed.
Whether or not this is beautiful or good practise is debatable, but I would say it is OK.
If you do not have a return statement or anything else that terminates the current block or jumps out of it (like continue inside a loop), then you usually want to put a break and the end of each case block to prevent fallthrough, but there are actually cases where you want fallthrough.
So your code checker is more of an opinion checker really.

No, break statement is not necessary if you return from a default case.
You must add break statement for all your cases which you want to operate and stop switch's work, otherwise default is operated returning from function.

Switch Pattern from "JavaScript Patterns" by Stoyan Stefanov.
var inspect_me = 0,
result = '';
switch (inspect_me) {
case 0:
result = "zero";
break;
case 1:
result = "one";
break;
default:
result = "unknown";
}

Related

url checker with includes()

i'm trying to make a url checker with js, this is the part of the code i'm having trouble with:
switch (true) {
case document.location.pathname.includes("/account"):
presenceData.details = "Viewing account..."
break
case document.location.pathname.includes("/mylist"):
presenceData.details = "Viewing list..."
break
}
}
the url I am working with is {example.com}/account/profiles/mylist and when I test /mylist it keeps showing me "Viewing account..."
what can I change to make /account not interfer /mylist?
The problem here is that {example.com}/account/profiles/mylist contains both the strings "/account" and "/mylist". So when you hit your first case, a match is made, and then you break out of the switch.
let pathname = '/account/profiles/mylist';
switch (true) {
case pathname.includes("/account"):
console.log("Viewing account...");
break;
case pathname.includes("/mylist"):
console.log("Viewing list...");
break;
}
If you know that /mylist is always going to be deeper in the hierarchy, beneath /account, you could just switch the order of the cases:
let pathname = '/account/profiles/mylist';
switch (true) {
case pathname.includes("/mylist"):
console.log("Viewing list...");
break;
case pathname.includes("/account"):
console.log("Viewing account...");
break;
}
Otherwise, you may need a more nuanced logic approach, and you may wish to avoid using switch statements in favor of if/else statements, as there are some peculiarities to a switch (specifically, that once a single case is met all other case blocks will be interpreted as matching until you break).
EDIT:
OR, another alternative would be to leverage endsWith instead:
let pathname = '/account/profiles/mylist';
switch (true) {
case pathname.endsWith("/account"):
console.log("Viewing account...");
break;
case pathname.endsWith("/mylist"):
console.log("Viewing list...");
break;
}
FULL DISCLOSURE -- as I was typing this edit esqew posted the same solution.
Why not use endsWith() instead...?
switch (true) {
case document.location.pathname.endsWith("/account"):
presenceData.details = "Viewing account..."
break
case document.location.pathname.endsWith("/mylist"):
presenceData.details = "Viewing list..."
break
}
}
Tangential, but switch statements are (IMO) outdated and become difficult to read/maintain (considering the necessity of breaking every condition); additionally, your use of switch (true) is somewhat abusing what a switch is meant to accomplish. You probably should be simply using if/else if statements anyway:
if (document.location.pathname.endsWith("/account")) {
presenceData.details = "Viewing account...";
}
else (document.location.pathname.endsWith("/mylist")) {
presenceData.details = "Viewing list...";
}

How does that switch case work in JS? What does mean switch(true)?

I am currently working on project, where are parts of code that I don't understand. One of them you can see below (written in JS):
switch (true) {
case parseInt(data):
return 'data';
case parseInt(row):
return 'row';
default:
return 'default';
}
I created JSFiddle to test this switch(true) statement and to see how it behaves. It always returns 'default' string. Can someone explain to me what is happening there, please?
JSFiddle switch test
A switch in JavaScript simply compares if the value of the case is strictly equal (===) to what’s inside the switch (in this case true). This is usually used to compare strings, but booleans would also work, although it is less common. Take the following example:
switch (true) {
case 1 + 1 === 3:
return 'A';
case 2 * 2 === 4:
return 'B';
default:
return 'C';
}
This code would return 'B' as it is the first case to match true. If none of the cases would match true, it would return 'C'.
Regarding your specific scenario; I would recommend rewriting your code to the following:
if (parseInt(data) === true) {
return 'data';
}
if (parseInt(row) === true) {
return 'row';
}
return 'default';
This code does the exact same thing as yours, but it is immediately clear to the reader what is happening.
I am not sure what your goal is with this function, so I cannot recommend the best way to solve your problem. Although, I can explain to you why it might not be working.
The parseInt function will always return a number or NaN (in case the input cannot be parsed). Although a number can be truthy, it will never be strictly true. That's why your function always returns 'default'. Again, I don't know what your goal is, but you might want to check if the value is truthy instead of true:
if (parseInt(data)) {
// Data can be parsed to a number and is not 0
return 'data';
}
if (parseInt(row)) {
// Row can be parsed to a number and is not 0
return 'row';
}
return 'default';
It'll execute the first case that evaluates to true. If no case is true, it'll execute the default block
For example:
switch (true) {
case 1 === 1:
console.log('ok1');
break;
case 2 === 2:
console.log('ok2');
break;
default:
console.log('not ok');
}
will console.log('ok1')

Switch case match with string

function getFieldType(value){
var type = "";
switch(value){
case "TEXT_BOX":
type=FieldTypeEnum.TEXT_BOX;
break;
case "PASSWORD":
type=FieldTypeEnum.PASSWORD;
break;
case "CHECK_BOX":
type=FieldTypeEnum.CHECK_BOX;
break;
case "RADIO_BUTTON":
type=FieldTypeEnum.RADIO_BUTTON;
break;
case "DROP_DOWN":
type=FieldTypeEnum.DROP_DOWN;
break;
case "SEARCH_CARD_BOX":
type=FieldTypeEnum.SEARCH_CARD_BOX;
break;
case "STATE_DROP_DOWN":
type=FieldTypeEnum.STATE_DROP_DOWN;
break;
case "ID_DROP_DOWN":
type=FieldTypeEnum.ID_DROP_DOWN;
break;
case "GENDER_DROP_DOWN":
type = FieldTypeEnum.GENDER_DROP_DOWN;
break;
default:
type = "";
}
return type;
}
I want to combined three drop down box (STATE_DROP_DOWN, ID_DROP_DOWN, GENDER_DROP_DOWN)into one .
Means I want something like below :
case String.endwith("_DROP_DOWN"):
type=FieldTypeEnum.ID_DROP_DOWN;
break;
Is it possible in JavaScript? If yes then how?
It is possible, in a javascript switch/case statement you can compare for string equality (which evaluates to true or false) or more complex statements which just as when testing for string equality, also evaluate to true or false (e.g. String.endwith("_DROP_DOWN")). However personally I would prefer the following:
STATE_DROP_DOWN:
// intentional fall through
ID_DROP_DOWN:
// intentional fall through
GENDER_DROP_DOWN:
//.. do your stuff
break;
I believe this way it is more clearly through which switch case you are falling in a certain situation.
You can put a ternary operator in the case, and test if it ends with "DROP_DOWN" return value otherwise blank string.
switch(value){
case value.endsWith("_DROP_DOWN") ? value : '' {
type=FieldTypeEnum.ID_DROP_DOWN;
break;
}
}

How to use multiple cases in a switch statement

I found this answer in a question similar to mine, but I still have a doubt.
Use the fall-through feature of the switch statement. A matched case
will run until a break (or the end of the switch statement) is found,
so you could write it like:
switch (varName) {
case "afshin":
case "saeed":
case "larry":
alert('Hey');
break;
default:
alert('Default case');
}
This means "if varName is afshin && saeed && larry", or it means "if varName is afshin || saeed || larry"?
Thanks in advance!
As the previous answer said
A matched case will run until a break (or the end of the switch statement) is found
To better understand how this works, consider this example:
switch (varName) {
case "afshin":
alert("afshin");
case "saeed":
alert("saeed");
case "larry":
alert('larry');
break;
default:
alert('Default case');
}
Since only the "larry" case has the break,
if varName == "afshin", you will get 3 alerts ("afshin","saeed","larry")
if varName == "saeed", you will get 2 alerts ("saeed","larry")
if varName == "larry", you will get 1 alert ("larry")
This is why it is very important to break all of your cases unless you absolutely mean for the case statement to drop through to the next one.
Long story short, writing:
case "afshin":
case "saeed":
case "larry":
alert("hi");
break;
is the equivalent of
if(varName == "afshin" || varName == "saeed" || varName == "larry"){
alert("hi");
}

trouble with SWITCH javascript always executing default case

well i have this trouble and ive been dealing with but i just cant get it to work
i have this function
function getDirections(dir)
{
var img;
switch(dir)
{
case 0:
img+='N.png';
break;
case 1:
img+='NE.png';
break;
case 2:
img+='E.png';
break;
case 3:
img+='SE.png';
break;
case 4:
img+='S.png';
break;
case 5:
img+='SO.png';
break;
case 6:
img+='O.png';
break;
case 7:
img+='NO.png';
break;
default:
alert('enetered default but direction='+dir);
}
return img;
}
quite simple right? now i have this interval set to 5000 ms to call getDirections(variable), the function works well the first time its called but after that , it always enter in the default clause and it also alerts the 'entered default but direction=dirvalue' , i mean even if dir is a value between 0-7 it will always enter to default: but it would alert the value so it was supossed to enter to one of the cases.
i made the same using else if and it worked so i dont know what its wrong with SWITCH
if(dir==0){img+='N.png';}
else if(dir==1){img+='NE.png';}
else if(dir==2){img+='E.png';}
else if(dir==3){img+='SE.png';}
else if(dir==4){img+='S.png';}
else if(dir==5){img+='SO.png';}
else if(dir==6){img+='O.png';}
else if(dir==7){img+='NO.png';}
That is weird... try to make sure that dir is an int, do this before the switch:
dir = parseInt(dir);
If the alert shows the value correctly it should enter the switch, but still it can "look" correct but be of a different data type. Do the conversion manually to ensure it's an int
I know I'm a bit late to the party, but I thought it might be important for anyone who doesn't understand why the "ifs" worked and the switch didn't. It's likely no one will read this answer, but I found it while searching for something else, so perhaps someone will find this helpful anyway:
Your switch is this:
function getDirections(dir) {
var img;
switch(dir) {
case 0:
img+='N.png';
break;
case 1:
img+='NE.png';
break;
case 2:
img+='E.png';
break;
case 3:
img+='SE.png';
break;
case 4:
img+='S.png';
break;
case 5:
img+='SO.png';
break;
case 6:
img+='O.png';
break;
case 7:
img+='NO.png';
break;
default:
alert('enetered default but direction='+dir);
}
return img;
}
This is not the same as a series of double equals (==) but a series of triple equals (===). It would be equivalent to:
if (dir === 0) {
img+='N.png';
} else if (dir === 1) {
img+='NE.png';
} else if (dir === 2) {
img+='E.png';
} else if (dir === 3) {
img+='SE.png';
} else if (dir === 4) {
img+='S.png';
} else if (dir === 5) {
img+='SO.png';
} else if (dir === 6) {
img+='O.png';
} else if (dir === 7) {
img+='NO.png';
} else {
alert('enetered default but direction='+dir);
}
In the world of "==", the integer 2 IS the same as the string "2", but not in the land of "===".
I'd guess that for some reason dir is being passed in as a string. Try changing case 1: to case '1':
Using an array instead of a chain of if/else blocks or a giant switch statement will be faster, more flexible and less error-prone. Also, you wouldn't have to worry if dir is a number or a string. Instead of:
if(dir==0){img+='N.png';}
else if(dir==1){img+='NE.png';}
else if(dir==2){img+='E.png';}
else if(dir==3){img+='SE.png';}
else if(dir==4){img+='S.png';}
else if(dir==5){img+='SO.png';}
else if(dir==6){img+='O.png';}
else if(dir==7){img+='NO.png';}
you can store the file names in an array:
var images = [
'N.png', 'NE.png', 'E.png', 'SE.png', 'S.png', 'SO.png', 'O.png', 'NO.png'
];
or arguably more readable:
var images = "N.png NE.png E.png SE.png S.png SO.png O.png NO.png".split(' ');
and then use just:
img = images[dir];
Full implementation of getDirections using an array would be:
var images = "N.png NE.png E.png SE.png S.png SO.png O.png NO.png".split(' ');
function getDirections(dir) {
var img = images[dir];
if (!img) {
alert("something");
}
return img;
}
Does it work for you?
If images is used only in that one function then you may want to store it as a property of the function to avoid your namespace pollution like this:
function getDirections(dir) {
var img = getDirections.images[dir];
if (!img) {
alert("something");
}
return img;
}
getDirections.images =
"N.png NE.png E.png SE.png S.png SO.png O.png NO.png".split(' ');
or use a closure.
Hard to explain why, but the default: case also need a break; statement after it like all the other cases.
I just ran the code in FireFox/FireBug and called the function this way
getDirections(0);
getDirections('1');
getDirections("2");
The first one does it correctly and the next two enter default.
They are strings and not integer which is what the cases are looking for.
I added
case "2":
img+='NO2.png';
break;
and then only the middle one entered the default. Obviously there is an issue with the way you are calling the function. It is likely passing a string.
I also used your if-else block (added an else{alert(dir);} and that returned the correct value for each call.
Javascript can do on the fly conversion (I think there's a better word for that) between strings and ints (and others). This is occuring when you do the comparrison using ==. If you change the comparison in the ifs to === you get the same behavior as with the switch block.
I pasted your code into an HTML file and ran it with the following buttons:
<button onclick="alert(getDirections(2))">Switch / Int</button>
<button onclick="alert(getDirections('2'))">Switch / String</button>
<button onclick="alert(getDirections2(2))">If-Else / Int</button>
<button onclick="alert(getDirections2('2'))">If-Else / String</button>
When calling the switch-version with a plain 2, it works as expected. Calling it with '2' makes it drop through to the default line. The if-else version works as expected in both cases. So the issue is probably that switch doesn't do an implicit conversion and == does.

Categories

Resources