[解決済み] JavaScriptのオブジェクトリテラルで変数をキーとして使用するには？

質問

なぜ、次のように動作するのでしょうか？

<something>.stop().animate(
    { 'top' : 10 }, 10
);

一方、これはうまくいきません。

var thetop = 'top';
<something>.stop().animate(
    { thetop : 10 }, 10
);

さらにわかりやすくするために 今のところ、CSSプロパティを変数としてanimate関数に渡すことができません。

どうすればいい？

{ thetop : 10 } は有効なオブジェクト・リテラルです。 このコードでは、オブジェクトを作成します。 thetop で、値が10である。 以下はどちらも同じです。

obj = { thetop : 10 };
obj = { "thetop" : 10 };

ES5以前では、オブジェクトリテラル内のプロパティ名として変数を使用することはできません。 唯一の選択肢は、以下のようになります。

var thetop = "top";

// create the object literal
var aniArgs = {};

// Assign the variable property name with a value of 10
aniArgs[thetop] = 10; 

// Pass the resulting object to the animate method
<something>.stop().animate(
    aniArgs, 10  
);  

ES6 定義する ComputedPropertyName をオブジェクトリテラルの文法の一部として使用することで、このようなコードを書くことができます。

var thetop = "top",
    obj = { [thetop]: 10 };

console.log(obj.top); // -> 10

この新しい構文は、各主要ブラウザの最新版で使用できます。