JS - Evaluation with function within switch-case - javascript

I have objects with ids like alternative1, alternative2 etc. I want to style all of these the same way so I'm trying:
switch (feature.id) {
case 'marker':
...
break;
case feature.id.includes('alternative'):
case 'connectionMarker':
... //add styling
break;
This does not seem to work. How could I do this?

You can use a simple trick:
switch (feature.id) {
case 'marker':
...
break;
case (feature.id.includes('alternative') ? feature.id : !feature.id):
// your code here
break;
case 'connectionMarker':
...
break;
}
Since feature.id is always a string value, !feature.id will always return false. Hence, if feature.id includes "alternative" this line:
case (feature.id.includes('alternative') ? feature.id : !feature.id):
becomes:
case feature.id:
which will always be the case (as feature.id === feature.id). Otherwise, the line evaluates to:
case 0:
which will be skipped by the interpreter.

Related

DIfferent between break and return in swith loop JS ? And what using in my logic ( looking code ) [duplicate]

This question already has answers here:
Difference between Return and Break statements
(14 answers)
Closed 2 years ago.
And i don't know is this good solution to using return or to use break?
switch (arg.seriesName) {
case 'Test':
return 'Test'
case 'One':
return 'One'
case 'two':
return 'two'
default:
break;
}
break will allow you the function to continue processing, whereas return will end the function. Returning out of the switch is fine if that's all you want to do in the function.
E.g.
Return
function foo(x) {
switch(x) {
case 'y':
return;
}
// This will never run if x === 'y'
}
Break
function foo(x) {
switch(x) {
case 'y':
break;
}
// This will still run if x === 'y'
}
Just to clarify, that one is a switch statement, not a loop.
Anyway, break is used to stop fall-through: that is, when one of the cases match, it prevents the other from matching as well.
The difference between return and break depends on your context: if you're inside a function, return will stop the execution of the function altogether, whereas break will make the switch statement only match one case and then go on with the execution.
A case clause used to match against expression. If the expression matches the specified valueN, the statements inside the case clause are executed until either the end of the switch statement or a break.
The break stops to execution the other cases.
In your example you return inside the case so it will left the function and return the value so there is no need for the break;
Here with the breaks in each case prints only the case which is hitting
const expr = 'Papayas';
switch (expr) {
case 'Oranges':
console.log('Oranges are $0.59 a pound.');
break;
case 'Mangoes':
case 'Papayas':
console.log('Mangoes and papayas are $2.79 a pound.');
// expected output: "Mangoes and papayas are $2.79 a pound."
break;
default:
console.log(`Sorry, we are out of ${expr}.`);
}
But if you forget the break it also prints out the cases after the hitting one
const expr = 'Papayas';
switch (expr) {
case 'Oranges':
console.log('Oranges are $0.59 a pound.');
case 'Mangoes':
case 'Papayas':
console.log('Mangoes and papayas are $2.79 a pound.');
// expected output: "Mangoes and papayas are $2.79 a pound."
default:
console.log(`Sorry, we are out of ${expr}.`);
}

How to use switch to compare values between values

I'm learning JavaScript with a very basic and simple Level Upper system by a button using a XP Table to set var named Level a value and print it.
How can I use the switch statement to compare numbers between 10 and 20 as example, and return a var named Level the value of 2(Lv. 2)?
I've tried using "case 10...20" (3 dots as in another languages) but it didn't work!
I tried to use if statement, but it doesn't work properly. :/
var Exp = 1;
var Level = 1;
function MaisExp()
{
Exp++;
document.getElementById("console").innerHTML = "+1 XP! | "+" Total: "+Exp+" xp points";
VerLevel();
}
function VerLevel()
{
switch(Exp)
{
case 0...10: ***< --- dots didn't work.***
{
Level=1;
}
case 20:
{
Level=2;
}
case 40:
{
Level=1;
}
case 80:
{
Level=1;
}
}
document.getElementById("tela").innerHTML = Level;
}
You can use if statements like this:
if(Exp >= 0 && Exp <= 10)
{
}
else if(Exp <= 20)
{
}
else if(Exp <= 30) etc...
The case statement doesn't work with multiple validations, it can only handle one per case. However, you can list multiple cases, for example:
switch(age){
case 0:// If age is 0, it would enter here, since there is no "break;" it goes down to 1
case 1:// Same as above
case 2:// Same as above
case 3:// Since this one has a break, this code is executed and then the switch terminates
console.log('This toy is not right for this person');
break;
default:// This special case fires if age doesn't match any of the other cases, or none of the other cases broke the flow
console.log('This toy is good for this person');
}
So, in your code, it should be something like:
switch(Exp)
{
case 0:
case 1:
case 2:
case 3:
case 4:
case 5:
case 6:
case 7:
case 8:
case 9:
case 10:
Level=1;
break;
case 20:
Level=2;
break;
case 40:
Level=1;
break;
case 80:
Level=1;
break;
}
But, since you want all to be level 1, but 20, you could also use the default case, like this:
switch(Exp)
{
case 20:
Level=2;
break;
default:
Level=1;
}
While you have already a default value of 1, you could take it in the function and check onle the condition for level = 2.
function VerLevel() {
Level = 1;
if (Exp === 20) {
Level = 2;
}
document.getElementById("tela").innerHTML = Level;
}
I suggest to change the style of variable and function to start with lower case letters, because functions with upper case letters denotes instanciable/constructor functions, which can be uses with new operator.

Switch with random not working

This is my current jScript code:
(modified STILL doesn't work)
function changeBG(){
document.getElementById('imgbox').src = switch(eval(rand())){
case 1: "img/img3.jpg";
break;
case 2: "img/img2.jpg";
break;
case 3: "img/img3.jpg";
break;
case 4: "img/img4.jpg";
break;
case 5: "img/img5.jpg";
break;
default: "img/background.jpg";
break;
}
}
function rand(){
return (Math.ceil((Math.random()*10)/2));
}
my HTML:
<input id="BGchange" type="button" onclick="changeBG()" value=">"/>
If I do something like this:
document.getElementById('imgbox').src = "img/img1.jpg";
It just works: I click on my button, the image changes, no problem. Fact is I want the image to change to a random one between 5 each time the button is clicked; to do this I wanted to use a switch that works with a random choice inside it.
What is wrong with my coding?! :( (I cant use jQuery or anything, just pure javascript, html and css, thats what the professor said at least)
Thank you <3
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/switch
The switch-statement "executes" your Strings ("img/imgX.jpg") instead of returning them, so you may want put the switch in a function and then do
case 1: return "img/img3.jpg";
...
and keep in mind that each case of a switch statement must be terminated with break, otherwise the following case-Blocks will be executed as well!
Your function return an integer, while your switch case is looking for a string.
Remove quotes from the switch cases and everything should work.
function changeBG(){
document.getElementById('imgbox').src = switch(rand()){
case 1: "img/img3.jpg";
break;
case 2: "img/img2.jpg";
break;
case 3: "img/img3.jpg";
break;
case 4: "img/img4.jpg";
break;
case 5: "img/img5.jpg";
break;
default: "img/background.jpg";
}
}

Switch statement for multiple cases in JavaScript

I need multiple cases in switch statement in JavaScript, Something like:
switch (varName)
{
case "afshin", "saeed", "larry":
alert('Hey');
break;
default:
alert('Default case');
break;
}
How can I do that? If there's no way to do something like that in JavaScript, I want to know an alternative solution that also follows the DRY concept.
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 works in regular JavaScript:
function theTest(val) {
var answer = "";
switch( val ) {
case 1: case 2: case 3:
answer = "Low";
break;
case 4: case 5: case 6:
answer = "Mid";
break;
case 7: case 8: case 9:
answer = "High";
break;
default:
answer = "Massive or Tiny?";
}
return answer;
}
theTest(9);
Here's different approach avoiding the switch statement altogether:
var cases = {
afshin: function() { alert('hey'); },
_default: function() { alert('default'); }
};
cases.larry = cases.saeed = cases.afshin;
cases[ varName ] ? cases[ varName ]() : cases._default();
In Javascript to assign multiple cases in a switch, we have to define different case without break inbetween like given below:
<script>
function checkHere(varName){
switch (varName)
{
case "saeed":
case "larry":
case "afshin":
alert('Hey');
break;
case "ss":
alert('ss');
break;
default:
alert('Default case');
break;
}
}
</script>
Please see example click on link
I like this for clarity and a DRY syntax.
varName = "larry";
switch (true)
{
case ["afshin", "saeed", "larry"].includes(varName) :
alert('Hey');
break;
default:
alert('Default case');
}
If you're using ES6, you can do this:
if (['afshin', 'saeed', 'larry'].includes(varName)) {
alert('Hey');
} else {
alert('Default case');
}
Or for earlier versions of JavaScript, you can do this:
if (['afshin', 'saeed', 'larry'].indexOf(varName) !== -1) {
alert('Hey');
} else {
alert('Default case');
}
Note that includes won't work in some browser including older IE versions, but you could patch things up fairly easily. See the question determine if string is in list in javascript for more information.
My situation was something akin to:
switch (text) {
case SOME_CONSTANT || ANOTHER_CONSTANT:
console.log('Case 1 entered');
break;
case THIRD_CONSTANT || FINAL_CONSTANT:
console.log('Case 2 entered');
break;
default:
console.log('Default entered');
}
The default case always entered. If you're running into a similar multi-case switch statement issue, you're looking for this:
switch (text) {
case SOME_CONSTANT:
case ANOTHER_CONSTANT:
console.log('Case 1 entered');
break;
case THIRD_CONSTANT:
case FINAL_CONSTANT:
console.log('Case 2 entered');
break;
default:
console.log('Default entered');
}
Adding and clarifying Stefano's answer, you can use expressions to dynamically set the values for the conditions in switch, e.g.:
var i = 3
switch (i) {
case ((i>=0 && i<=5) ? i : -1):
console.log('0-5');
break;
case 6: console.log('6');
}
So in your problem, you could do something like:
var varName = "afshin"
switch (varName) {
case (["afshin", "saeed", "larry"].indexOf(varName)+1 && varName):
console.log("hey");
break;
default:
console.log('Default case');
}
Although it is so much DRY...
In Node.js it appears that you are allowed to do this:
data = "10";
switch(data){
case "1": case "2": case "3": // Put multiple cases on the same
// line to save vertical space.
console.log("small");
break;
case "10": case "11": case "12":
console.log("large");
break;
default:
console.log("strange");
break;
}
This makes for much more compact code in some cases.
I use it like this:
switch (true){
case /Pressure/.test(sensor):
{
console.log('Its pressure!');
break;
}
case /Temperature/.test(sensor):
{
console.log('Its temperature!');
break;
}
}
Some interesting methods. For me the best way to solve is using .find.
You can give an indication of what the multiple cases are by using a suitable name inside your find function.
switch (varName)
{
case ["afshin", "saeed", "larry"].find(firstName => firstName === varName):
alert('Hey');
break;
default:
alert('Default case');
break;
}
Other answers are more suitable for the given example but if you have multiple cases to me this is the best way.
It depends. Switch evaluates once and only once. Upon a match, all subsequent case statements until 'break' fire no matter what the case says.
var onlyMen = true;
var onlyWomen = false;
var onlyAdults = false;
(function(){
switch (true){
case onlyMen:
console.log ('onlymen');
case onlyWomen:
console.log ('onlyWomen');
case onlyAdults:
console.log ('onlyAdults');
break;
default:
console.log('default');
}
})(); // returns onlymen onlywomen onlyadults
<script src="https://getfirebug.com/firebug-lite-debug.js"></script>
You can use the 'in' operator...
It relies on the object/hash invocation, so it's as fast as JavaScript can be.
// Assuming you have defined functions f(), g(a) and h(a,b)
// somewhere in your code,
// you can define them inside the object, but...
// the code becomes hard to read. I prefer it this way.
o = { f1:f, f2:g, f3:h };
// If you use "STATIC" code can do:
o['f3']( p1, p2 )
// If your code is someway "DYNAMIC", to prevent false invocations
// m brings the function/method to be invoked (f1, f2, f3)
// and you can rely on arguments[] to solve any parameter problems.
if ( m in o ) o[m]()
You can do this:
alert([
"afshin",
"saeed",
"larry",
"sasha",
"boby",
"jhon",
"anna",
// ...
].includes(varName)? 'Hey' : 'Default case')
or just a single line of code:
alert(["afshin", "saeed", "larry",...].includes(varName)? 'Hey' : 'Default case')
a little improvement from ErikE's answer
I can see there are lots of good answers here, but what happens if we need to check more than 10 cases? Here is my own approach:
function isAccessible(varName){
let accessDenied = ['Liam', 'Noah', 'William', 'James', 'Logan', 'Benjamin',
'Mason', 'Elijah', 'Oliver', 'Jacob', 'Daniel', 'Lucas'];
switch (varName) {
case (accessDenied.includes(varName) ? varName : null):
return 'Access Denied!';
default:
return 'Access Allowed.';
}
}
console.log(isAccessible('Liam'));
The problem with the above approaches, is that you have to repeat the several cases every time you call the function which has the switch. A more robust solution is to have a map or a dictionary.
Here is an example:
// The Map, divided by concepts
var dictionary = {
timePeriod: {
'month': [1, 'monthly', 'mensal', 'mês'],
'twoMonths': [2, 'two months', '2 months', 'bimestral', 'bimestre'],
'trimester': [3, 'trimesterly', 'quarterly', 'trimestral'],
'semester': [4, 'semesterly', 'semestral', 'halfyearly'],
'year': [5, 'yearly', 'annual', 'ano']
},
distance: {
'km': [1, 'kms', 'kilometre', 'kilometers', 'kilometres'],
'mile': [2, 'mi', 'miles'],
'nordicMile': [3, 'Nordic mile', 'mil (10 km)', 'Scandinavian mile']
},
fuelAmount: {
'ltr': [1, 'l', 'litre', 'Litre', 'liter', 'Liter'],
'gal (imp)': [2, 'imp gallon', 'imperial gal', 'gal (UK)'],
'gal (US)': [3, 'US gallon', 'US gal'],
'kWh': [4, 'KWH']
}
};
// This function maps every input to a certain defined value
function mapUnit (concept, value) {
for (var key in dictionary[concept]) {
if (key === value ||
dictionary[concept][key].indexOf(value) !== -1) {
return key
}
}
throw Error('Uknown "'+value+'" for "'+concept+'"')
}
// You would use it simply like this
mapUnit("fuelAmount", "ltr") // => ltr
mapUnit("fuelAmount", "US gal") // => gal (US)
mapUnit("fuelAmount", 3) // => gal (US)
mapUnit("distance", "kilometre") // => km
// Now you can use the switch statement safely without the need
// to repeat the combinations every time you call the switch
var foo = 'monthly'
switch (mapUnit ('timePeriod', foo)) {
case 'month':
console.log('month')
break
case 'twoMonths':
console.log('twoMonths')
break
case 'trimester':
console.log('trimester')
break
case 'semester':
console.log('semester')
break
case 'year':
console.log('year')
break
default:
throw Error('error')
}
One of the possible solutions is:
const names = {
afshin: 'afshin',
saeed: 'saeed',
larry: 'larry'
};
switch (varName) {
case names[varName]: {
alert('Hey');
break;
}
default: {
alert('Default case');
break;
}
}
If your case conditions are complex, many case value matches, or dynamic value match required, then it may be best to move that case matching logic to handler child functions.
In your case, if say you had thousands of usernames to match against for a security permissions check for example, this method is cleaner option, more extensible, exposing the high level multi-way branch logic without getting swamped in a long list of case statements.
switch (varName)
{
case checkPatternAdministrator(varName):
alert('Hey');
break;
case checkPatternUserTypeA(varName):
alert('Hey2');
break;
case checkPatternUserTypeB(varName):
alert('Hey3');
break;
default:
alert('Default case');
break;
}
function checkPatternAdministrator(varName) {
// Logic to check Names against list, account permissions etc.
// return the varName if a match is found, or blank string if not
var matchedAdministratorName = varName;
return matchedAdministratorName;
}
Here is one more easy-to-use switch case statement. which can fulfill your requirement. We can use the find method in the switch statement to get the desire output.
switch(varname){
case["afshin","saeed","larry"].find(name => name === varname):
alert("Hey")
break;
default:
alert('Default case');
break;
}
The switch statement is used to select one of many code blocks to execute based on a condition
the value in the switch expression is compared to the different values provided
if there is a match the code block related to it will be executed
if there is no match the default block is executed
syntax:
switch(expression) {
case x:
// code block
break;
case y:
// code block
break;
default:
// code block
}
NOTE:
It must be noted that if the break statement is omitted then the next block will be executed as well even if they does not match with switch expression. So don't forget to add the break statement at the end of each code block if you don't want to get the specified behaviour
A practical example:
the following code returns the current day of the week in strings based on an integer (provided by 'new Date().getDay()')
switch (new Date().getDay()) {
case 0:
day = "Sunday";
break;
case 1:
day = "Monday";
break;
case 2:
day = "Tuesday";
break;
case 3:
day = "Wednesday";
break;
case 4:
day = "Thursday";
break;
case 5:
day = "Friday";
break;
case 6:
day = "Saturday";
}
the code samples were taken from W3Schools
Another way of doing multiple cases in a switch statement, when inside a function:
function name(varName){
switch (varName) {
case 'afshin':
case 'saeed':
case 'larry':
return 'Hey';
default:
return 'Default case';
}
}
console.log(name('afshin')); // Hey
Cleaner way to handle that
if (["triangle", "circle", "rectangle"].indexOf(base.type) > -1)
{
//Do something
}else if (["areaMap", "irregular", "oval"].indexOf(base.type) > -1)
{
//Do another thing
}
You can do that for multiple values with the same result
Just change the switch condition approach:
switch (true) {
case (function(){ return true; })():
alert('true');
break;
case (function(){ return false; })():
alert('false');
break;
default:
alert('default');
}
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Example1</title>
<link rel="stylesheet" href="css/style.css" >
<script src="js/jquery-1.11.3.min.js" type="text/javascript"></script>
<script>
function display_case(){
var num = document.getElementById('number').value;
switch(num){
case (num = "1"):
document.getElementById("result").innerHTML = "You select day Sunday";
break;
case (num = "2"):
document.getElementById("result").innerHTML = "You select day Monday";
break;
case (num = "3"):
document.getElementById("result").innerHTML = "You select day Tuesday";
break;
case (num = "4"):
document.getElementById("result").innerHTML = "You select day Wednesday";
break;
case (num = "5"):
document.getElementById("result").innerHTML = "You select day Thusday";
break;
case (num = "6"):
document.getElementById("result").innerHTML = "You select day Friday";
break;
case (num = "7"):
document.getElementById("result").innerHTML = "You select day Saturday";
break;
default:
document.getElementById("result").innerHTML = "You select day Invalid Weekday";
break
}
}
</script>
</head>
<body>
<center>
<div id="error"></div>
<center>
<h2> Switch Case Example </h2>
<p>Enter a Number Between 1 to 7</p>
<input type="text" id="number" />
<button onclick="display_case();">Check</button><br />
<div id="result"><b></b></div>
</center>
</center>
</body>
You could write it like this:
switch (varName)
{
case "afshin":
case "saeed":
case "larry":
alert('Hey');
break;
default:
alert('Default case');
break;
}
For me this is the simplest way:
switch (["afshin","saeed","larry"].includes(varName) ? 1 : 2) {
case 1:
alert('Hey');
break;
default:
alert('Default case');
break;
}

JS switch case not working

I have a switch case statement that doesn't work. I've checked the input, it's valid. If user is 1, it goes to default. If user is any number, it defaults. What's wrong here? I don't know javascript well at all.
switch (user) {
case 1:
// stuff
break;
case 2:
// more stuff
break;
default:
// this gets called
break;
}
Make sure you are not mixing strings and integers.
Try:
switch (user) {
case "1":
// stuff
break;
case "2":
// more stuff
break;
default:
// this gets called
}
Problem is data type mismatch. cast type of user to integer.
Cast type of user variable to integer
switch (+user) {
case 1: .. //
}
Javascript is type-aware. So '1' is not the same as 1. In your case the "user" has to be numeric, not the string. You can cast it by just:
user = Number(user)

Categories