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

Question

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 its 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?

See also How to use a variable for a key in a JavaScript object literal? — Bergi
– Bergi, Commented Jan 18, 2021 at 22:32
Using user input to manipulate keys in data structures is an antipattern at a best and a security hazard at worst. What are you really trying to accomplish by doing this? — ggorlen
– ggorlen, Commented May 18, 2021 at 17:51

H. Pauwelyn · Accepted Answer · 2017-01-08 16:50:51Z

1520

Yes.

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

data["PropertyD"] = 4;

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

edited Jan 8, 2017 at 16:50

H. Pauwelyn

14.4k28 gold badges93 silver badges164 bronze badges

answered Jul 26, 2009 at 9:27

Georg Schölly

126k54 gold badges225 silver badges277 bronze badges

Sign up to request clarification or add additional context in comments.

22 Comments

Georg Schölly Over a year ago

@thedz: data.PropertyD needs to know the property name, which isn't dynamic enough.

Ron van der Heijden Over a year ago

+1 because this helped me. But I don't understand why an object properties is handled like an array.

Georg Schölly Over a year ago

@Bondye: That's part of the strange design of javascript. In this case object["property"] is not exactly the same as array[4], the former wasn't created as a true array.

Qantas 94 Heavy Over a year ago

Is it just me or does this post not answer the question while getting 195 upvotes? I thought it was asking how to define properties where the name is unknown until it is generated in the JavaScript code.

Georg Schölly Over a year ago

@Qantas: Let's say it doesn't answer it directly. But going from data["PropertyD"] to data[function_to_get_property_name()] seems trivial.

|

nhe · Accepted Answer · 2022-01-31 09:09:41Z

315

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.

edited Jan 31, 2022 at 9:09

nhe

1772 silver badges9 bronze badges

answered Feb 23, 2016 at 14:11

Mauricio Soares

3,6701 gold badge20 silver badges16 bronze badges

6 Comments

intcreator Over a year ago

This is what I needed in the case where I wanted my code to be completely functional (as in, no imperative statements saying obj[propname]). Instead, I was able to use this with object spread syntax.

user1630889 Over a year ago

It is not immediately obvious what this code snippet is doing to someone who hasn't seen or comprehended the new syntax. I would suggest an edit to display the output / expected properies with the 'a' const.

Jack G Over a year ago

Personally, I think the ES5 way is a lot cleaner and easier to understand: var a = {}; a["dynamic-" + prop] = true;

Mauricio Soares Over a year ago

@JackGiffin in some cases yes, but when working with immutable structures, this syntax can be very handy, since the approach you showed is mutating a. (Specially when using packages like redux)

Maxime Culea Over a year ago

This is the right answer which really helps to build it DYNAMICALLY, thx!

|

cletus · Accepted Answer · 2009-07-26 09:32:20Z

97

Yes it is possible. Assuming:

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

Either:

data[propertyName] = propertyValue;

or

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:

alert(data.someProperty);

or

data(data["someProperty"]);

or

alert(data[propertyName]);

edited Jul 26, 2009 at 9:32

answered Jul 26, 2009 at 9:27

cletus

627k169 gold badges922 silver badges945 bronze badges

4 Comments

Georg Schölly Over a year ago

Using eval is really dangerous.

Obinna Nwakwue Over a year ago

@GeorgSchölly True.

Matt Over a year ago

Note (in case someone runs into the same issue as I did): For normal objects this works fine. But I had to add some property to a jQuery UI object to keep track of a list of items. In that case, the property was lost if added this way because jQuery always creates a copy. Here you need to use jQuery.extend().

Matt Over a year ago

I like to add to my previous comment - even that didn't work in my case. So I ended up using the $("#mySelector").data("propertyname", myvalue); to set, and var myValue=$("#mySelector").data("propertyname"); to get the value back. Even complex objects (lists, arrays ...) can be added this way.

Rusty · Accepted Answer · 2020-09-30 17:05:25Z

84

ES6 introduces computed property names, which allows you to do

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

edited Sep 30, 2020 at 17:05

answered May 13, 2019 at 4:56

Rusty

4,5315 gold badges41 silver badges52 bronze badges

1 Comment

S.Alvi Over a year ago

Best answer. The only one that worked for me. Thanks

artgrohe · Accepted Answer · 2013-08-15 08:41:17Z

71

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

Example:

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

answered Aug 15, 2013 at 8:41

