How does this JavaScript syntax work?

Question

I am working with a jQuery plugin that has the following snippet:

$(el).siblings( panelSelector )[(effect || activationEffect)](((effect == "show")?activationEffectSpeed:false),function(){ .. some stuff .. }); 

My concern is not what it does in the context of the plugin, but more about how it works.

I understand that we first select the siblings of the clicked element, then I believe that we check which of the two, effect or activationEffect matters, I start to get lost there. It seems like the function is a callback, but if I don't understand what the callback contains.

Answer 1

The main thing you need to know in order to understand the code is that foo.bar and foo['bar'] are equal.

Let me break it down to make it even clearer:

 var sibs = $(el).siblings(panelSelector); sibs[(effect || activationEffect)](...); 

The second line calls any method name that is stored in effect or activationEffect (the first true ish value wins) on sibs .

((effect == "show")?activationEffectSpeed:false) is the first argument to this call, and function(){ ... } is the second.