Can You Dynamically Add Properties to JavaScript Objects?

Dynamic Property Addition in JavaScript Objects

This inquiry explores the possibility of dynamically adding properties to a JavaScript object after its initial inception, particularly when the property names are unknown until runtime.

Initial Object Structure

Consider an object defined as follows:

var data = {
    'PropertyA': 1,
    'PropertyB': 2,
    'PropertyC': 3
};

Dynamic Property Addition

The question arises whether it's feasible to add further properties to this object dynamically, with names determined during runtime. Suppose we have a variable propName that stores a property name derived from user input. How can we add a new property with this name to the data object?

Solution

Yes, it is indeed possible to dynamically add properties to JavaScript objects. To do so, you can use bracket notation to access properties by name:

var propName = 'Property' + someUserInput
data[propName] = 4;

By enclosing the property name in square brackets, we can access and set properties dynamically.

Example

Consider the example provided in the question:

var propName = 'Property' + 'Z'
data[propName] = 4;

// dialog box with 4 in it
alert(data.PropertyD);
alert(data["PropertyD"]);

In this example, we dynamically add a "PropertyZ" property to the data object, which can then be accessed using bracket or dot notation.

The above is the detailed content of Can You Dynamically Add Properties to JavaScript Objects?. For more information, please follow other related articles on the PHP Chinese website!