How to usethe spread operator (ES6) in Javascript

In this approach we use the spread operator to add properties from one object to another, facilitating property addition. To remove properties, a new object is created selectively excluding specified properties.

Example: In this example, we add properties from additionalInfo to person, we use the spread operator (…). The spread operator allows us to merge the properties from additionalInfo into person and we use the spread operator to create a new object newPerson without the age property from the original person object. The … spread operator creates a shallow copy of the properties.

Javascript




let person = {
    name: 'Nikita',
    age: 20,
};
 
// Adding properties using the spread operator
const additionalInfo = {
    city: 'Uttarakhan',
    occupation: 'Doctor',
};
 
person = { ...person, ...additionalInfo };
 
console.log('After adding properties:');
console.log(person);
 
 
// Removing properties using the spread operator
const { age, ...newPerson } = person;
 
console.log('After removing properties:');
console.log(newPerson);


Output

After adding properties:
{ name: 'Nikita', age: 20, city: 'Uttarakhan', occupation: 'Doctor' }
After removing properties:
{ name: 'Nikita', city: 'Uttarakhan', occupation: 'Doctor' }


How to add and remove properties from objects in JavaScript ?

In this article, we will try to understand how to add properties to an object as well as how to add or remove properties from an object in JavaScript.

Before we actually go and see the addition and removal of properties from an object let us first understand the basics of an object in JavaScript.

Object:

  • An object in JavaScript is a collection of properties.
  • A single property in a JavaScript object is actually the association between the name (or key ) and a value.
  • An object can contain a different number of properties which is further having different names as well as values.

Syntax: By using the following syntax one can easily create an object with a different number of properties.

let object_name = {
property_name: value,
...
}

Now that we have understood the basic details associated with the object in JavaScript, let us see some examples to add properties to an object as well as how to remove properties from an object.

Adding/Removing Properties from an Object:

  • As depicted in the above pictorial representation, we can easily add or remove several properties from an object in JavaScript by following certain methods or techniques.
  • For adding any property, one could either use object_name.property_name = value (or) object_name[“property_name”] = value.
  • For deleting any property, one could easily use delete object_name.property_name (or)  delete object_name[“property_name”].

here are several methods that can be used to add and remove properties from objects.

Similar Reads

Approach 1: Use dot notation or bracket notation

In this approach to add properties to an object, you can use either dot notation or bracket notation. and To remove properties from an object, you can use the delete keyword with either dot notation or bracket notation....

Approach2 : Using the Object.assign() method

...

Approach 3: Using Object.defineProperty() and Object.defineProperties()

The approach involves using Object.assign() to merge properties from one object into another, facilitating property addition. To remove properties, a new object is created using the spread operator....

Approach 4: Using the spread operator (ES6)

...