How can I turn this else if statement into a switch statement?

Question

I created a function to check the current URL of a website each second & change the meta tag images in the <head> HTML element according to a certain value string. My code was perfectly, however I want to make my code more readable 7 optimized... so I want to turn this code into switch statement instead, but I am not able to figure it out by myself at this point.

Here is the code:

// Variable declarations
var imgOgSrc = $('meta[property="og:image"]');
var twitterImgSrc = $('meta[name="twitter:image:src"]');
var currentUrl;

// Checks for current url & changes meta tags depending on slug value
function getCurrentUrl(){
    currentUrl = window.location.href;
    
    if(currentUrl.toLowerCase().indexOf('python') >= 0) {
            imgOgSrc.attr('content', 'http://carrieres.nameofwebsite.com/static/img/custom-img.jpg');
            twitterImgSrc.attr('content', 'http://carrieres.nameofwebsite.com/static/img/custom-img.jpg');
    }   else if (currentUrl.toLowerCase().indexOf('java') >= 0) {
            imgOgSrc.attr('content', 'http://carrieres.nameofwebsite.com/static/img/custom-img.jpg');
            twitterImgSrc.attr('content', 'http://carrieres.nameofwebsite.com/static/img/custom-img.jpg');
    }   else if (currentUrl.toLowerCase().indexOf('php') >= 0) {
            imgOgSrc.attr('content', 'http://carrieres.nameofwebsite.com/static/img/custom-img.jpg');
            twitterImgSrc.attr('content', 'http://carrieres.nameofwebsite.com/static/img/custom-img.jpg');
    }
        else {
            imgOgSrc.attr('content', currentUrl);
            twitterImgSrc.attr('content', currentUrl);
    }
}

For your use case, if statements would be the way to go. Checkout this answer that did speed tests: https://stackoverflow.com/a/12259830/3684265 — imvain2, Feb 08 '19 at 18:37
makes no sense to use switch when you are not looking for exact matches. — epascarello, Feb 08 '19 at 18:39
I am afraid that I don't understand Nina . Can you elaborate a bit more? @imvain2 thanks! I will take a look at this. — Manuel Abascal, Feb 08 '19 at 18:42
@epascarello I see, so you suggest that I leave my code the way it is? — Manuel Abascal, Feb 08 '19 at 18:42
@ManuelAbascal, Nina is saying that the URLs are all the same in your attr contents for the if statements. So if that wasn't a typo, you only need one if and an else. — imvain2, Feb 08 '19 at 18:45
I would match the url differently and I would combine the ifs since it is the same content in each. — epascarello, Feb 08 '19 at 18:47
Oh sorry, I didn't explain myself properly. The image will also change depending of the string. Anyway, I got the answered that I was looking. Thanks to everybody! You guys rock! — Manuel Abascal, Feb 08 '19 at 18:51

adiga · Answer 1 · 2019-02-08T18:44:41.710

Since all the if conditions have the same code, you could use some like this.

function getCurrentUrl() {
  currentUrl = window.location.href;
  const customUrlNeeded = ['python', 'java', 'php'].some(a => currentUrl.toLowerCase().includes(a))

  if (customUrlNeeded) {
    imgOgSrc.attr('content', 'http://carrieres.nameofwebsite.com/static/img/custom-img.jpg');
    twitterImgSrc.attr('content', 'http://carrieres.nameofwebsite.com/static/img/custom-img.jpg');
  } else {
    imgOgSrc.attr('content', currentUrl);
    twitterImgSrc.attr('content', currentUrl);
  }

}

Nina Scholz · Answer 2 · 2019-02-08T18:59:02.597

You could take an object for python, java and php with imgOgSrc and twitterImgSrc properties amd use a null property for not matching URL.

function getTarget(url) {
    const targets = { 
        python: {
            imgOgSrc: 'data1',
            twitterImgSrc: 'data2'
        },
        java: {
            imgOgSrc: 'data3',
            twitterImgSrc: 'data4'
        },
        php: {
            imgOgSrc: 'data5',
            twitterImgSrc: 'data6'
        },
        null: {                    // default values
            imgOgSrc: 'data7',
            twitterImgSrc: 'data8'
        }
    };
    return targets[url.toLowerCase().match(new RegExp(Object.keys(targets).join('|')))];
}

console.log(getTarget('blablajavabla'));
console.log(getTarget('blablabla'));

score 2 · Accepted Answer · answered Feb 08 '19 at 18:43

2

Try this:

var currentUrl;

function getCurrentUrl() {
  currentUrl = window.location.href.toLowerCase();

  var langType = function(type) {
    return currentUrl.indexOf(type) > -1;
  }

  switch (true) {
    case langType('python'):
      imgOgSrc.attr('content', 'http://carrieres.nameofwebsite.com/static/img/custom-img.jpg');
      twitterImgSrc.attr('content', 'http://carrieres.nameofwebsite.com/static/img/custom-img.jpg');
      break;

    case langType('java'):
      // ...
      break;

    case langType('php'):
      // ...
      break;

    default:
      // ...
      break;
  }
}

answered Feb 08 '19 at 18:43

Yom T.

8,760
2
32
49

yeah, it would work, but it is not the best solution. – epascarello Feb 08 '19 at 18:48
1

Not the best, yeah, I would personally go with Taki's solution myself. Was just trying to stick with OP's choice of using `switch`. – Yom T. Feb 08 '19 at 18:49

score 2 · Answer 4 · answered Feb 08 '19 at 18:45

instead of switch/case, you can store the images in an object, see if the currentUrl has the keyword, extract it then use it to get the values from that object :

// Variable declarations
var imgOgSrc = $('meta[property="og:image"]');
var twitterImgSrc = $('meta[name="twitter:image:src"]');
var currentUrl;

function getCurrentUrl(){
  currentUrl = window.location.href.toLowerCase();

  const obj = {
    python : {
      imgOgSrc : 'http://carrieres.nameofwebsite.com/static/img/custom-img.jpg',
      twitterImgSrc :  'http://carrieres.nameofwebsite.com/static/img/custom-img.jpg'
    },
    java : {
      imgOgSrc : 'http://carrieres.nameofwebsite.com/static/img/custom-img.jpg',
      twitterImgSrc :  'http://carrieres.nameofwebsite.com/static/img/custom-img.jpg'
    },
    php : {
      imgOgSrc : 'http://carrieres.nameofwebsite.com/static/img/custom-img.jpg',
      twitterImgSrc :  'http://carrieres.nameofwebsite.com/static/img/custom-img.jpg'
    }
  }

  const word = currentUrl.match(/php | java | python /gi)[0];

  if(word){
    imgOgSrc.attr('content', obj[word].imgOgSrc);
    twitterImgSrc.attr('content', obj[word].twitterImgSrc);    
  }
  else {
    imgOgSrc.attr('content', currentUrl);
    twitterImgSrc.attr('content', currentUrl);
  }
}

How can I turn this else if statement into a switch statement?

4 Answers4