Scribd
Upload
45 views14 pages

5 Ways To Add A Property To Object in Javascript: Contact Mentor

The document discusses 5 ways to add properties to JavaScript objects: 1. Using the dot notation syntax (object.property) to add static property names 2. Using square bracket syntax (object["property"]) to add dynamic property names 3. Using Object.defineProperty() to define properties and configure behaviors 4. Using the spread operator ({...object, newProperty: value}) to copy objects and add properties 5. Using Object.assign() to add source object properties to a target object The dot notation and spread operator are best for static properties, while square brackets and Object.assign() handle dynamic properties better. Object.defineProperty configures property attributes.

Uploaded by

Al
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
45 views14 pages

5 Ways To Add A Property To Object in Javascript: Contact Mentor

The document discusses 5 ways to add properties to JavaScript objects: 1. Using the dot notation syntax (object.property) to add static property names 2. Using square bracket syntax (object["property"]) to add dynamic property names 3. Using Object.defineProperty() to define properties and configure behaviors 4. Using the spread operator ({...object, newProperty: value}) to copy objects and add properties 5. Using Object.assign() to add source object properties to a target object The dot notation and spread operator are best for static properties, while square brackets and Object.assign() handle dynamic properties better. Object.defineProperty configures property attributes.

Uploaded by

Al
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 14

Contact Mentor

Projects + Tutorials on React JS & JavaScript

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

x
// 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 x
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: 132

3. Create new property using Object.defineProperty()


JavaScript Object class also provides native “defineProperty()” method to define x
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


x
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: {} };

x
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.
x
x
x
x
x
x
x

© 2022 Contact Mentor • Built with GeneratePress


x

You might also like