artgrohe

3,3923 gold badges27 silver badges31 bronze badges

5 Comments

Trevor Over a year ago

Pros and cons of this method?

rvighne Over a year ago

@Trevor: Total configurability and ability to add getters and setters; also, ability to add multiple properties at once with defineProperties (plural).

user2036825 Over a year ago

@Thielicious Object.defineProperty isn’t meant to be the easy convenience tool, but the one with the fine-grained control. If you don’t need that additional control, it’s not the right tool to choose.

Jack G Over a year ago

Object.defineProperty(obj, prop, valueDescriptor) is a lot slower and harder for V8 to optimize than simply doing obj[prop] = value;

Grumbunks Over a year ago

This is the best solution. Dynamically creating entries with obj[prop] = value will give you headaches when you're trying to parse your object with functions like Object.getOwnPropertyNames

Maxim Sloyko · Accepted Answer · 2009-07-26 09:34:54Z

24

Here, using your notation:

var data = {
    'PropertyA': 1,
    'PropertyB': 2,
    'PropertyC': 3
};
var propName = 'Property' + someUserInput
//imagine someUserInput was 'Z', how can I now add a 'PropertyZ' property to 
//my object?
data[propName] = 'Some New Property value'

answered Jul 26, 2009 at 9:34

Maxim Sloyko

16k9 gold badges46 silver badges50 bronze badges

Comments

Gabriel Hurley · Accepted Answer · 2009-07-26 09:37:10Z

22

You can add as many more properties as you like simply by using the dot notation:

var data = {
    var1:'somevalue'
}
data.newAttribute = 'newvalue'

or:

data[newattribute] = somevalue

for dynamic keys.

edited Jul 26, 2009 at 9:37

answered Jul 26, 2009 at 9:28

Gabriel Hurley

40.1k14 gold badges64 silver badges89 bronze badges

2 Comments

Marc Gravell Over a year ago

if the properties name is not determined until run time" - so that won't work unless you use eval, which isn't a good option

Gabriel Hurley Over a year ago

or use the [] syntax... data[somevar] = somevalue

Anas Nakawa · Accepted Answer · 2014-04-01 10:49:55Z

21

in addition to all the previous answers, and in case you're wondering how we're going to write dynamic property names in the Future using Computed Property Names ( ECMAScript 6 ), here's how:

var person = "John Doe";
var personId = "person_" + new Date().getTime();
var personIndex = {
    [ personId ]: person
//  ^ computed property name
};

personIndex[ personId ]; // "John Doe"

reference: Understanding ECMAScript 6 - Nickolas Zakas

answered Apr 1, 2014 at 10:49

Anas Nakawa

2,0151 gold badge24 silver badges43 bronze badges

Comments

Sarvesh · Accepted Answer · 2014-04-08 05:24:38Z

16

Just an addition to abeing's answer above. You can define a function to encapsulate the complexity of defineProperty as mentioned below.

var defineProp = function ( obj, key, value ){
  var config = {
    value: value,
    writable: true,
    enumerable: true,
    configurable: true
  };
  Object.defineProperty( obj, key, config );
};

//Call the method to add properties to any object
defineProp( data, "PropertyA",  1 );
defineProp( data, "PropertyB",  2 );
defineProp( data, "PropertyC",  3 );

reference: http://addyosmani.com/resources/essentialjsdesignpatterns/book/#constructorpatternjavascript

answered Apr 8, 2014 at 5:24

Sarvesh

6479 silver badges17 bronze badges

Comments

morewry · Accepted Answer · 2017-08-16 19:45:19Z

14

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:

Object.defineProperty(data, key, withValue(value));

where data is your object, key is the variable to store the key name and value is the variable to store the value.

I hope this helps!

edited Aug 16, 2017 at 19:45

morewry

4,4583 gold badges38 silver badges35 bronze badges

answered Nov 12, 2015 at 14:34

Fabricio

3,3072 gold badges18 silver badges22 bronze badges

Comments

Mohsen · Accepted Answer · 2019-11-30 22:37:59Z

14

It can be useful if mixed new property add in runtime:

data = { ...data, newPropery: value}

However, spread operator use shallow copy but here we assign data to itself so should lose nothing

answered Nov 30, 2019 at 22:37

Mohsen

4,2451 gold badge34 silver badges33 bronze badges

Comments

Edper · Accepted Answer · 2017-10-01 12:41:09Z

