What does indexing an object literal (`{ … }[(…)]`) do?

Question

I am trying to understand the following JavaScript code I have found (and actually use) in Masonry:

var docElem = document.documentElement;
var transitionProp = typeof docElem.style.transition == 'string' ?
    'transition' : 'WebkitTransition';
var transitionEndEvent = {
  WebkitTransition: 'webkitTransitionEnd',
  transition: 'transitionend'
}[ transitionProp ];

Does the expression {}[] mean, that the transitionProp variable is added to transitionEndEvent object? And is the Expression typeof docElem.style.transition someway of finding out if css transition is supported?

Thanks for your help!

Answer 1

It's returning that particular element of the object.

For example:

var obj = { key: 'value' };
var val = obj['key']);

Could be shortened to:

var val = { key: 'value' }['key'];

(Obviously in this case it's pointless, but it illustrates what is happening.)