What JavaScript/JQuery syntax is this?

Question

I have no idea how to search for this so I'm asking here.

I've inherited a project and no one that's here knows what this syntax trick is called.

There's a select drop down change event that will call a function if one or another specific value is selected from among the list.

$('#accordion select[name=x_range]').change(function(){
  $('#custom-time')[$(this).val() == 'custom' ? 'show' : 'hide']();
  $('#custom-time-to-now')[$(this).val() == 'custom_to_now' ? 'show' : 'hide']();
  updateTimeIntervalOptions();
}).triggerHandler('change');

In this the show or hide function is called on the #custom-time or #custom-time-to-now divs.

What is calling functions like this called?

EDIT:
I should have said that I understand ternary if/else, but not the $(selector)[function_name]() part.

IMO, it's silly that they chose to show/hide using this obfuscated approach. If they knew of toggle, it could clearly be written as $(selector).toggle(condition). — TheCloudlessSky
– TheCloudlessSky, Commented Aug 4, 2012 at 22:36

vittore · Accepted Answer · 2013-05-31 20:55:00Z

I would say that this is not a trick, but understanding of three features of javascript.

First, functions are first class objects, so you can assign them to variables etc

 var f = function () { ... }
 var b = [];
 b[1] = f; // assigning function to array element
 b[1]();   // calling function assigned to array element

Second, convenient ternary operator, which is effectively shorthand notation of combination of if and assignement:

 var a = (b >c ) ? b : c;

 // is the same as

 if (b > c ) {
     a = b;
 } else {
     a = c;
 }

And last but not least, is the fact that every object properties can be accessed as dictionary elements, ie

 a.b = 5
 a['b'] === 5 // true!

So putting all this together you can have expression like this

$(selector)[condition?'show':'hide']();

Which is equal to

if (condition) {
   $(selector).show();
} else {
   $(selector).hide();
}

UPDATE: One note on this particular case. In most cases you don't need to do complicated stuff like that, as $().toggle() accepts boolean argument for toggling on and off, so

$(selector)[condition?'show':'hide']();

will work the same way as

$(selector).toggle(!!condition);

Note that I use !! in order to cast value to boolean, as toggle checks paramter using ===

kevin628 · Accepted Answer · 2012-08-02 18:26:48Z

10

What is calling functions like this called?

Poor coding practice.

It's a way to call the show() or hide() functions dynamically. It's bloody nasty lookin'.

Edit: apparently my answer is "controversial" to some people. Please let me clarify: if I can write if-else statements over a ternary operator-- especially for things like string comparisons-- I will definitely take clarity over shorter code.

It's not "bloody nasty lookin'" because of just ternary operators or just bracket access of methods. It's bloody nasty lookin' because the code took a shortcut over clarity, and took that shortcut when it was not needed.

Ternary operators are not bad. Bracket access is not bad. But they are volatile concepts that are easily abused.

edited Aug 2, 2012 at 18:26

answered Aug 2, 2012 at 17:58

kevin628

3,5264 gold badges32 silver badges44 bronze badges

14 Comments

vittore Over a year ago

bloody nasty... oh I miss London so much

jbabey Over a year ago

i disagree. this is the easiest way to dynamically choose a function to call.

kevin628 Over a year ago

@jbabey Under some circumstances, yes, it is acceptable to do this. However, in this case, why not use if-statements? I always recommend use of if-statements over ternary operators because so many inexperienced programmers equate shorter code with better code. Overall, this is a poor way to do it because the better way is extremely obvious.

adeneo Over a year ago

I disagree as well, it's a perfectly valid method, and even if I agree with the fact that if/else is more readable, doing it with brackets and a ternary is pretty obvious aswell, and I don't think one way is better than the other, and it's definitely not poor coding practice IMO.

kevin628 Over a year ago

@adeneo I suppose it comes down to a matter of opinion and perhaps experience. I come from a software engineering background, where coding standards are quite strict. I always take readability over shortcuts. Like I said, though, it is acceptable to use bracket access to call functions dynamically in a few situations, but this is definitely not a situation where I would do it.

|

Brandon · Accepted Answer · 2012-08-02 18:00:48Z

6

Apparently it's called Bracket Notation

answered Aug 2, 2012 at 18:00

Brandon

70.2k32 gold badges201 silver badges227 bronze badges

Comments

LetterEh · Accepted Answer · 2012-08-02 18:13:22Z

Ternary operators set values to two or more options (can be nested).

Think of them like a switch or an if/else or an if/elseif/.../else operation, but only for setting ONE value.

So look at something like:

var name = X === Y ? "Bob" : "Doug";
sayHello(name);

It's a ternary condition which optionally sets the name, based on whether the condition is true or false.

In your jQuery, they're just skipping a step, by using bracket-notation with a ternary inside.

People[ (selected_person === "Bob") ? "Bob" : (selected_person === "Doug") ? "Doug" : "Jimmy" ].sayHi();

This will call sayHi() for People.Bob, People.Doug or People.Jimmy, based on the value of selected_person.

So it's a ternary condition used to select an object-property, nested inside of the bracket notation, rather than doing it in two steps:

 var person = // ternary from last step
 People[person].sayHi();

EDIT:

Based on your edit, it's bracket-notation.

MyObj = { myFunc : function () { doStuff(); } };

You can call myFunc in a few different ways.
Either by using dot-notation: var func = MyObj.myFunc; or through bracket-notation: var func = MyObj["myFunc"];
Either way, the value of func is now myFunc.

So what they're doing is setting a string to the name of the function that they want to call.

var string = "show";
MyObj[string] // = MyObj.show
MyObj[string]() // = MyObj.show()

In the case of your code, they're using ternary to determine the value of the string.

jackwanders · Accepted Answer · 2012-08-02 18:02:07Z

2

The author is using the ternary operator (? :) to call a member function of a jQuery object using array notation, el['show']() rather than el.show(). Broken down, it would look like:

var fnName;
if($(this).val() == 'custom') {
  fnName = 'show';
} else {
  fnName = 'hide';
}

$('#custom-time')[fnName]();  // an alternative to $('#custom-time').show() or .hide()

answered Aug 2, 2012 at 18:02

jackwanders

16.1k3 gold badges42 silver badges40 bronze badges

Comments

nullpotent · Accepted Answer · 2012-08-02 23:00:36Z

2

It's called "Array Notation". Look here: http://www.erichynds.com/jquery/accessing-jquery-methods-using-array-syntax/

edited Aug 2, 2012 at 23:00

nullpotent

9,2801 gold badge34 silver badges44 bronze badges

answered Aug 2, 2012 at 18:01

algi

5775 silver badges13 bronze badges

Comments

Guffa · Accepted Answer · 2012-08-02 18:02:59Z

0

I don't think that this pattern has a specific name. There is a conditional operator that is used to select different method names, then the method is called dynamically using this string with the "bracket" or "array" syntax.

answered Aug 2, 2012 at 18:02

Guffa

703k111 gold badges760 silver badges1k bronze badges

Collectives™ on Stack Overflow

What JavaScript/JQuery syntax is this?

7 Answers 7

Comments

14 Comments

Comments

Comments

Comments

Comments

Comments

Hot Network Questions

Collectives™ on Stack Overflow

7 Answers 7

Comments

14 Comments

Comments

Comments

Comments

Comments

Comments

Related