13

I know there are several answers to this post already, but I haven't seen one wherein there are multiple properties and they are within an array. And this solution by the way is for ES6.

For illustration, let's say we have an array named person with objects inside:

 let Person = [{id:1, Name: "John"}, {id:2, Name: "Susan"}, {id:3, Name: "Jet"}]

So, you can add a property with corresponding value. Let's say we want to add a Language with a default value of EN.

Person.map((obj)=>({...obj,['Language']:"EN"}))

The Person array now would become like this:

Person = [{id:1, Name: "John", Language:"EN"}, 
{id:2, Name: "Susan", Language:"EN"}, {id:3, Name: "Jet", Language:"EN"}]

answered Oct 1, 2017 at 12:41

Edper

9,3621 gold badge32 silver badges49 bronze badges

2 Comments

Ed Orsi Over a year ago

You're not actually adding properties to an object, you're creating a new object with the old object's properties (via spread operator) and the new props as well.

Edper Over a year ago

You're right on that it should have been Person = Person.map(code here). But the point is you can add property to an existing object easily with ES6.

Philipp · Accepted Answer · 2020-08-03 19:25:30Z

I was looking for a solution where I can use dynamic key-names inside the object declaration (without using ES6 features like ... or [key]: value)

Here's what I came up with:

var obj = (obj = {}, obj[field] = 123, obj)

It looks a little bit complex at first, but it's really simple. We use the Comma Operator to run three commands in a row:

obj = {}: creates a new object and assigns it to the variable obj
obj[field] = 123: adds a computed property name to obj
obj: use the obj variable as the result of the parentheses/comma list

This syntax can be used inside a function parameter without the requirement to explictely declare the obj variable:

// The test function to see the result.
function showObject(obj) {
    console.log(obj);
}

// My dynamic field name.
var field = "myDynamicField";

// Call the function with our dynamic object.
showObject( (obj = {}, obj[field] = 123, obj) );

/*
Output:

{
  "myDynamicField": true
}
*/

Some variations

"strict mode" workaround:

The above code does not work in strict mode because the variable "obj" is not declared.

// This gives the same result, but declares the global variable `this.obj`!
showObject( (this.obj = {}, obj[field] = 123, obj) );

ES2015 code using computed property names in initializer:

// Works in most browsers, same result as the other functions.
showObject( {[field] = 123} );

This solution works in all modern browsers (but not in IE, if I need to mention that)

Super hacky way using `JSON.parse()`:

// Create a JSON string that is parsed instantly. Not recommended in most cases.
showObject( JSON.parse( '{"' + field +'":123}') );
// read: showObject( JSON.parse( '{"myDynamicfield":123}') );

Allows special characters in keys

Note that you can also use spaces and other special characters inside computed property names (and also in JSON.parse).

var field = 'my dynamic field :)';
showObject( {[field] = 123} );
// result: { "my dynamic field :)": 123 }

Those fields cannot be accessed using a dot (obj.my dynamic field :) is obviously syntactically invalid), but only via the bracket-notation, i.e., obj['my dynamic field :)'] returns 123

Sydwell · Accepted Answer · 2016-03-30 11:23:37Z

7

The simplest and most portable way is.

var varFieldName = "good";
var ob = {};
Object.defineProperty(ob, varFieldName , { value: "Fresh Value" });

Based on #abeing answer!

answered Mar 30, 2016 at 11:23

Sydwell

5,0231 gold badge35 silver badges36 bronze badges

Comments

Eugen Konkov · Accepted Answer · 2018-12-11 13:26:24Z

Be careful while adding a property to the existing object using .(dot) method.

(.dot) method of adding a property to the object should only be used if you know the 'key' beforehand otherwise use the [bracket] method.

Example:

   var data = {
        'Property1': 1
    };
    
    // Two methods of adding a new property [ key (Property4), value (4) ] to the
    // existing object (data)
    data['Property2'] = 2; // bracket method
    data.Property3 = 3;    // dot method
    console.log(data);     // { Property1: 1, Property2: 2, Property3: 3 }
    
    // But if 'key' of a property is unknown and will be found / calculated
    // dynamically then use only [bracket] method not a dot method    
    var key;
    for(var i = 4; i < 6; ++i) {
    	key = 'Property' + i;     // Key - dynamically calculated
    	data[key] = i; // CORRECT !!!!
    }
    console.log(data); 
    // { Property1: 1, Property2: 2, Property3: 3, Property4: 4, Property5: 5 }
    
    for(var i = 6; i < 2000; ++i) {
    	key = 'Property' + i; // Key - dynamically calculated
    	data.key = i;         // WRONG !!!!!
    }
    console.log(data); 
    // { Property1: 1, Property2: 2, Property3: 3, 
    //   Property4: 4, Property5: 5, key: 1999 }

