Why "if" works but "switch" doesn't work? - javascript

// It is simple code
var num = prompt("put number");
// This way is not worked
switch (num) {
case num > 0:
console.log("num++");
break;
case num < 0:
console.log(num-2);
break;
}
// But this worked
if (num > 0){
console.log(num++);
} else if (num < 0){
console.log(num -2);
}
My first way by "switch" is not worked but "if" method worked.
I tried all of thing for changing code or other ways but the same result.
Please guys help me.

Because the statement num > 0 inside you case will return true or false.
If you do this:
switch (true) {
case num > 0:
console.log("num++");
break;
case num < 0:
console.log(num-2);
break;
}
It will work.

Cases cannot be expressions, you must normalize your input first.
Although it is valid to place an expression in a case, in this scenario a more tried-and-true way of dealing with this is to first normalize your input first.
You can determine direction for example:
var num = parseInt(prompt("put number"), 10);
var direction = num < 0 ? -1 : 1;
switch (direction) {
case 1:
console.log("num++");
break;
case -1:
console.log(num - 2);
break;
}

The switch acts as a case switcher, meaning you cannot make comparisons to create cases, just list cases by case, and perform some function from this case. The if / else structure is suitable for making comparisons, as the expected result in the if call is always a boolean.
Example:
const a = 1;
if (a === 1) {
console.log('hello');
} else {
console.log('sad');
switch (a) {
case 1 : console.log('hello'); break;
default: console.log('sad'); break;
In your case, I recommend using if/else if/else, as it is more recommended.

Related

Better way than using multiple if

I have a simple problem: I need to roll two sets of dice. For each number possible in the first roll, there are a set of conditionals that I then check against the second roll. The conditionals for each roll are different.
The problem, to me, is that something like this repeated roughly thirty times seems like a gross thing to stick in my code:
if (roll == 3) {
if (secondRoll < 5) {
do this
}
else if (secondRoll > 5 && secondRoll < 10) {
do this
}
else {
do this
}
}
if ...... and so on
So what do I do? Is there a more elegant way to do this? I've thought about something like this:
class Result {
constructor(firstRoll, secondRollMin, secondRollMax, output) {
this.firstRoll;
this.secondRollMin;
this.secondRollMax;
this.output;
}
}
and then checking the rolls against matching properties in a set of objects, but I'm not sure that's honestly any better. Any thoughts would be appreciated.
Just a small improvement, but you only need to check the upper bound of the range in each subsequence else if:
if (roll == 3) {
if (secondRoll < 5) {
do this
}
else if (secondRoll < 10) { // secondRoll must be >= 5 already
do this
}
else {
do this
}
}
Use Switch to simplify
switch (roll) {
case 1-4:
// Do something.
break;
case 5-8:
// Do something.
break;
case 9-11:
// Do something.
break;
default:
break;
}
How about creating a key for the combination and a bit simpler if/else? You could combine any combination that has the same action.
const combo = `${roll}-${secondRoll}`;
if (['1-1', '1-2', '1-3', '3-4', '3-5', '3-6'].includes(combo) {
// Do this
} else if (['1-4', '1-5', '1-6', '3-1', '3-2', '3-3'].includes(combo) {
// Do this
// ...
} else if (['6-4', '6-5', '6-6'].includes(combo) {
// Do this
}
Or create a switch/case:
const combo = `${roll}-${secondRoll}`;
switch (combo) {
case '1-1':
case '1-2':
case '1-3':
case '3-4':
case '4-5':
case '5-6':
// Do this
break;
case '1-4':
case '1-5':
case '1-6':
case '3-1':
case '4-2':
case '5-3':
// Do this
break;
// ...
case '6-4':
case '6-5':
case '6-6':
// Do this
break;
}
You can try a mixture of if, else and switch blocks. You can use different methods to call based on the first roll. A switch statement is usually more efficient than a set of nested ifs.
class Result {
constructor(firstRoll, secondRollMin, secondRollMax, output) {
this.firstRoll;
this.secondRollMin;
this.secondRollMax;
this.output;
switch(firstRoll){
case 1:
this.output = oneToXTime(secondRollMin,secondRollMin)
break;
case 2:
this.output = twoToXTime(secondRollMin,secondRollMax)
break;
case 3:
this.output = threeToXTime(secondRollMin,secondRollMax)
break;
case 4:
this.output = fourToXTime(secondRollMin,secondRollMax)
break;
case 5:
this.output = fiveToXTime(secondRollMin,secondRollMax)
break;
case 6:
this.output = sixToXTime(secondRollMin,secondRollMax)
break;
}
}
static String oneToXTime(secondRollMin,secondRollMin) {
String result = ""
if (secondRollMin < 5) {
result = "My result"
}
else if (secondRollMin < 10) {
result = "My result 2"
}
return result
}
static String twoToXTime(secondRollMin,secondRollMin) {
String result = ""
if (secondRollMin < 5) {
result = "My result"
}
else if (secondRollMin < 10) {
result = "My result 2"
}
return result
}
static String threeToXTime(secondRollMin,secondRollMin) {
// Same as above...
}
static Stfing fourToXTime(secondRollMin,secondRollMin) {
// Same as above...
}
static String fiveToXTime(secondRollMin,secondRollMin) {
// Same as above...
}
static String sixToXTime(secondRollMin,secondRollMin) {
// Same as above...
}
}

Javascript operators in switch case

I'm creating a panel and there are stats for memory, CPU and HDD. I'm using a switch statement and in the case method, I'm putting the current usage of CPU, memory and HDD.
However, the problem is that I'm using operators and I don't know which operator to use because I've tried all of them and I didn't get the results that I expected.
And this is the code: https://pastebin.com/YaxCm0Be
switch(true){
case (mem_percent_get <= 0.01):
var mem_progress_color = 'progress-bar-primary';
break;
case (mem_percent_get <= 33):
var mem_progress_color = 'progress-bar-success';
break;
case (mem_percent_get <= 66):
var mem_progress_color = 'progress-bar-warning';
break;
case (mem_percent_get <= 80):
var mem_progress_color = 'progress-bar-danger';
break;
default:
mem_progress_color = 'progress-bar-theme';
}
switch(true){
case (cpu_percent_get <= 33):
var cpu_progress_color = 'progress-bar-success';
break;
case (cpu_percent_get <= 66):
var cpu_progress_color = 'progress-bar-warning';
break;
case (cpu_percent_get <= 80):
var cpu_progress_color = 'progress-bar-danger';
break;
default:
cpu_progress_color = 'progress-bar-primary';
}
switch(true){
case hdd_percent_get <= 0.01:
var hdd_progress_color = 'progress-bar-primary';
break;
case hdd_percent_get <= 30:
var hdd_progress_color = 'progress-bar-success';
break;
case hdd_percent_get <= 60:
var hdd_progress_color = 'progress-bar-warning';
break;
case hdd_percent_get <= 80:
var hdd_progress_color = 'progress-bar-danger';
break;
default:
hdd_progress_color = 'progress-bar-theme';
}
Well, my first comment is to not use a switch in this case. What you are doing is essentially if () { } else if() {} blocks. You should be using switch when you have a value that you want to strictly check against. I suggest looking into at the MDN docs for switch.
Secondly, from what I can gather is that for the memory, you need it to be red when the value is 1696 / 2098 (80.83%). All of your if/elseif cases rely on <= which would mean that the value must be less than or equal to the number on the right of the equation. In your case, you are looking for <= 80, and without seeing how you calculate mem_percent_get (if it is in the pastebin, I'm unable to open that on my current network), you're value is likely above 80.
For your danger, you likely want 80-100+% as being red, so you should be using >= or greater than or equal to operator.
MDN has an excellent resources on comparison operators.
Created a getClassName method that accepts a percent and will return a className:
const getClassName = percent => {
switch(true){
case (percent <= 0.01):
return 'progress-bar-primary';
case (percent <= 33):
return 'progress-bar-success';
case (percent <= 66):
return 'progress-bar-warning';
case (percent <= 80):
return 'progress-bar-danger';
default:
return 'progress-bar-theme';
}
}
console.log('0: ', getClassName(0));
console.log('40: ', getClassName(40));
console.log('50: ', getClassName(50));
console.log('80: ', getClassName(80));
console.log('100: ', getClassName(100));

Why isn't my jquery switch statement working?

I am trying a jquery (javascript) switch statement with some simple operators but it isn't working as expecting
console.log('test '+getShippingCost(8));
function getShippingCost(shop_qty) {
shipping_costs = 0;
dest = $("input[name='dest']").val();
console.log(dest);
if (dest === 'DOMESTIC') {
switch (shop_qty) {
case (shop_qty > 4):
shipping_costs = 3.5;
break;
case (shop_qty <= 4):
shipping_costs = 2;
break;
}
console.log('domestic shipping '+shipping_costs);
}
if (dest === 'INT') {
switch (shop_qty) {
case (shop_qty > 4):
shipping_costs = 4.5;
break;
case (shop_qty <= 4):
shipping_costs = 3;
break;
}
}
return shipping_costs;
}//end function
see see jsfiddle
To use conditions for the cases in a switch, you would look for a true value among the cases:
switch (true) {
case (shop_qty > 4):
shipping_costs = 3.5;
break;
case (shop_qty <= 4):
shipping_costs = 2;
break;
}
As the second case is the inverse of the first, you can just use default for that:
switch (true) {
case (shop_qty > 4):
shipping_costs = 3.5;
break;
default:
shipping_costs = 2;
break;
}
Such a construct fits better when you have several conditions. You should consider if an if statement would be a better fit in this case:
if (shop_qty > 4) {
shipping_costs = 3.5;
} else {
shipping_costs = 2;
}
As both cases assign a value to the same variable, you can also write it using the conditional operator:
shipping_costs = shop_qty > 4 ? 3.5 : 2;
Cases in switch statements evaluate values, not boolean expressions: See Here.
You can put the logic suggested by your attempted use of the switch statement in a ternary expression, e.g.:
shipping_costs = (shop_qty > 4) ? 3.5 : 2;
Switch doesn't work by evaluating boolean expressions. Switch evaluates an initial expression and then tries to match the cases to that expression using strict equality. So you can't do
case(x<4.5):
You have to do something like
case 4:
Use if, else if, else statments instead.

Switch Statement with range value

I'm writing swtich javascript switch statement in JS file and figured out the problem whole day still cannot find the solution.
Here is my javascript file written in jQuery :
var percent = 20;
var widthbytes;
switch(percent)
{
case 0:
widthbytes=0;
break;
case (percent > 10 && percent < 20):
widthbytes=16;
break;
case (percent >=20 && percent < 30):
widthbytes=30;
break;
default:
widthbytes=0;
break;
}
average.width(widthbytes);
It always return to default instead of 30. Anything wrong with my codes ?
switch statement only check the value of variable and then give the result according to that value so your expression
case (percent > 10 && percent < 20):
return boolean value which is not not comparable to variable value. Use if-else to get the job done.
just make a bit change in your code.
You have switch(percent)**in your code, only change for this ***switch(true)*.
The reason for that is because the switch statement return a boolean value, this is why we need they have the same comparation, i.e. boolean vrs boolean.
For example the case 10: return one value; true or false.
I can't see a problems with #Carlos Marin's answer. This works:-
var percent = 10; //test values-> 10, 11, 19, 20, 21, 29, 30
var widthbytes;
switch(true){
// case 0:
// widthbytes=0;
// break;
case (percent > 10 && percent < 20):
widthbytes=16;
break;
case (percent >=20 && percent < 30):
widthbytes=30;
break;
default:
widthbytes=0;
break;
}
console.log(widthbytes);
switch statements don't work like that. Your second case is checked like this: if (percent == (percent > 10 && percent < 20)) ..., which will not yield the desired result.
You could use an if / elseif / else construct:
if (percent === 0) {
widthbytes = 0;
} else if (percent > 10 && percent < 20 {
widthbytes = 16;
} else if (percent >= 20 && percent < 30 {
widthbytes = 30;
} else {
widthbytes = 0;
}
Or you could use a function that turns the ranges into constants:
function getRange(percent) {
return Math.floor(percent/10);
}
switch(getRange(percent)) {
case 10:
widthbytes = 16;
break;
case 20:
widthbytes = 30;
break;
default:
widthbytes = 0;
}
Note that to get a cleaner implementation i assimilated your original case 0: into the default, since they both do the same thing. If that is not desirable, you need to change the getRange function to no longer return the same range for 0 as for any number between 0 and 10.

Does switch statement start comparing cases from the top in this example?

I found this example to make range work with switch statement:
function GetText(value)
{
var result;
switch (true)
{
case ((value >= 26) && (value <= 50)):
result = ">= 26.";
break;
case ((value >= 1) && (value <= 25)):
result = "Between 1 and 25.";
break;
case (value == 0):
result = "Equals Zero.";
break;
}
return result;
}
But if I modify the code and remove the second check for the value the example will still work:
function GetText(value)
{
var result;
switch (true)
{
case ((value >= 26)):
result = ">= 26 .";
break;
case ((value >= 1)):
result = "Between 1 and 25.";
break;
case (value == 0):
result = "Equals Zero.";
break;
}
return result;
}
So if I passed 29 even that I have two true cases the first one will be selected. My question is that how switch statement works in most of programming languages it will start comparing from the top or its only in this case (and is it good or bad to write it like that?).
switch statement checks for matches from top to bottom.
From MDN docs on switch statement:
If a match is found, the program executes the associated statements. If multiple cases match the provided value, the first case that matches is selected, even if the cases are not equal to each other.
I would do something like this (with if and else if chains):
function GetText(value) {
var result;
if (value == 0) {
result = "Equals Zero.";
} else if (value <= 25) {
result = "Between 1 and 25.";
} else if (value <= 50) {
result = "Between 26 and 50.";
}
return result;
}

Categories