Btukfyl

With ECMAScript 2015 you are now able to do it directly in object declaration with the brackets notation: 

var obj = {

  [key]: value

}

Where key can be any sort of expression (e.g. a variable) returning a value.

So here your code would look like:

<something>.stop().animate({

  [thetop]: 10

}, 10)

Where thetop will be replaced by the variable value.

ES5 quote that says it should not work

Note: rules have changed for ES6: https://stackoverflow.com/a/2274327/895245

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

PropertyName :

• IdentifierName


• StringLiteral


• NumericLiteral

[...]

The production PropertyName : IdentifierName is evaluated as follows:

1. Return the String value containing the same sequence of characters as the IdentifierName.

The production PropertyName : StringLiteral is evaluated as follows:

1. Return the SV [String value] of the StringLiteral.

The production PropertyName : NumericLiteral is evaluated as follows:

1. Let nbr be the result of forming the value of the NumericLiteral.


2. Return ToString(nbr).

This means that:

• 
  

  { theTop : 10 } is the exact same as { 'theTop' : 10 }

  
  
  

  The PropertyName theTop is an IdentifierName, so it gets converted to the 'theTop' string value, which is the string value of 'theTop'.

  
  


• 
  

  It is not possible to write object initializers (literals) with variable keys.

  
  
  

  The only three options are IdentifierName (expands to string literal), StringLiteral, and NumericLiteral (also expands to a string).

  
  

I have used the following to add a property with a "dynamic" name to an object:

var key = 'top';

$('#myElement').animate(

   (function(o) { o[key]=10; return o;})({left: 20, width: 100}),

   10

);

key is the name of the new property.

The object of properties passed to animate will be {left: 20, width: 100, top: 10}

This is just using the required notation as recommended by the other answers, but with fewer lines of code!

Adding square bracket around the variable works good for me. Try this

var thetop = 'top';

<something>.stop().animate(

    { [thetop] : 10 }, 10

);

Given code:

var thetop = 'top';

<something>.stop().animate(

    { thetop : 10 }, 10

);

Translation:

var thetop = 'top';

var config = { thetop : 10 }; // config.thetop = 10

<something>.stop().animate(config, 10);

As you can see, the { thetop : 10 } declaration doesn't make use of the variable thetop. Instead it creates an object with a key named thetop. If you want the key to be the value of the variable thetop, then you will have to use square brackets around thetop:

var thetop = 'top';

var config = { [thetop] : 10 }; // config.top = 10

<something>.stop().animate(config, 10);

The square bracket syntax has been introduced with ES6. In earlier versions of JavaScript, you would have to do the following:

var thetop = 'top';

var config = (

  obj = {},

  obj['' + thetop] = 10,

  obj

); // config.top = 10

<something>.stop().animate(config, 10);

This way also you can achieve desired output

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>

ES5 implementation to assign keys is below:

var obj = Object.create(null),

    objArgs = (

      (objArgs = {}),

      (objArgs.someKey = {

        value: 'someValue'

      }), objArgs);



Object.defineProperties(obj, objArgs);

I've attached a snippet I used to convert to bare object.

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);

You could do the following for ES5:

var theTop = 'top'

<something>.stop().animate(

  JSON.parse('{"' + theTop + '":' + JSON.stringify(10) + '}'), 10

)

Or extract to a function:

function newObj (key, value) {

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

}



var theTop = 'top'

<something>.stop().animate(

  newObj(theTop, 10), 10

)

If you want object key to be same as variable name, there's a short hand in ES 2015.
New notations in ECMAScript 2015

var thetop = 10;

var obj = { thetop };

console.log(obj.thetop); // print 10

You can do it this way:

var thetop = 'top';

<something>.stop().animate(

    new function() {this[thetop] = 10;}, 10

);