I have this code that first reads which position of a checkbox is checked and then executes several ifs. Then I thought I could make the code smaller if I used switch/case, while also portfolio-ing the command for later uses. The command was like this:
if (fsex[0].checked {
gender = 'man'
if (age >= 0 && age <= 10) {
img.setAttribute('src', 'male-baby.png')
} else if
I tried using switch by changing the below "gender" line to something like this:
switch (age) {
case (age >=0 && age <= 10):
img.setAttribute('src', 'male-baby.png')
break
case ...etc
This didn't work.
Then I tried with case >=0, which then the VSCode immediatly returns a sintax error "expression expected.
Is there a way I can use switch/case to this one? Or I should just stick with several if/ else ifs?
You can use this "trick":
const age = 14;
switch(true)
{
case age > 5 && age <= 10:
console.log('bla 1');
break;
case age > 10 && age <= 20:
console.log('bla 2');
break;
case age > 20 && age <= 30:
console.log('bla 3');
break;
}Each case branch of a switch statement expects an expression, and the value of the expression will be compared to the initial argument. In this case, that means you are comparing age to either true or false (the result of the expression (age >= 0 && age <= 10). You can technically use switch (true) for this, but there isn't much value in doing so.
This said, there are other patterns that allow you to express what you are trying to do without a conditional with many branches. For example:
[
{ max: 10, callback: () => { img.setAttribute("src", "example.jpg") },
{ max: 15, callback: () => { ... },
{ max: 20, callback: () => { ... },
].find(({ max }) => max >= age)?.callback()
Or if you really don't care about others understanding the code in the future you can take advantage of consistent insertion-retrieval order:
const conditions = {
10: () => { console.log("a") },
15: () => { console.log("b") },
Infinity: () => { console.log("c") },
}
Object.entries(conditions).find(([max]) => max >= age)?.[1]()