5 ways to Add a Property to object in JavaScript

Previous Page Next Page

To demonstrate adding new properties to JavaScript object, we will consider the following example of an employee object:

var employee = { name: "Jone Doe", age: 35}

There are multiple instances to consider, which are as follows:

  1. Static property names: Addition of “id” property to an employee object.
  2. Dynamic property names: Include property based on the value of “customProp” variable.
  3. Adding properties from another object: Add location property from a person object to an employee object.

1. “object.property_name” syntax

The dot notation is the simplest way to access/modify the properties of a JavaScript object. A new property can be initialized by the following syntax:

object.new_property = new_value

In the below example, we are creating an “id” property with the value 130 for the employee object.

// Add new property
employee.id = 130

// update existing property
employee.age = 29

// Result: { id: 130, name: "Jone Doe", age: 29}

Further, adding properties for nested objects follows a similar syntax:

object.parent_prop.property = new_value

Below, the “country” property is added to a nested object which is the value of the “location” parent property in the employee object.

employee.location = {}

employee.location.country = "USA"

// Result: { name: "Jone Doe", age: 35, location: { country: "USA" }}

This approach is most ideal for the following instances:

  1. The property name is a static value and needs to be initialized manually.
  2. Property names don’t include special characters like extra space, etc.

2. Access property though “object[‘property_name’]”

The syntax based on the square brackets is an alternative approach with similar capabilities and avoids most of the disadvantages of the dot operator. The syntax for adding new property using square brackets is as follows:

object["property_name"] = property_value;

Square bracket syntax offers the following advantages over traditional dot operator:

  1. When the property name is based on a dynamic variable. For example, the property name is retrieved from API calls, user inputs, etc.
  2. The property name string value contains special characters like extra space, etc.

In the below example, the “Last name” property cannot be directly added using dot operator syntax due to the presence of space characters. Hence, we are able to accomplish the creation of “Last name” property using square bracket syntax.

var custom_prop = "Last name"

employee[custom_prop] = "Doe"

// Result: { name: "Jone Doe", age: 35, Last name: "doe"}

The nested objects are accessed using a series of multiple square bracket syntax or alternatively, a combination of dot operator and square brackets can also be used.

employee["location"] = {}

// Access nested objects with square brackets
employee["location"]["zip code"] = 1234

// Combine Dot operator with square brackets
employee.location["zip code"] = 1324

// Result: { name: "Jone Doe", age: 35, location: { zip code: 1324 }}

3. Create new property using Object.defineProperty()

JavaScript Object class also provides native “defineProperty()” method to define new properties for an object. In addition to specifying the value of the new property, “defineProperty()” also allow configuring the behavior for the property.

The generic syntax for “defineProperty()” is as follows:

Object.defineProperty(obj, property, configuration)

In the below example, we define “id” property for the employee object with a value of 130 and writable as false. Hence, subsequent changes in the value of the id property are discarded. Read more about Object.defineProperty from developer.mozilla.org/Object/defineProperty .

Object.defineProperty(employee, 'id', {
  value: 130,
  writable: false
});

// Discards changes in property value
employee.id = 412;

// Result: { id: 130, name: "Jone Doe", age: 29}

4. Spread operator syntax “{ …object, property_name: property_value }“

The spread operator allows the creation of a soft copy of an object with existing properties. The Spread operator followed by an inline property definition allows the addition of new properties. Further, the properties of another object can be added by using the spread operator multiple times.

// Add property1 & property2 to object
object = { ...object, property1: value1, property2: value2 }

// Add all properties from new_object
object = { ...object, ...new_object }

In the below example, we create a copy of the employee object combined with location and id properties. Next line, “id” object is added to employee object using the spread operator.

// add property to new object
var employee_copy = {...employee, location:{}, id: 130}

// Result: { id: 130, name: "Jone Doe", age: 29, location: {} }

// updated exisiting object with new property
employee = {...employee, id: 130}

// Result: { id: 130, name: "Jone Doe", age: 29}

5. Assign properties using Object.assign()

The “Object.assign()” method allows properties of the source object to be added to the target object. By defining all the new properties which need to be added to the source object, we achieve the addition of properties to a target object.

Object.assign(target, source);

In the below example, we add the “id” property with value 670 to the employee object using Object.assign.

Object.assign( employee, { id: 670 });

// Result: { id: 670, name: "Jone Doe", age: 29}

var person = { location: {} };

Object.assign( employee, person);

// Result: { id: 670, name: "Jone Doe", age: 29, location: {} }

Conclusion

Finally, to conclude the summary of the methods to add properties to objects is as follows:

  1. Dot method syntax is ideal for static property values.
  2. Square bracket syntax works best for dynamic values from external API, user input, etc.
  3. Object.defineProperty() is used when the property’s writability, getter, setters, etc needs to be configured.
  4. In object/array formatter functions and when properties from another object are included, the spread operator and Object.assign() are more ideal.

Related Articles