Add Property to an Object in Javascript (6 ways)

This article demonstrates easy ways to add a property in the javascript object using different methods and various example illustrations. We will also see how to add new properties dynamically to javascript objects after their creation.

Table of Contents:

Add Property to Javascript Object Dynamically using Object.defineProperty()

Javascript’s Object.defineProperty() method is static and adds a new property to an object directly or modifies an existing property. This method returns the modified Object.

Example:-

Add the property { city: ‘Santiago’ } to an object { personFirstName: ‘George’, personLastName: ‘Smith’, dateOfBirth: “Nov 14 1984”}

Code:-

// create a new function definePropertyDynamically 
var definePropertyDynamically = function ( _object, _propertyName, _propertyValue ){
  var config = {
    value: _propertyValue,
    writable: true,
    enumerable: true,
    configurable: true
  };
  Object.defineProperty( _object, _propertyName, config );
};
let personObject =  { personFirstName: 'George', personLastName: 'Smith', dateOfBirth: "Nov 14 1984"};
//use this method to add properties to any object 
definePropertyDynamically( personObject, "city",  "Santiago" );
// print the modified object
console.log(personObject);

Output:-

{
  personFirstName: 'George',
  personLastName: 'Smith',
  dateOfBirth: 'Nov 14 1984',
  city: 'Santiago'
}

Explanation:-

  • Here, in the above code we are creating a function that will be able to add a property to any object.
  • _object -> name of the object for which we need to add a new property
  • _propertyName -> is the name of the property
  • _propertyValue -> value to be assigned to the property.
  • Within the function the code makes this new property writable, enumerable and configurable and hence can be added dynamically after the object creation.

Add Property to Javascript Object

Example:-

Add the property { city: ‘Santiago’ } to an object { personFirstName: ‘George’, personLastName: ‘Smith’, dateOfBirth: “Nov 14 1984”}

Code:-

//original object
let personObject =  { personFirstName: 'George', personLastName: 'Smith', dateOfBirth: "Nov 14 1984"};
// new property with it's value
personObject["city"] = "Santiago";
// object after adding new property
console.log(personObject)

Output:-

{
  personFirstName: 'George',
  personLastName: 'Smith',
  dateOfBirth: 'Nov 14 1984',
  city: 'Santiago'
}

Add Property to Javascript Object using eval()

Javascript’s eval(string) function is used to evaluate the javascript code represented as a string. It evaluates the expression passed in the function as a parameter.

Example:-

Add the property { city: ‘Santiago’ } to an object { personFirstName: ‘George’, personLastName: ‘Smith’, dateOfBirth: “Nov 14 1984”}

Code:-

//original object
let personObject =  { personFirstName: 'George', personLastName: 'Smith', dateOfBirth: "Nov 14 1984"};
// new property with it's value
let propertyName = "city";
let propertyValue = "Santiago";
//eval() to evaluate the expression 
eval("personObject." + propertyName + " = '" + propertyValue + "'");
// object after adding new property
console.log(personObject)

Output:-

{
  personFirstName: 'George',
  personLastName: 'Smith',
  dateOfBirth: 'Nov 14 1984',
  city: 'Santiago'
}

Note that eval() has some security concerns, and therefore, if you are planning to use it for the values supplied by the user, then, in that case, avoid using this function.

Add Property to Javascript Object using Spread Operator

Javascript’s Spread syntax(…) allows an iterable to be expanded in places where zero or more arguments or elements are expected.

Example:-

Add the property { city: ‘Santiago’ } to an object { personFirstName: ‘George’, personLastName: ‘Smith’, dateOfBirth: “Nov 14 1984”}

Code:-

//original object
let personObject =  { personFirstName: 'George', personLastName: 'Smith', dateOfBirth: "Nov 14 1984"};
// new property with it's value
let propertyName = "city";
let propertyValue = "Santiago";
//Spread syntax(..,) to add a new property
personObject = { ...personObject, propertyName: propertyValue}
// object after adding new property
console.log(personObject)

Output:-

{
  personFirstName: 'George',
  personLastName: 'Smith',
  dateOfBirth: 'Nov 14 1984',
  propertyName: 'Santiago'
}

Add Property to Javascript Object using Comma Operator

Example:-

Add the property { city: ‘Santiago’ } to an object { personFirstName: ‘George’, personLastName: ‘Smith’, dateOfBirth: “Nov 14 1984”}

Code:-

// create a new object and assign it to a variable personObject
let personObject =  { personFirstName: 'George', personLastName: 'Smith', dateOfBirth: "Nov 14 1984"};
// new property with it's value
let propertyName = "city";
let propertyValue = "Santiago";
//use comma operator to add a new property to the same personObject
personObject = (personObject, personObject[propertyName] = propertyValue, personObject);
// object after adding new property
console.log(personObject);

Output:-

{
  personFirstName: 'George',
  personLastName: 'Smith',
  dateOfBirth: 'Nov 14 1984',
  propertyName: 'Santiago'
}

Add Property to Javascript Object using map()

Javascript’s map() method is used to create a new array with the elements resulting from applying the provided function on the calling array elements.

Example:-

Add the property { city: ‘Santiago’ } to an object { personFirstName: ‘George’, personLastName: ‘Smith’, dateOfBirth: “Nov 14 1984”}

Code:-

// create a new object and assign it to a variable personObject
let personObject =  { personFirstName: 'George', personLastName: 'Smith', dateOfBirth: "Nov 14 1984"};
// new property with it's value
let propertyName = "city";
let propertyValue = "Santiago";
//use map() method to add a new property to the personObject
[personObject].map( (obj) => obj[propertyName] = propertyValue );
// object after adding new property
console.log(personObject);

Output:-

{
  personFirstName: 'George',
  personLastName: 'Smith',
  dateOfBirth: 'Nov 14 1984',
  city: 'Santiago'
}

I hope this method helped you to add a new property to an existing javascript object. Good Luck!!!

Leave a Comment

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.

Scroll to Top