patternjavascriptModerate
Categorising a number in JavaScript
Viewed 0 times
javascriptnumbercategorising
Problem
I've written a function that takes a number and returns a value depending on where that number lies on a pre-defined scale. That's probably a little confusing so I've put the code below and added a JSFiddle (although you might be better off in the dev console).
It works and it's fairly performant, it's just a bit icky. I've tried to come up with a better solution but it just feels ickier. Is there anything I'm missing that would make this a bit nicer? I was playing about with putting the sizes in an array so they're a little more JSON-ish, but then I got lost.
var getSize = function(number){
var sizes = {
100 : 'url_t',
240 : 'url_s',
320 : 'url_n',
500 : 'url_m',
640 : 'url_z',
800 : 'url_c',
1024 : 'url_l',
},
result = sizes[100];
for (var size in sizes){
if(number < size){
result = sizes[size];
break;
}
result = sizes[1024];
}
return result;
};
getSize(10) // returns url_t
getSize(130) // returns url_s
getSize(2000) // returns url_l
getSize(600) // returns url_zIt works and it's fairly performant, it's just a bit icky. I've tried to come up with a better solution but it just feels ickier. Is there anything I'm missing that would make this a bit nicer? I was playing about with putting the sizes in an array so they're a little more JSON-ish, but then I got lost.
Solution
You might not need to loop through an object, and a simple
As a side note, I've seem people use
You could still keep the sizes in an object:
Edit: A problem arises if you need to change the
switch statement would suffice.function getSize(number) {
switch (true) {
case number < 100: return "url_t";
case number < 240: return "url_s";
case number < 320: return "url_n";
case number < 500: return "url_m";
case number < 640: return "url_z";
case number < 800: return "url_c";
default: return "url_l";
}
}As a side note, I've seem people use
switch (true) before when they want to use some logic in their case's instead of just hard coded values. Kind of a nice alternative to an if-else construct, and would probably perform better than looping over an object using a for-in loop.You could still keep the sizes in an object:
var sizes = {
100 : 'url_t',
240 : 'url_s',
320 : 'url_n',
500 : 'url_m',
640 : 'url_z',
800 : 'url_c',
1024 : 'url_l'
};
function getSize(number) {
switch (true) {
case number < 100: return sizes[100];
case number < 240: return sizes[240];
case number < 320: return sizes[320];
case number < 500: return sizes[500];
case number < 640: return sizes[640];
case number < 800: return sizes[800];
default: return sizes[1024];
}
}Edit: A problem arises if you need to change the
sizes for your application. That's why I'm leaning towards the first function, which just a switch statement and hard coded values.Code Snippets
function getSize(number) {
switch (true) {
case number < 100: return "url_t";
case number < 240: return "url_s";
case number < 320: return "url_n";
case number < 500: return "url_m";
case number < 640: return "url_z";
case number < 800: return "url_c";
default: return "url_l";
}
}var sizes = {
100 : 'url_t',
240 : 'url_s',
320 : 'url_n',
500 : 'url_m',
640 : 'url_z',
800 : 'url_c',
1024 : 'url_l'
};
function getSize(number) {
switch (true) {
case number < 100: return sizes[100];
case number < 240: return sizes[240];
case number < 320: return sizes[320];
case number < 500: return sizes[500];
case number < 640: return sizes[640];
case number < 800: return sizes[800];
default: return sizes[1024];
}
}Context
StackExchange Code Review Q#57689, answer score: 13
Revisions (0)
No revisions yet.