Is it possible to add dynamically named properties to JavaScript object?

javascript create array of objects dynamically
javascript add property to existing object
add property to array of objects javascript
add multiple properties to object javascript
add property to object javascript es6
javascript dynamic property name
typescript add property to object dynamically
how to add/remove properties to object dynamically in javascript

In JavaScript, I've created an object like so:

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

Is it possible to add further properties to this object after it's initial creation if the properties name is not determined until run time? i.e.

var propName = 'Property' + someUserInput
//imagine someUserInput was 'Z', how can I now add a 'PropertyZ' property to 
//my object?


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

data["PropertyD"] = 4;

// dialog box with 4 in it

Dynamically creating properties on objects using javascript (Example), With ES6, we can finally create dynamic variable key in the object declaration The 3 ways to access the object value; How to Access Object Value With MDN Web Docs - Computed Property Names · w3schools: JavaScript Properties. Sometimes we want to add dynamic properties to an object in JavaScript. For instance, we expect to get Properties names from a user inputting. But we can’t use them directly as the object’s properties traditionally. See the sample code below: var weapons = { sords: true, guns: false, shield: true } var pro = 'arrows'; …

ES6 for the win!

const b = 'b';
const c = 'c';

const data = {
    a: true,
    [b]: true, // dynamic property
    [`interpolated-${c}`]: true, // dynamic property + interpolation
    [`${b}-${c}`]: true

If you log data you get this:

  a: true,
  b: true,
  interpolated-c: true,
  b-c: true

This makes use of the new Computed Property syntax and Template Literals.

How to Set Dynamic Property Keys with ES6, How do you dynamically add values to an array of objects in JavaScript? Javascript Object Oriented Programming Front End Scripts Previously it is a two-step process to create a property in an object but the advent of ES6 has made the task very simple. In only one step we can create a property dynamically. Let's discuss it in a nutshell.

Yes it is possible. Assuming:

var data = {
    'PropertyA': 1,
    'PropertyB': 2,
    'PropertyC': 3
var propertyName = "someProperty";
var propertyValue = "someValue";


data[propertyName] = propertyValue;


eval("data." + propertyName + " = '" + propertyValue + "'");

The first method is preferred. eval() has the obvious security concerns if you're using values supplied by the user so don't use it if you can avoid it but it's worth knowing it exists and what it can do.

You can reference this with:






Dynamically append an element to a JavaScript Array in two ways , How do you check if an object has a property in JavaScript? This tells JavaScript to evaluate the string in our variable and use it as the property name. If you fail to use the brackets, JavaScript will set the new name as “propertyName”. i.e. It will take it literally. Using spaces or hyphens in a property name. If you attempt to use a space or a hyphen in your property name while using regular dot

I know that the question is answered perfectly, but I also found another way to add new properties and wanted to share it with you:

You can use the function Object.defineProperty()

Found on Mozilla Developer Network


var o = {}; // Creates a new object

// Example of an object property added with defineProperty with a data property descriptor
Object.defineProperty(o, "a", {value : 37,
                               writable : true,
                               enumerable : true,
                               configurable : true});
// 'a' property exists in the o object and its value is 37

// Example of an object property added with defineProperty with an accessor property descriptor
var bValue;
Object.defineProperty(o, "b", {get : function(){ return bValue; },
                               set : function(newValue){ bValue = newValue; },
                               enumerable : true,
                               configurable : true});
o.b = 38;
// 'b' property exists in the o object and its value is 38
// The value of o.b is now always identical to bValue, unless o.b is redefined

// You cannot try to mix both :
Object.defineProperty(o, "conflict", { value: 0x9f91102, 
                                       get: function() { return 0xdeadbeef; } });
// throws a TypeError: value appears only in data descriptors, get appears only in accessor descriptors

How to Add, Modify, or Access JavaScript Object Literal Properties, To add a new property to an object, specify the object name followed by: a dot, the name of the new property, an equals sign, and the value for the new property (  Defining a dynamic property like an Array on the Javascript Object Let us take the same example as above: var obj = { property1: '', property2: '' }; To create a dynamic property on the object obj we can do: obj['property_name'] = 'some_value'; what this does is, it creates a new property on the object obj which can be accessed as console.log(obj.property_name);

ES6 introduces computed property names, which allow you to do

let a = 'key'
let myObj = {[a]: 10};
// output will be {key:10}

How to check if an object has a property properly in javascript, In this example, we ask the user what word needs to be looked up, and then provide the result from an object I've named dictionary . var dictionary = { lettuce: '​a  Because using dot notation, you cannot use a dynamic property name, but with bracket notation, the property is expected to be a string and that string can be a literal or a dynamically gotten value.

JavaScript, An object property name can be any valid JavaScript string, or anything property names are to be dynamically determined (when the property name is Starting with ECMAScript 5, there are three native ways to list/traverse object properties: Identical object initializers create distinct objects that will not  Using Babel or Google's traceur, it is possible to use this syntax today. In earlier JavaScript specifications (ES5 and below), the key in an object literal is always interpreted literally, as a string. To use a "dynamic" key, you have to use bracket notation: var obj = {}; obj[myKey] = value;

Working with objects, typescript add property to object dynamically. In JavaScript, I've created an object like so: var data = { 'PropertyA': 1, 'PropertyB': 2, 'PropertyC': 3 };. Is it possible  You can add properties dynamically using some of the options below: In you example: var data = { 'PropertyA': 1, 'PropertyB': 2, 'PropertyC': 3 }; You can define a property with a dynamic value in the next two ways: data.key = value; or. data['key'] = value; Even more..if your key is also dynamic you can define using the Object class with:

Is it possible to add dynamically named properties to JavaScript , There are two ways to access or get the value of a property from an object — the Therefore, if you've an object's property name stored in a JavaScript variable,  How to Dynamically Access Object Property Using Variable in JavaScript. Topic: JavaScript / jQuery Prev|Next. Answer: Use the Square Bracket ([]) Notation. There are two ways to access or get the value of a property from an object — the dot (.) notation, like, and the square bracket ([]) notation, like obj[foo].