CODEWITHSUNDEEP
javascriptjqueryswitch-statement
Manuel Abascal
Manuel Abascal

Reputation: 6382

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

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);
    }
}

Upvotes: 1

Views: 122

Answers (4)

Nina Scholz
Nina Scholz

Reputation: 386680

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'));

Upvotes: 3

Taki
Taki

Reputation: 17654

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);
  }
}

Upvotes: 2

adiga
adiga

Reputation: 35253

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);
  }

}

Upvotes: 3

Yom T.
Yom T.

Reputation: 9200

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;
  }
}

Upvotes: 2

Related Questions