Note the problem in the end of console log - 'key: 1999' instead of Property6: 6, Property7: 7,.........,Property1999: 1999. So the best way of adding dynamically created property is the [bracket] method.

Juan Pablo · Accepted Answer · 2023-03-29 07:11:30Z

5

You could do something like this

let myObj = {
  propertyA: 1,
  propertyB: 2,
  propertyC: 3,
}

// Declaring val here, could get from the user
let val = 'D';
myObj = {...myObj, [`property${val}`]: 4}

answered Mar 29, 2023 at 7:11

Juan Pablo

4286 silver badges18 bronze badges

Comments

Hamboy75 · Accepted Answer · 2017-06-15 20:18:33Z

A nice way to access from dynamic string names that contain objects (for example object.subobject.property)

function ReadValue(varname)
{
    var v=varname.split(".");
    var o=window;
    if(!v.length)
        return undefined;
    for(var i=0;i<v.length-1;i++)
        o=o[v[i]];
    return o[v[v.length-1]];
}

function AssignValue(varname,value)
{
    var v=varname.split(".");
    var o=window;
    if(!v.length)
        return;
    for(var i=0;i<v.length-1;i++)
        o=o[v[i]];
    o[v[v.length-1]]=value;
}

Example:

ReadValue("object.subobject.property");
WriteValue("object.subobject.property",5);

eval works for read value, but write value is a bit harder.

A more advanced version (Create subclasses if they dont exists, and allows objects instead of global variables)

function ReadValue(varname,o=window)
{
    if(typeof(varname)==="undefined" || typeof(o)==="undefined" || o===null)
        return undefined;
    var v=varname.split(".");
    if(!v.length)
        return undefined;
    for(var i=0;i<v.length-1;i++)
    {
        if(o[v[i]]===null || typeof(o[v[i]])==="undefined") 
            o[v[i]]={};
        o=o[v[i]];
    }
    if(typeof(o[v[v.length-1]])==="undefined")    
        return undefined;
    else    
        return o[v[v.length-1]];
}

function AssignValue(varname,value,o=window)
{
    if(typeof(varname)==="undefined" || typeof(o)==="undefined" || o===null)
        return;
    var v=varname.split(".");
    if(!v.length)
        return;
    for(var i=0;i<v.length-1;i++)
    {
        if(o[v[i]]===null || typeof(o[v[i]])==="undefined")
            o[v[i]]={};
        o=o[v[i]];
    }
    o[v[v.length-1]]=value;
}

Example:

ReadValue("object.subobject.property",o);
WriteValue("object.subobject.property",5,o);

This is the same that o.object.subobject.property

exactly what I was looking for, this is useful for react this.setState({dynamic property: value }) thankyou!

lewma · Accepted Answer · 2016-11-28 16:53:21Z

Here's how I solved the problem.

var obj = {

};
var field = "someouter.someinner.someValue";
var value = 123;

function _addField( obj, field, value )
{
    // split the field into tokens
    var tokens = field.split( '.' );

    // if there's more than one token, this field is an object
    if( tokens.length > 1 )
    {
        var subObj = tokens[0];

        // define the object
        if( obj[ subObj ] !== undefined ) obj[ subObj ] = {};

        // call addfield again on the embedded object
        var firstDot = field.indexOf( '.' );
        _addField( obj[ subObj ], field.substr( firstDot + 1 ), value );

    }
    else
    {
        // no embedded objects, just field assignment
        obj[ field ] = value;
    }
}

_addField( obj, field, value );
_addField(obj, 'simpleString', 'string');

console.log( JSON.stringify( obj, null, 2 ) );

Generates the following object:

{
  "someouter": {
    "someinner": {
      "someValue": 123
    }
  },
  "simpleString": "string"
}

Sandeep Patel · Accepted Answer · 2020-11-30 10:06:58Z

Yes it is possible. I have achieved using below implementation. for that I am getting array in response which I want in an object as list of attributes.

