Refactor switch-case statement in JavaScript code

Question

How can I reactor this code so that I can avoid repetition of dailogObj.image? I would have written a return statement if not for case 5 where I have two assignments.

getDialogData(imageNum): any {

    const dailogObj = {
      image: '',
      buttonName: 'Learn More'
    };

    switch (imageNum) {
      case 1:
        dailogObj.image = '../../../assets/images/Red-Image.png';
        break;
      case 2:
        dailogObj.image = '../../../assets/images/blue-image-orgl.png';
        break;
      case 3:
        dailogObj.image = '../../../assets/images/Green-Image-2.png';
        break;
      case 4:
        dailogObj.image = '../../../assets/images/Gold-Image.png';
        break;
      case 5:
        dailogObj.image = '../../../assets/images/green-img-orgl.png';
        dailogObj.buttonName = 'Read Her Story';
        break;
      case  6:
        dailogObj.image = '../../../assets/images/Red-Image-2.png';
        break;
      case  7:
        dailogObj.image = '../../../assets/images/Blue-Image-2.png';
        break;
      case 8:
        dailogObj.image = '../../../assets/images/Gold-Image-2.png';
        break;
    }

    return dailogObj;
}

Mureinik · Accepted Answer · 2018-06-11 06:30:17Z

You could extract that assignment to its own condition, and just use an array for setting the image property:

getDialogData(imageNum): any {
    const dailogObj = {
      image: '',
      buttonName: 'Learn More'
    };

    // Handle the default case if imageNum is not in range [1..9]
    if (imageNum >=1 && imageNum <=9) {
        // Special treatment of image number 5
        if (imageNum == 5) {
            dailogObj.buttonName = 'Read Her Story';
        }

        // If it is in range, pick the right image:
        var images = 
            ['../../../assets/imfages/Red-Image.png',
             '../../../assets/images/blue-image-orgl.png',
             '../../../assets/images/Green-Image-2.png',
             '../../../assets/images/Gold-Image.png',
             '../../../assets/images/green-img-orgl.png',
             '../../../assets/images/Red-Image-2.png',
             '../../../assets/images/Blue-Image-2.png',
             '../../../assets/images/Gold-Image-2.png']; 

        dailogObj.image = images[imageNum - 1];
    }
    return dailogObj;
}

com · Accepted Answer · 2018-06-11 06:26:24Z

0

images = {
    1: '../../../assets/images/Red-Image.png',
    2: '../../../assets/images/blue-image-orgl.png',
    ...
    8: '../../../assets/images/Gold-Image-2.png'
};

dailogObj.image = images[imageNum];
dailogObj.buttonName = imageNum == 5 ? 'Read Her Story' : 'Learn More';

Or you could create another object to store button names, just like image paths.

answered Jun 11, 2018 at 6:26

com

3953 silver badges10 bronze badges

Collectives™ on Stack Overflow

Refactor switch-case statement in JavaScript code

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related