Return an image name based on an integer without using if-else

Question

How do I return an image name based on an integer? I have an idea but it uses loads of if and else cases.

So here's the deal, I need a function which would return the name of an image based on an integer between 1 and 500. If the integer is between 1 and 30, I display image1 and from this point on I return a different image at 50, 75, 100, 125, 150, 175, 200, ...etc.

The first idea that comes to mind is using IFs and Elses like that:

if (number >=1 && number <= 29) {
    Return image1
} else if (number >=30 && number <=49) {
    Return image2
} else if... etc

But this function will become huge since I'll have around 20 If Else in order to cover all possible outcomes until number 500.

The other option is to create a JSON object with key: value pairs and get the image using the integer key like this:

returnImage(int) {
    let images = {
        30: 'image1',
        50: 'image2',
        75: 'image3'
    }

    return images[int]
}

Sadly I'm not sure how to make this work if the integer is 37 for example. I could obviously list all integers as keys but then the function would be even bigger than the if else function + there's gonna be a lot of repetition so that doesn't seem to work.

Any recommendations?

"create a JSON object" — It's just an Object, in the context of JavaScript. — Mr. Polywhirl
– Mr. Polywhirl, Commented Aug 23, 2019 at 16:05

Omri Attiya · Accepted Answer · 2019-08-23 16:44:20Z

7

You can use a mathematical calculation for this:

function returnImage(i) {
  let num = 1;
  if (i > 30)
    num = parseInt((parseInt(i / 25, 10) * 25 - 1) / 25, 10) + 2;
  return 'image' + num;
}

console.log(returnImage(10));
console.log(returnImage(30));
console.log(returnImage(49));
console.log(returnImage(50));
console.log(returnImage(74));
console.log(returnImage(100));
console.log(returnImage(125));
console.log(returnImage(130));
console.log(returnImage(200));
console.log(returnImage(300));
console.log(returnImage(490));

edited Aug 23, 2019 at 16:44

answered Aug 23, 2019 at 16:06

Omri Attiya

4,0473 gold badges22 silver badges38 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

Mr. Polywhirl Over a year ago

This is the most succinct response; given the "step-by-25 after 30" pattern.

Onyx Over a year ago

Thanks, that works and looks great. The other answers are very good too but I think this one suits me the best.

Onyx Over a year ago

Hey sorry for the question but I just noticed that it doesn't return the right numbers. console.log(returnImage(30)); should return image2 instead of image1 . Image1 should be returned for every integer between 1 and 29 and image2 for 30 to 49. Why is that?

Omri Attiya Over a year ago

@Bobimaru in that case the calculation is a bit different. I updated the answer for you.

KolCrooks · Accepted Answer · 2019-08-23 16:09:18Z

2

Just loop through the keys in images.

 returnImage(num){
     let images= {
         30: 'image1',
         50: 'image2',
         75: 'image3'
     }
    for(let image in images){
     if(num <= image) return images[image];
    }
 }

EDIT: I would add some default image after the loop in the case that the number exceeds the max valued image.

answered Aug 23, 2019 at 16:09

KolCrooks

5441 gold badge5 silver badges12 bronze badges

2 Comments

Mr. Polywhirl Over a year ago

This works great for varying ranges, but if there is a pattern then Omri's answer would be faster.

KolCrooks Over a year ago

@Mr.Polywhirl true. I just wanted to give a different solution in the case that the ranges do change. My solution allows for more flexibility in the data.

9000 · Accepted Answer · 2019-08-23 16:28:50Z

2

What you need is a range.

const IMAGE_FOR_NUMBER = [
  [0, 9, "one.jpg"],
  [10, 19, "ten.jpg"],
  [20, 100, "many.jpg"],
];

function getImage(n, notFound="not-found.jpg") {
  for (const [min, max, image_name] of IMAGE_FOR_NUMBER) {
   if ((min <= n) && (n <= max)) return image_name; 
  }
  return notFound;
}

Note that it works for disjoint ranges, too

edited Aug 23, 2019 at 16:28

answered Aug 23, 2019 at 16:09

9000

41k9 gold badges70 silver badges108 bronze badges

Collectives™ on Stack Overflow

Return an image name based on an integer without using if-else

3 Answers 3

4 Comments

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

4 Comments

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related