Can I Use Variables as Object Property Names in JavaScript?

How to Dynamically Define Object Property Names in JavaScript

JavaScript object literals are convenient for defining a collection of key-value pairs, where keys represent property names and values represent property values. However, a common question arises: can we use a variable as a key in an object literal?

The answer to this question depends on the JavaScript version. In ES5 and earlier, using a variable directly as a key in an object literal won't work. For example:

var thetop = 'top';
something.stop().animate({ thetop: 10 }, 10); // Doesn't work

This is because in ES5, object property names must be enclosed in double quotes or single quotes.

Solution for ES5 and Earlier

To use a variable as a key in ES5, you need to create an object literal and manually assign the property value using the variable name as the property key:

var aniArgs = {};
aniArgs[thetop] = 10; // Assign value to property using variable name as key
something.stop().animate(aniArgs, 10); // Pass the object literal to the animate method

ES6 Computed Property Names

ES6 introduces the concept of ComputedPropertyName, which allows the use of variables and expressions as property names inside object literals. This syntax looks like:

const obj = { [variableOrExpression]: value };

Using this syntax, you can dynamically define property names using variables, for example:

var thetop = 'top';
const obj = { [thetop]: 10 };
console.log(obj.top); // Prints 10

This syntax is supported in modern browsers and can simplify the process of defining object property names dynamically.

The above is the detailed content of Can I Use Variables as Object Property Names in JavaScript?. For more information, please follow other related articles on the PHP Chinese website!