How to turn if statement that use classList.contains() as condition to switch statement?

Question

How can I turn the following if/else if statement into switch statement? Is it possible to do so?

if(event.target.classList.contains("follow-user")){
        sendFollowRequest(event.target, 'subscribedUsers');
      } else if(event.target.classList.contains("follow-hashtag")){
        sendFollowRequest(event.target, 'subscribedHashtags');
      } else if(event.target.classList.contains("follow-cat")){
        sendFollowRequest(event.target, 'subscribedCategories');
      }

switch is meant for an exact comparison. I would just clean up the code so it is not so copy paste happy. — epascarello, Jun 15 '20 at 13:42
There's no good way of doing that; it seems fine the way it is. — Pointy, Jun 15 '20 at 13:42
Counter question: why? What is the benefit you expect from this? — VLAZ, Jun 15 '20 at 13:48

score 0 · Answer 1 · answered Jun 15 '20 at 13:55

A switch is really for matching exact matches. There are some bad practices where you can use true in the switch for the match. If you are looking to clean up the code. You can easily use variables to pull out common stuff, still will be a lot of code.

var target = event.target 
var cList = target.classList
if(cList.contains("follow-user")){
  sendFollowRequest(target, 'subscribedUsers');
} else if(cList.contains("follow-hashtag")){
  sendFollowRequest(target, 'subscribedHashtags');
} else if(cList.contains("follow-cat")){
  sendFollowRequest(target, 'subscribedCategories');
}

Other option is using an object and loop

var subscribedOptions = {
  'follow-user': 'subscribedUsers',
  'follow-hashtag': 'subscribedHashtags',
  'follow-cat': 'subscribedCategories',
}

function clicky(event) {
  var target = event.target;
  var cList = target.classList;
  
  Object.entries(subscribedOptions).forEach(function(req) {
    if (cList.contains(req[0])){
      sendFollowRequest(target, req[1]);
    }
  })

}

function sendFollowRequest(target, action) {
  console.log(target, action);
}

document.querySelectorAll(".bar").forEach(b => b.addEventListener("click", clicky))

<button class="foo bar follow-hashtag">foo bar follow-hashtag</button>
<button class="foo bar follow-user">foo bar follow-user</button>
<button class="foo bar follow-cat">foo bar follow-cat</button>

score 0 · Answer 2 · answered Jun 15 '20 at 13:56

You can do like this...

let follow = {"follow-user":"subscribedUsers", "follow-hashtag":"subscribedHashtags", "follow-cat":"subscribedCategories"}
Object.keys(follow).forEach(e=>{
      if(event.target.classList.contains(e)){
        sendFollowRequest(event.target, follow[e]);
      }
});

How to turn if statement that use classList.contains() as condition to switch statement?

2 Answers2