Add properties to JavaScript objects using variables as keys?

Question

I'm using jQuery to extract an item from the DOM and want to set the object's properties using the DOM element's id.

Example

const obj = {}

jQuery(itemsFromDom).each(function() {
  const element = jQuery(this)
  const name = element.attr('id')
  const value = element.attr('value')

  //Here is the problem
  obj.name = value
})

If itemsFromDom contains an element with id being "myId", I want obj to have an element named "myId" "properties. The above code gives me name.

How to name properties of an object using variables using JavaScript?

Answer 1

With ECMAScript 2015, you can use square bracket notation directly in the object declaration:

var obj = {
  [key]: value
}

Where key can be any type of expression (such as a variable), returning a value:

var obj = {
  ['hello']: 'World',
  [x + 2]: 42,
  [someObject.getId()]: someVar
}

Answer 2

You can use the equivalent syntax:

obj[name] = value

Example:

let obj = {};
obj["the_key"] = "the_value";

Or use ES6 features:

let key = "the_key";
let obj = {
  [key]: "the_value",
};

In both examples, console.log(obj) will return: { the_key: 'the_value' }