Set the object key to a variable value - why are there two different ways?

Question

In JavaScript, if you have the following code:

var map_id = 100; var myobj = {}; myobj[map_id] = 6; var myobj2 = { map_id : 6 }; console.log(myobj, myobj2); 

The console output is as follows:

 { '100': 6 } { map_id: 6 } 

Questions:

• Why does the JavaScript syntax work differently in these two different cases - why do they come in myobj2 set to the map_id literal, and not 100 ? What is the reason for this difference?
• Is there a way to set the key for the value of the map_id variable in compact single-line mode instead of defining the object separately first?

Thanks.

Answer 1

Is there a way to set the key for the value of the map_id variable in compact single-line mode, instead of defining the object separately first?

Not. Unfortunately.

(If you do not think that both operators on the same line are separated by a semicolon, which I do not do.)

Why does JavaScript syntax work differently in these two different cases - why are they key in myobj2 set to literal map_id than 100? What is the reason for this difference?

Good question. I do not know, and I could never think of a good reason. I think it would make a lot more sense if the key names were treated as expressions in the same way as everything else in JavaScript, i.e. As a literal if it is quoted ( { "map_id" : 6 } ), and as a variable if it is not quoted ( {map_id : 6 } ).

Answer 2

myobj[map_id] means access to a property whose name is the value of map_id (as an expression).

In your case, the map_id value is 100. All properties of the object must be strings or valid JavaScript identifiers - therefore, it is converted to String '100' and placed as a property of the object.

In the case of var myobj2 = { map_id : 6 }; the JavaScript interpreter sees that map_id is a valid identifier and does not expect it to be an expression, so it does not transform into anything.

EDIT:

as in relation to your second question and assuming that you want the property name to be dynamic (as depending on the value of some expression), but also write:

 var myobj2 = { map_id : 6 }; 

and replace map_id with "it" (this is not its value - two identifiers have the same name - one property of the object, and the other a variable) to create:

 { '100': 6 } 

• the answer is no, you need to do this via [] .

Answer 3

Single line method

 Object.defineProperty({}, map_id, { value: 6, enumerable: true }); 

ES6

 { [map_id]: 6 } 

Answer 4

Inside an object literal, keys are characters, not variables. I don't think wrapping keys in double quotes will convert them to strings. Rather, quotation marks are used to create characters that can contain spaces or other values ​​without the alphabet, for example {"\n":"this is a carriage-return"}

So, in your example, "map_id", used as the key inside the object literal, has nothing to do with the variable "map_id", except that they use the same sequence of characters for their names.