Assign jQuery function to variable in ternary operator

Question

I am creating a simple forward/back function in a form with "Steps" and would like to implement a more effective solution to the situation below:

$('.botao').click(function(){
 if($(this).hasClass('avancar')) {
   $('.container').next()
 } else {
   $('.container').prev()
 }
})

I wonder if there is a possibility of doing something like:

$('.botao').click(function(){
  const action = $(this).hasClass('avancar') ? next() : prev();
  $('.container').action;
})

Answer 1

Your code at no time ceases to be effective by using if/else.

You will lose readability if you want to stop using them in situations like this. But you can, yes, use a ternary operator.

Simply determine a string with the name of the method you want to access using the ternary operator and get the value of the property (in this case it will be a function) using the bracket notation, to finally invoke it.

Thus:

$('.botao').click(function () {
  $('.container')[$(this).hasClass('avancar') ? 'next' : 'prev']();
});

Answer 2

Be possible is, now if this is a good thing I no longer know, I understand why this might sound interesting but the reading of the code can later be impaired. Anyway, you can do this by following one of the templates below.

First, when calling the function next() or prev() or any other with parentheses, you are not assigning the variable to the function itself, but rather the result of that function, so to assign a function to a variable you should not place the final parentheses of it. Another important point, these functions belong to a Jquery object, so you cannot call them directly, to access a Jquery function without calling it you can do the following $.fn.next

now you have the function stored in the variable action but you can’t call her that $('.container').action, this because action is not a property of Jquery to be called from an object of the same, you need to call the function stored in action and create the context of the object needed to be executed, you can do this using the property call that the functions have, so your final code would look like this:

const action = $(this).hasClass('avancar') ? $.fn.next : $.fn.prev;
action.call($('.container'));

Another way to do something similar to what you want is to use an if ternary to directly call the next and Prev functions of the object, it would be something like the following:

$(this).hasClass('avancar') ? $('.container').next() : $('.container').prev();