¿Cómo usar una variable para una clave en un objeto literal de JavaScript?

¿Por qué funciona lo siguiente?

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

Mientras que esto no funciona:

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

Para hacerlo aún más claro: por el momento no puedo pasar una propiedad CSS a la función animada como variable.

{ thetop : 10 }es un objeto literal válido El código creará un objeto con una propiedad denominada thetopque tiene un valor de 10. Los dos siguientes son lo mismo:

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

En ES5 y versiones anteriores, no puede usar una variable como nombre de propiedad dentro de un objeto literal. Su única opción es hacer lo siguiente:

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 define ComputedPropertyName como parte de la gramática de los literales de objetos, lo que le permite escribir el código de esta manera:

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

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

Puede usar esta nueva sintaxis en las últimas versiones de cada navegador convencional.

Con ECMAScript 2015 , ahora puede hacerlo directamente en la declaración de objeto con la notación de corchetes: 

var obj = {
  [key]: value
}

Donde keypuede haber cualquier tipo de expresión (por ejemplo, una variable) que devuelva un valor.

Así que aquí su código se vería así:

<something>.stop().animate({
  [thetop]: 10
}, 10)

Donde thetopserá evaluado antes de ser utilizado como clave.

Cita de ES5 que dice que no debería funcionar

Nota: las reglas han cambiado para ES6: https://stackoverflow.com/a/2274327/895245

Especificaciones: http://www.ecma-international.org/ecma-262/5.1/#sec-11.1.5

Nombre de la propiedad :

• IdentifierName
• CadenaLiteral
• NuméricoLiteral

[...]

El PropertyName de producción: IdentifierName se evalúa de la siguiente manera:

1. Devuelve el valor de cadena que contiene la misma secuencia de caracteres que el nombre del identificador.

El PropertyName de producción: StringLiteral se evalúa de la siguiente manera:

1. Devuelve el SV [valor de cadena] de StringLiteral.

El PropertyName de producción: NumericLiteral se evalúa de la siguiente manera:

1. Sea nbr el resultado de formar el valor de NumericLiteral.
2. Regresar a Cadena (nbr).

Esto significa que:

• { theTop : 10 } es exactamente lo mismo que { 'theTop' : 10 }

  El PropertyName theTopes un IdentifierName, por lo que se convierte al 'theTop'valor de cadena, que es el valor de cadena de 'theTop'.

• No es posible escribir inicializadores de objetos (literales) con claves variables.

  Las únicas tres opciones son IdentifierName(se expande a cadena literal) StringLiteral, y NumericLiteral(también se expande a cadena).

He usado lo siguiente para agregar una propiedad con un nombre "dinámico" a un objeto:

var key = 'top';
$('#myElement').animate(
   (function(o) { o[key]=10; return o;})({left: 20, width: 100}),
   10
);

key es el nombre de la nueva propiedad.

El objeto de propiedades pasado a animateserá{left: 20, width: 100, top: 10}

Esto solo está usando la []notación requerida según lo recomendado por las otras respuestas, ¡pero con menos líneas de código!

Agregar corchetes alrededor de la variable funciona bien para mí. Prueba esto

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

No pude encontrar un ejemplo simple sobre las diferencias entre ES6 y ES5, así que hice uno. Ambas muestras de código crean exactamente el mismo objeto. Pero el ejemplo ES5 también funciona en navegadores más antiguos (como IE11), mientras que el ejemplo ES6 no lo hace.

ES6

var matrix = {};
var a = 'one';
var b = 'two';
var c = 'three';
var d = 'four';

matrix[a] = {[b]: {[c]: d}};

ES5

var matrix = {};
var a = 'one';
var b = 'two';
var c = 'three';
var d = 'four';

function addObj(obj, key, value) {
  obj[key] = value;
  return obj;
}

matrix[a] = addObj({}, b, addObj({}, c, d));

Actualización 2020 / ejemplo ...

Un ejemplo más complejo, usar corchetes y literales ... algo que puede tener que hacer, por ejemplo, con vue / axios. Envuelva el literal entre paréntesis, entonces

[`...`]

{
    [`filter[${query.key}]`]: query.value,  // 'filter[foo]' : 'bar'
}

Código dado:

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

Traducción:

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

Como puede ver, la { thetop : 10 }declaración no hace uso de la variable thetop. En su lugar, crea un objeto con una clave llamada thetop. Si desea que la clave sea el valor de la variable thetop, deberá usar corchetes alrededor de thetop:

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

