How can I reorganize this group of if commands?

Question

Imagine that I have a variable called incomingValue , and I get a number from the API as a value. Values ​​range from 0 to 1, and I set two other variables depending on this value, using a bunch of if statements, as you see below.

var incomingValue; // Set by an API var setValueName; var setValueIcon; if (incomingValue < 0.10 ) { setValueName = 'something'; setValueIcon = 'something.png' } if (incomingValue > 0.09 && incomingValue < 0.20 ) { setValueName = 'somethingElse'; setValueIcon = 'somethingElse.png'; } 

In the actual implementation, I have about 10 statements checking specific intervals up to 1 . for example, do this if it is greater than 0.10 but less than 0.16, etc.

As a JavaScript beginner, it seems like this is not the right way to do something, even if it does its job. How would I reorganize this code?

Update: on request, I add a complete set of intervals that are used in the source code. I have not included a complete list before, because the intervals do not match a specific pattern.

• 0 to 0.09
• from 0.09 to 0.20
• from 0.20 to 0.38
• 0.38-0.48
• 0.48-0.52
• from 0.52 to 0.62
• 0.61 - 0.80
• 0.80 to 1

Answer 1

Remember the principle of shared responsibility. Output this code in a separate function:

 function determineNameAndIcon(incomingValue) { if (incomingValue < 0.10) { return { name: "something", icon: "something.png" }; } if (incomingValue < 0.20) { return { name: "somethingElse", icon: "somethingElse.png" }; } // etc return { name: "somethingDefault", icon: "somethingDefault.png" }; } // ... var incomingValue; // Set by an API const { name: setValueName, icon: setValueIcon } = determineNameAndIcon(incomingValue); 

Note that determineNameAndIcon is still a very long function with duplicate parts. This can be further reorganized into a data-driven version:

 const nameAndIconList = [ { maxValue: 0.10, name: "something", icon: "something.png" }, { maxValue: 0.20, name: "somethingElse", icon: "somethingElse.png" }, // ... ]; const nameAndIconDefault = { name: "somethingDefault", icon: "somethingDefault.png" }; function determineNameAndIcon(incomingValue) { for (let item of nameAndIconList) { if (incomingValue < item.maxValue) { return item; } } return nameAndIconDefault; } 

Answer 2

 function findValue(incomingValue){ var itemValues = [ [.06, "valueName", "valueIcon"], [.08, "valueName", "valueIcon"], [.09, "valueName", "valueIcon"], [.1, "valueName", "valueIcon"], ] var foundValues = itemValues. filter(v=>v[0] >= incomingValue) .sort(); if(foundValues.length == 0){ throw "incoming value not found." } return foundValues[0]; } let value = findValue(.079); console.log( value ); 

It is assumed that you want the lowest part of the range to be selected (just change the sort if you want it to be the highest).

Answer 3

An array solution in which you specify ranges for your results:

 var categories = [{something: [0, 0.1]}, {somethingElse: [0.1, 0.2]}, {somethingElse2: [0.2, 0.3]}, {anotherSomething: [0.3, 1]}]; function res(number){ return Object.keys(categories.filter(function(elem) { var key = elem[Object.keys(elem)]; return number >= key[0] && number < key[1] })[0])[0]}; var incomingValue = 0.12; var setValueName = res(incomingValue); var setValueIcon = res(incomingValue) + ".png"; console.log(setValueName, setValueIcon); 

Answer 4

Mb I will reorganize this code like this, but it is not a standard standard file:

 var incomingValue=0.08; // Set by an API var setValueName; var setValueIcon; switch(true) { case incomingValue < 0.10 : setValueName = "something"; setValueIcon ="something.png"; alert("Hello World !"); break; case incomingValue > 0.09 && incomingValue < 0.20 : setValueName = "somethingElse"; setValueIcon ="somethingElse.png"; alert("Hello !"); break; default : alert("Adele !"); break; } 

A mortal will use an if ... else if ... condition like this:

 var incomingValue; // Set by an API var setValueName; var setValueIcon; if (incomingValue < 0.10 ) { setValueName = "something"; setValueIcon ="something.png" } **else** if (incomingValue > 0.09 && incomingValue < 0.20 ) { setValueName = "somethingElse"; setValueIcon ="somethingElse.png" } 

But I don’t like it ... My opinion :)