Javascript assign properties to object

5 ways to Add a Property to object in JavaScript

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

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:

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;

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:

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:

4. Spread operator syntax “ “

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 =

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 = , id: 130> // Result: < id: 130, name: "Jone Doe", age: 29, location: <>> // updated exisiting object with new property employee = // Result:

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.

Источник

Object.assign()

The Object.assign() static method copies all enumerable own properties from one or more source objects to a target object. It returns the modified target object.

Try it

Syntax

Parameters

The target object — what to apply the sources’ properties to, which is returned after it is modified.

The source object(s) — objects containing the properties you want to apply.

Return value

Description

Properties in the target object are overwritten by properties in the sources if they have the same key. Later sources’ properties overwrite earlier ones.

The Object.assign() method only copies enumerable and own properties from a source object to a target object. It uses [[Get]] on the source and [[Set]] on the target, so it will invoke getters and setters. Therefore it assigns properties, versus copying or defining new properties. This may make it unsuitable for merging new properties into a prototype if the merge sources contain getters.

For copying property definitions (including their enumerability) into prototypes, use Object.getOwnPropertyDescriptor() and Object.defineProperty() instead.

Both String and Symbol properties are copied.

In case of an error, for example if a property is non-writable, a TypeError is raised, and the target object is changed if any properties are added before the error is raised.

Note: Object.assign() does not throw on null or undefined sources.

Examples

Cloning an object

const obj =  a: 1 >; const copy = Object.assign(>, obj); console.log(copy); // 

Warning for Deep Clone

For deep cloning, we need to use alternatives like structuredClone() , because Object.assign() copies property values.

If the source value is a reference to an object, it only copies the reference value.

const obj1 =  a: 0, b:  c: 0 > >; const obj2 = Object.assign(>, obj1); console.log(obj2); // < a: 0, b: < c: 0 >> obj1.a = 1; console.log(obj1); // < a: 1, b: < c: 0 >> console.log(obj2); // < a: 0, b: < c: 0 >> obj2.a = 2; console.log(obj1); // < a: 1, b: < c: 0 >> console.log(obj2); // < a: 2, b: < c: 0 >> obj2.b.c = 3; console.log(obj1); // < a: 1, b: < c: 3 >> console.log(obj2); // < a: 2, b: < c: 3 >> // Deep Clone const obj3 =  a: 0, b:  c: 0 > >; const obj4 = structuredClone(obj3); obj3.a = 4; obj3.b.c = 4; console.log(obj4); // < a: 0, b: < c: 0 >> 

Merging objects

const o1 =  a: 1 >; const o2 =  b: 2 >; const o3 =  c: 3 >; const obj = Object.assign(o1, o2, o3); console.log(obj); // console.log(o1); // < a: 1, b: 2, c: 3 >, target object itself is changed. 

Merging objects with same properties

const o1 =  a: 1, b: 1, c: 1 >; const o2 =  b: 2, c: 2 >; const o3 =  c: 3 >; const obj = Object.assign(>, o1, o2, o3); console.log(obj); // 

The properties are overwritten by other objects that have the same properties later in the parameters order.

Copying symbol-typed properties

const o1 =  a: 1 >; const o2 =  [Symbol("foo")]: 2 >; const obj = Object.assign(>, o1, o2); console.log(obj); // < a : 1, [Symbol("foo")]: 2 >(cf. bug 1207182 on Firefox) Object.getOwnPropertySymbols(obj); // [Symbol(foo)] 

Properties on the prototype chain and non-enumerable properties cannot be copied

const obj = Object.create( // foo is on obj's prototype chain.  foo: 1 >,  bar:  value: 2, // bar is a non-enumerable property. >, baz:  value: 3, enumerable: true, // baz is an own enumerable property. >, >, ); const copy = Object.assign(>, obj); console.log(copy); // 

Primitives will be wrapped to objects

const v1 = "abc"; const v2 = true; const v3 = 10; const v4 = Symbol("foo"); const obj = Object.assign(>, v1, null, v2, undefined, v3, v4); // Primitives will be wrapped, null and undefined will be ignored. // Note, only string wrappers can have own enumerable properties. console.log(obj); // 

Exceptions will interrupt the ongoing copying task

const target = Object.defineProperty(>, "foo",  value: 1, writable: false, >); // target.foo is a read-only property Object.assign(target,  bar: 2 >,  foo2: 3, foo: 3, foo3: 3 >,  baz: 4 >); // TypeError: "foo" is read-only // The Exception is thrown when assigning target.foo console.log(target.bar); // 2, the first source was copied successfully. console.log(target.foo2); // 3, the first property of the second source was copied successfully. console.log(target.foo); // 1, exception is thrown here. console.log(target.foo3); // undefined, assign method has finished, foo3 will not be copied. console.log(target.baz); // undefined, the third source will not be copied either. 

Copying accessors

const obj =  foo: 1, get bar()  return 2; >, >; let copy = Object.assign(>, obj); console.log(copy); // // The value of copy.bar is obj.bar's getter's return value. // This is an assign function that copies full descriptors function completeAssign(target, . sources)  sources.forEach((source) =>  const descriptors = Object.keys(source).reduce((descriptors, key) =>  descriptors[key] = Object.getOwnPropertyDescriptor(source, key); return descriptors; >, >); // By default, Object.assign copies enumerable Symbols, too Object.getOwnPropertySymbols(source).forEach((sym) =>  const descriptor = Object.getOwnPropertyDescriptor(source, sym); if (descriptor.enumerable)  descriptors[sym] = descriptor; > >); Object.defineProperties(target, descriptors); >); return target; > copy = completeAssign(>, obj); console.log(copy); // < foo:1, get bar() < return 2 >> 

Specifications

Browser compatibility

BCD tables only load in the browser

See also

Источник