La sintaxis de corchetes se ha introducido con ES6. En versiones anteriores de JavaScript, tendría que hacer lo siguiente:

var thetop = 'top';
var config = (
  obj = {},
  obj['' + thetop] = 10,
  obj
); // config.top = 10
<something>.stop().animate(config, 10);

No puedo creer esto no se haya publicado todavía: ¡solo use la notación de flecha con una evaluación anónima!

Completamente no invasivo, no se mete con el espacio de nombres, y solo se necesita una línea:

myNewObj = ((k,v)=>{o={};o[k]=v;return o;})(myKey,myValue);

manifestación:

var myKey="valueof_myKey";
var myValue="valueof_myValue";
var myNewObj = ((k,v)=>{o={};o[k]=v;return o;})(myKey,myValue);
console.log(myNewObj);

útil en entornos que aún no admiten la nueva {[myKey]: myValue}sintaxis, como, aparentemente; Lo acabo de verificar en mi Consola de desarrollador web: Firefox 72.0.1, lanzado el 2020-01-08.

(Estoy seguro de que potencialmente podría hacer algunas soluciones más potentes / extensibles o lo que sea que implique un uso inteligente de reduce, pero en ese punto, probablemente sería mejor servir simplemente dividiendo la creación de objetos en su propia función en lugar de bloquearla compulsivamente todo en línea)

no es que importe, ya que OP preguntó esto hace diez años, pero por el bien de la integridad y para demostrar cómo es exactamente la respuesta a la pregunta como se indicó, lo mostraré en el contexto original:

var thetop = 'top';
<something>.stop().animate(
    ((k,v)=>{o={};o[k]=v;return o;})(thetop,10), 10
);

De esta manera también puede lograr la salida deseada

var jsonobj={};
var count=0;
$(document).on('click','#btnadd', function() {
    jsonobj[count]=new Array({ "1"  : $("#txtone").val()},{ "2"  : $("#txttwo").val()});
    count++;
    console.clear();
    console.log(jsonobj);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<span>value 1</span><input id="txtone" type="text"/>
<span>value 2</span><input id="txttwo" type="text"/>
<button id="btnadd">Add</button>

La implementación de ES5 para asignar claves está a continuación:

var obj = Object.create(null),
    objArgs = (
      (objArgs = {}),
      (objArgs.someKey = {
        value: 'someValue'
      }), objArgs);

Object.defineProperties(obj, objArgs);

He adjuntado un fragmento que solía convertir en objeto desnudo.

var obj = {
  'key1': 'value1',
  'key2': 'value2',
  'key3': [
    'value3',
    'value4',
  ],
  'key4': {
    'key5': 'value5'
  }
}

var bareObj = function(obj) {

  var objArgs,
    bareObj = Object.create(null);

  Object.entries(obj).forEach(function([key, value]) {

    var objArgs = (
      (objArgs = {}),
      (objArgs[key] = {
        value: value
      }), objArgs);

    Object.defineProperties(bareObj, objArgs);

  });

  return {
    input: obj,
    output: bareObj
  };

}(obj);

if (!Object.entries) {
  Object.entries = function(obj){
    var arr = [];
    Object.keys(obj).forEach(function(key){
      arr.push([key, obj[key]]);
    });
    return arr;
  }
}

console(bareObj);

Puede hacer lo siguiente para ES5:

var theTop = 'top'
<something>.stop().animate(
  JSON.parse('{"' + theTop + '":' + JSON.stringify(10) + '}'), 10
)

O extraer a una función:

function newObj (key, value) {
  return JSON.parse('{"' + key + '":' + JSON.stringify(value) + '}')
}

var theTop = 'top'
<something>.stop().animate(
  newObj(theTop, 10), 10
)

Si desea que la clave del objeto sea la misma que el nombre de la variable, hay una pequeña mano en ES 2015. Nuevas anotaciones en ECMAScript 2015

var thetop = 10;
var obj = { thetop };
console.log(obj.thetop); // print 10

Puedes hacerlo de esta manera:

var thetop = 'top';
<something>.stop().animate(
    new function() {this[thetop] = 10;}, 10
);

También puedes intentarlo así:

let array1 = [{
    "description": "THURSDAY",
    "count": "1",
    "date": "2019-12-05"
},
{
    "description": "WEDNESDAY",
    "count": "0",
    "date": "2019-12-04"
}]
let res = array1.map((value, index) => {
    return { [value.description]: { count: value.count, date: value.date } }
})
console.log(res);