How to use ternary operator to select function

Question

The following snippet works

if (condition)
  node.addClass('myclass');
else
  node.removeClass('myclass');

but not this one

node[condition ? 'addClass' : 'removeClass']('myclass');

nor this one

(condition ? node.addClass : node.removeClass)('myclass');

If I test it with

console.log(node[condition ? 'addClass' : 'removeClass']);

the browser prints that it's a function. Why can't I call it?

`node[condition ? 'addClass' : 'removeClass']('myclass');` worked fine for me... What is node exactly? I tested it with `$("body")[(1===1) ? "addClass" : "removeClass"]("b")` — epascarello, Mar 08 '19 at 04:17
But seems like you are just reinventing toggleClass `node.toggleClass("foo", condition)` — epascarello, Mar 08 '19 at 04:19

score 1 · Answer 1 · answered Mar 08 '19 at 04:33

It apparently works the way I gave my examples here. It doesn't work with one extra level of indirection.

function print(x) {
  console.log(x);
  return x;
}

print(condition ? node.addClass : node.removeClass)('myclass');

With this code, Chrome tells me this:

Uncaught TypeError: Cannot read property '0' of undefined

But I found out I can circumvent the problem by using call to pass the node as this to the function.

print(condition ? node.addClass : node.removeClass).call(node,'myclass');

Obviously, the right solution in this specific case is to use toggleClass, as @epascarello pointed out. I'm a little surprised that this gets lost in this scenario.

score 0 · Answer 2 · answered Mar 08 '19 at 04:32

0

Can be toggled with vanilla java script

node.classList.toggle('myclass',condition);

answered Mar 08 '19 at 04:32

Murali Nepalli

1,588
8
17

score 0 · Answer 3 · answered Mar 08 '19 at 04:45

0

You can do this by assigning the function to a variable.

var twoLevel = {
  "foo" : {
    log: console.log
  },
  "bar" : {
    log: window.alert
  }
}

var fn = true ? twoLevel["foo"].log : twoLevel["bar"].log;
fn('test')

answered Mar 08 '19 at 04:45

Steven Stark

1,249
11
19

How to use ternary operator to select function

3 Answers3