response = {
  "equityMonths": [
    {
      "id": 1,
      "month": "JANUARY",
      "isEligible": false
    },
    {
      "id": 2,
      "month": "FEBRUARY",
      "isEligible": true
    },
    {
      "id": 3,
      "month": "MARCH",
      "isEligible": false
    },
    {
      "id": 4,
      "month": "APRIL",
      "isEligible": true
    },
    {
      "id": 5,
      "month": "MAY",
      "isEligible": false
    },
    {
      "id": 6,
      "month": "JUNE",
      "isEligible": true
    },
    {
      "id": 7,
      "month": "JULY",
      "isEligible": true
    },
    {
      "id": 8,
      "month": "AUGUST",
      "isEligible": false
    },
    {
      "id": 9,
      "month": "SEPTEMBER",
      "isEligible": true
    },
    {
      "id": 10,
      "month": "OCTOBER",
      "isEligible": false
    },
    {
      "id": 11,
      "month": "NOVEMBER",
      "isEligible": true
    },
    {
      "id": 12,
      "month": "DECEMBER",
      "isEligible": false
    }
  ]
}

here, I want equityMonths as an object and Jan to Dec it's key and isEligible as value. for that we have to use Object class's defineProperty() method which allows to add dynamic property into objects.

code for adding property dynamically to the object.

let equityMonth = new Object();

response.equityMonths.forEach(element => {
    Object.defineProperty(equityMonth, element['month'], {
       value: element['isEligible'],
       writable: true,
       enumerable: true,
       configurable: true
    });
});
console.log("DATA : " + JSON.stringify(equityMonth));

in above code we have array of equityMonths which we have converted as property into the object.

output:

DATA : {"JANUARY":false,"FEBRUARY":true,"MARCH":false,"APRIL":true,"MAY":false,"JUNE":true,"JULY":true,"AUGUST":false,"SEPTEMBER":true,"OCTOBER":false,"NOVEMBER":true,"DECEMBER":false}

Shah Fahad · Accepted Answer · 2023-05-11 13:09:58Z

1

Simplest way to add data dynamically to js object.

 // Create an object
 const data = {};
     
 // Add properties to it with a key and value
 data['key'] = value;

answered May 11, 2023 at 13:09

Shah Fahad

2451 silver badge4 bronze badges

Comments

Umesh · Accepted Answer · 2019-02-21 07:37:30Z

-1

A perfect easy way

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

var newProperty = 'getThisFromUser';
data[newProperty] = 4;

console.log(data);

If you want to apply it on an array of data (ES6/TS version)

const data = [
  { 'PropertyA': 1, 'PropertyB': 2, 'PropertyC': 3 },
  { 'PropertyA': 11, 'PropertyB': 22, 'PropertyC': 33 }
];

const newProperty = 'getThisFromUser';
data.map( (d) => d[newProperty] = 4 );

console.log(data);

answered Feb 21, 2019 at 7:37

Umesh

2,74221 silver badges24 bronze badges

Comments

thedz · Accepted Answer · 2009-07-26 09:29:19Z

-18

Definitely. Think of it as a dictionary or associative array. You can add to it at any point.

answered Jul 26, 2009 at 9:29

thedz

5,6203 gold badges28 silver badges29 bronze badges

1 Comment

Obinna Nwakwue Over a year ago

Just saying that will not help.

Collectives™ on Stack Overflow

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

22 Answers 22

22 Comments

6 Comments

4 Comments

1 Comment

5 Comments

Comments

2 Comments

Comments

Comments

Comments

Comments

2 Comments

Some variations

"strict mode" workaround:

ES2015 code using computed property names in initializer:

Super hacky way using `JSON.parse()`:

Allows special characters in keys

Comments

Comments

Comments

Comments

1 Comment

Comments

Comments

Comments

Comments

1 Comment

Linked

Hot Network Questions

Collectives™ on Stack Overflow

22 Answers 22

22 Comments

6 Comments

4 Comments

1 Comment

5 Comments

Comments

2 Comments

Comments

Comments

Comments

Comments

2 Comments

Some variations

"strict mode" workaround:

ES2015 code using computed property names in initializer:

Super hacky way using JSON.parse():

Allows special characters in keys

Comments

Comments

Comments

Comments

1 Comment

Comments

Comments

Comments

Comments

1 Comment

Linked

Related

Super hacky way using `JSON.parse()`: