JavaScript square bracket function call

Question

There was a jQuery source code scan when I met this line:

jQuery(this)[ state ? "show" : "hide" ](); 

Are there any advantages over

 state ? jQuery(this).show() : jQuery(this).hide(); 

?

Standalone example:

 var object = { foo: function() { alert('foo'); }, bar: function() { alert('bar'); } }; object[true ? 'foo' : 'bar'](); object[false ? 'foo' : 'bar'](); 

Answer 1

There are no advantages in performance. But there is an advantage in the length of the code (if you see this as an advantage) and the DRY principle (do not repeat the code) specifically if you have many parameters in your functions.

Consider the following:

 obj[ cond ? "foo" : "bar" ]("param1", "param2", "param3"); 

Versus:

 cond ? obj.foo("param1", "param2", "param3") : obj.bar("param1", "param2", "param3"); 

As you can see, you are repeating a lot of code in the second way

Hope this helps. Greetings

Answer 2

In your example there is no difference between

 jQuery(this)[ state ? "show" : "hide" ](); 

and

 state ? jQuery(this).show() : jQuery(this).hide(); 

However, squares can be used to call a function without a name:

 var myFunctionName = 'show'; jQuery(this)[ myFunctionName ](); 

Why is this useful? In the above example, this is completely useless. But we can find some situations where it can be nice:

 // list of available methods var effects = [ 'hide', 'slideUp', 'fadeOut' ]; // get a random index between 0 and effects.length-1 (2 in this case) var randomIndex = Math.floor(Math.random() * (effects.length)); // get the method name var methodToCall = effects[ randomIndex ]; jQuery(this)[ methodToCall ](); 

This snippet will select one random method and call this method on the jQuery object. Isn't that so good? :)

Answer 3

Are there any advantages

No, except for a slightly shorter code, and jQuery(this). not repeated jQuery(this).

However, repetition can be mitigated by declaring, for example, $this .

I do not think this template is particularly easy to read, so the only time I used it myself is that the argument list is non-trivial and does not depend on which method is called.

Answer 4

The jQuery method is more concise and adheres to the DRY principle. I think the main advantage over the second example.

Answer 5

OK, I would rank:

• The code works reliably for its intended purpose (there is no solution that is important for the buggy)
• The code is readable and easy to maintain (lack of readability or maintainability generates errors and slows down the pace of development)
• DRY code (repetition is bad for readability, maintainability and sometimes performance).
• The code is short (if it reaches all of the above, shorter, usually better)

My problem is with jQuery(this)[ state ? "show" : "hide" ](); jQuery(this)[ state ? "show" : "hide" ](); This is not a general design pattern that many people are used to seeing and using for reading. Thus, it is not over readable and can easily confuse people trying to save this code in the future (leading to errors). As my priorities above show, I would favor DRY readability if they disagree.

In this case, I will probably write:

 var $this = jQuery(this); state ? $this.show(): $this.hide(); 

Not so short, but more readable, in my opinion.