JavaScript square bracket function call

Question

Was browsing the jQuery source code 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's no advantage in performance. But there's an advantage in length of code (if you see it as an advantage), and DRY principle (don't repeat code) specially 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 repeat 'a lot' of code in the second way

Hope this helps. Cheers

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 it's name:

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

Why this is useful? In the above example, its totally useless. But we can find some situations where it could 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 choose one random method and call that method over the jQuery object. Isn't that nice? :)

Answer 3

Are there any advantages

No, other than slightly shorter code, and not repeating jQuery(this).

However the repetition could be mitigated by declaring eg $this first.

I don't find this pattern particularly easy to read, so the only time I would use it myself is if the argument list is non-trivial, and not dependent on which method is being invoked.

Answer 4

The jQuery way is more concise and adheres to the DRY principle. I think that's the main advantage over the second example.

Answer 5

In order, I'd rank:

1. Code reliably works as intended (no solution that's buggy is desirable)
2. Code is readable and easily maintainable (lack of readability or maintainability breeds bugs and slows development pace)
3. Code is DRY (repeating is bad for readability, maintainability and sometimes performance)
4. Code is short (if it achieves all the above things, shorter is usually better)

My issue with jQuery(this)[ state? "show": "hide" ](); jQuery(this)[ state? "show": "hide" ](); is that it's not a common design pattern that lots of people are used to seeing and used to reading. As such, it's not super readable and could easily confuse people trying to maintain this code in the future (leading to bugs). As my priorities above show, I'd favor readability over DRY if the two are at odds.

In this case, I'd probably write:

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

Not as short, but more readable in my opinion.