How to Achieve Dynamic Property Assignment in JavaScript Objects?

Dynamic Key Assignment in Object Literals

In JavaScript, square brackets ([) are not only used to specify array indices but also inside object literals to create computed property names. This allows us to dynamically generate the keys of an object based on expressions or variables.

Example:

Consider the following code:

<code class="js">let a = "b";
let c = { [a]: "d" };
console.log(c); // Object { b: "d" }</code>

In this example, the square brackets around [a] allow us to use the value of the variable a as the key for the object property. We end up with an object with a key of b and a value of d.

How it Works:

This syntax is introduced with ES2015 (ES6) and is known as computed property name syntax. It provides a shorthand for the following assignment:

<code class="js">var a = "b";
var c = {};
c[a] = "d";</code>

With computed property names, instead of using the dot notation (e.g., c.a) or bracket notation (e.g., c["a"]) for dynamic key assignment, we can simply use the variable or expression inside the square brackets.

Advantages:

Computed property names provide flexibility in object creation, especially when working with dynamic or complex data structures. They enable us to easily generate object keys based on calculations, user input, or other programmatic logic.

The above is the detailed content of How to Achieve Dynamic Property Assignment in JavaScript Objects?. For more information, please follow other related articles on the PHP Chinese website!