Variable in place for x does't work in transit.js

Question

I am using transit.js and i have the following lines of code:

var axis = Math.floor(Math.random() * 2);
axis = genXY(axis);

if($(this).hasClass(btn_className)) {       
    $(this).transition({ axis : '100px' } , function(){
        $(this).addClass('active');
        $(this).transition({ axis :  0 , duration : 2000 });
    })  

} 

The genXY function is below:

var xy = ['x' , 'y'];

function genXY(no) {
    return xy[no];
}

now i ran the below simple test on a single element(in my devTools):

var axis = x;
$('.gridbox .large').eq(2).transition({ x : "100px" });

The above line of code works perfect , I.E. it transitions the element by 100px , but now if i replace the x with axis , which is actually a variable which indeed is x , now the code looks like below:

var axis = x;
$('.gridbox .large').eq(2).transition({ axis : "100px" });

The above line does't work . Why does it now work ? afterall axis is x itself , can anybody explain ?

Answer 1

Actually, you are putting a key to a object which can't be done like that:

var axis = x;
$('.gridbox .large').eq(2)
             .transition({ axis : "100px" }); // <----see the object { axis : "100px" }

if you try putting a var name in place of key in the object literal, that doesn't refer to the value of it but it sets a new key:value in the object. In ES5 and earlier, you cannot use a variable as a property name inside an object literal.

So, what can be done:

var obj   = {}, // a new object creation
    axis  = x;  // a reference to the x

obj[axis] = '100px'; // now it results in {x:"100px"}

$('.gridbox .large').eq(2)
             .transition(obj); // <---put the object here

Answer 2

These two lines mean the same thing (quotes are optional):

var obj = { x: '100px' };
var obj = { 'x': '100px' };

So in the following line you weren't really using a variable, but defining a property name of x.

$('.gridbox .large').eq(2).transition({ x : "100px" });

To solve your problem, you could define an empty object and add a dynamic property name to it, and then pass the object as an argument.

var axis = 'x';
var obj = {};
obj[ axis ] = '100px';
$('.gridbox .large').eq(2).transition(obj);

Also note that you must use the [] syntax for adding variable (dynamic) property names as opposed to the dot syntax. The following example will add a property named axis instead of x.

obj.axis = '100px';

Answer 3

ECMAScript is the specification for the language that JavaScript implements.

If you look at section "11.1.5 Object Initialiser" of the the 5th edition of the ECMAScript standard, it defines the object literal syntax that is used to create an object.

Let's take a look at how { axis: "100px" } is evaluated according to the specification:

ObjectLiteral => { PropertyNameAndValueList } => { PropertyName : AssignmentExpression } => { IdentifierName : AssignmentExpression }

For IdentifierName it states: "Return the String value containing the same sequence of characters as the IdentifierName". In other words, { axis: "100px" } is the same as { "axis": "100px" }, which is not the same as { x: "100px" } and { "x": "100px" }. In other words, an unquoted property name in an object literal becomes the string version of the name, not the variable value. This is why you cannot replace { x: "100px" } with { axis: "100px" } because they aren't the same.

It was suggested that you use the following code:

var axis = "x";
var obj = {};
obj[ axis ] = "100px";

This was so that the variable value of 'axis' gets used, because obj[axis] = "100px" is the same as obj["x"] = "100px", which is the same as { x: "100px" } and { "x": "100px" }.