How to use a variable for a key in a JavaScript object literal

Question

Why does the following work    lt something gt  stop   animate         top    10    10      Whereas this doesn t work   var thetop    top    lt something gt  stop   animate        thetop   10    10      To make it even clearer  At the moment I m not able to pass a CSS property to the animate function as a variable

User · Answer

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          Return the String value containing the same sequence of characters as the IdentifierName          The production PropertyName   StringLiteral is evaluated as follows          Return the SV  String value  of the StringLiteral          The production PropertyName   NumericLiteral is evaluated as follows          Let nbr be the result of forming the value of the NumericLiteral    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

User · Answer

thetop   10   is a valid object literal   The code will create an object with a property named thetop that has a value of 10   Both the following are the same   obj     thetop   10    obj      thetop    10      In ES5 and earlier  you cannot use a variable as a property name inside an object literal   Your only option is to do the following   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  lt something gt  stop   animate      aniArgs  10          ES6 defines ComputedPropertyName as part of the grammar for object literals  which allows you to write the code like this   var thetop    top       obj      thetop   10     console log obj top      - gt  10   You can use this new syntax in the latest versions of each mainstream browser

User · Answer

2020 update example     A more complex example  using brackets and literals   something you may have to do for example with vue axios  Wrap the literal in the brackets  so                            filter   query key      query value       filter foo      bar

User · Answer

Given code   var thetop    top    lt something gt  stop   animate        thetop   10    10      Translation   var thetop    top   var config     thetop   10       config thetop   10  lt something gt  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  lt something gt  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  lt something gt  stop   animate config  10

User · Answer

With ECMAScript 2015 you are now able to do it directly in object declaration with the brackets notation  nbsp   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    lt something gt  stop   animate      thetop   10    10    Where thetop will be evaluated before being used as key

User · Answer

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

User · Answer

Adding square bracket around the variable works good for me  Try this   var thetop    top    lt something gt  stop   animate         thetop    10    10

User · Answer

You could do the following for ES5   var theTop    top   lt something gt  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   lt something gt  stop   animate    newObj theTop  10   10

User · Answer

Update  As a commenter pointed out  any version of JavaScript that supports arrow functions will also support    myKey  myValue    so this answer has no actual use-case  and  in fact  it might break in some bizarre corner-cases   Don t use the below-listed method   I can t believe this hasn t been posted yet  just use arrow functions with anonymous evaluation  Completely non-invasive  doesn t mess with the namespace  and it takes just one line  myNewObj     k v   gt  o    o k  v return o    myKey myValue    demo   x000D   x000D  var myKey  valueof myKey   var myValue  valueof myValue   var myNewObj     k v   gt  o    o k  v return o    myKey myValue   console log myNewObj   x000D   x000D   x000D   useful in environments that don t support the new   myKey   myValue  syntax yet  such as   apparently  I just verified it on my Web Developer Console   Firefox 72 0 1  released 2020-01-08  I stand corrected  just wrap the thing in parenthesis and it works   I m sure you could potentially make some more powerful extensible solutions or whatever involving clever use of reduce  but at that point you d probably be better served by just breaking out the Object-creation into its own function instead of compulsively jamming it all inline   not that it matters since OP asked this ten years ago  but for completeness  sake and to demonstrate how it is exactly the answer to the question as stated  I ll show this in the original context  var thetop    top    lt something gt  stop   animate        k v   gt  o    o k  v return o    thetop 10   10

User · Answer

This way also you can achieve desired output   x000D   x000D  var jsonobj     x000D  var count 0  x000D    document  on  click    btnadd   function     x000D      jsonobj count  new Array    1         txtone   val       2         txttwo   val      x000D      count    x000D      console clear    x000D      console log jsonobj   x000D      x000D   lt script src  https   ajax googleapis com ajax libs jquery 2 1 1 jquery min js  gt  lt  script gt  x000D   lt span gt value 1 lt  span gt  lt input id  txtone  type  text   gt  x000D   lt span gt value 2 lt  span gt  lt input id  txttwo  type  text   gt  x000D   lt button id  btnadd  gt Add lt  button gt  x000D   x000D   x000D

User · Answer

You can also try like this    x000D   x000D  let array1      x000D       description    THURSDAY   x000D       count    1   x000D       date    2019-12-05  x000D     x000D    x000D       description    WEDNESDAY   x000D       count    0   x000D       date    2019-12-04  x000D     x000D  let res   array1 map  value  index    gt    x000D      return    value description     count  value count  date  value date     x000D     x000D  console log res   x000D   x000D   x000D

User · Answer

I couldn t find a simple example about the differences between ES6 and ES5  so I made one  Both code samples create exactly the same object  But the ES5 example also works in older browsers  like IE11   wheres the ES6 example doesn t   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

User · Answer

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    x000D   x000D  var obj     x000D     key1    value1   x000D     key2    value2   x000D     key3     x000D       value3   x000D       value4   x000D       x000D     key4     x000D       key5    value5  x000D      x000D    x000D   x000D  var bareObj   function obj    x000D   x000D    var objArgs  x000D      bareObj   Object create null   x000D   x000D    Object entries obj  forEach function  key  value     x000D   x000D      var objArgs     x000D         objArgs        x000D         objArgs key      x000D          value  value x000D            objArgs   x000D   x000D      Object defineProperties bareObj  objArgs   x000D   x000D        x000D   x000D    return   x000D      input  obj  x000D      output  bareObj x000D       x000D   x000D    obj   x000D   x000D  if   Object entries    x000D    Object entries   function obj   x000D      var arr       x000D      Object keys obj  forEach function key   x000D        arr push  key  obj key     x000D          x000D      return arr  x000D      x000D    x000D   x000D  console bareObj   x000D   x000D   x000D

User · Answer

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

User · Answer

You can do it this way   var thetop    top    lt something gt  stop   animate      new function    this thetop    10    10

User · Answer

ES6   2020 If you re trying to push data to an object using  quot key value quot  from any other source  you can use something like this  let obj      let key    quot foo quot  let value    quot bar quot   obj    key      value     A  console log obj   would return      foo   quot bar      A  typeof obj  would return      quot object quot   Hope this helps someone

[javascript] How to use a variable for a key in a JavaScript object literal?

Examples related to javascript

Examples related to jquery

Examples related to variables

Examples related to properties

Examples related to object-literal