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.

• Use dot notation or bracket notation
• Using the Object.assign() method
• using Object.defineProperty() and Object.defineProperties()
• Using the spread operator (ES6)

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.

Example 1: In this example, we have an object person with initial properties: name, age, and occupation. We then use both dot notation and bracket notation to add properties (city, email, hobby, and gender) to the object, Next, we use both dot notation and bracket notation to remove properties (age, occupation, hobby, and gender) from the object

Javascript

let person = {
    name: 'Amit',
    age: 24,
    occupation: 'Engineer',
};

// Adding properties using dot notation
person.city = 'Uttarakhan';
person.email = 'Amit@example.com';

// Adding properties using bracket notation
person['hobby'] = 'Gyming';
person['gender'] = 'Male';

console.log('After adding properties:');
console.log(person);


// Removing properties using dot notation
delete person.age;
delete person.occupation;

// Removing properties using bracket notation
delete person['hobby'];
delete person['gender'];

console.log('After removing properties:');
console.log(person);

Output:

After adding properties:
{
  name: 'Amit',
  age: 24,
  occupation: 'Engineer',
  city: 'Uttarakhan',
  email: 'Amitn@example.com',
  hobby: 'Gyming',
  gender: 'Male'
}
After removing properties:
{ name: 'Amit', city: 'Uttarakhan', email: 'Amitn@example.com' }

Approach2 : Using the Object.assign() method

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.

Example 2: In this example, we use Object.assign() to add properties from one object to another, and then remove specific properties to create a new object without those properties.

Javascript

let person = {
    name: 'Aman',
    age: 30,
};

// Additional information to be added
const additionalInfo = {
    city: 'Noida',
    occupation: 'Engineer',
};

// Adding properties using Object.assign()
Object.assign(person, additionalInfo);

console.log('After adding properties:');
console.log(person);

// Removing properties using Object.assign()
//(creates a new object without specified properties)
const { age, occupation, ...newPerson } =
    Object.assign({}, person);

console.log('After removing properties:');
console.log(newPerson);

Output

After adding properties:
{ name: 'Aman', age: 30, city: 'Noida', occupation: 'Engineer' }
After removing properties:
{ name: 'Aman', city: 'Noida' }

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

Using Object.defineProperty() and Object.defineProperties() provides fine-grained control over property addition and removal, and it allows us to create a new object with desired properties selectively.

Example 3: In this example, we use Object.defineProperty() to add a property with attributes, and Object.defineProperties() to remove specific properties, creating a new object.

Javascript

let person = {
    name: 'Rohan',
    age: 20,
};

// Adding a property using Object.defineProperty()
Object.defineProperty(person, 'city', {
    value: 'Noida',
    writable: true,
    enumerable: true,
    configurable: true,
});

console.log('After adding a property:');
console.log(person);


// Removing properties using Object.defineProperties()
//(creates a new object without specified properties)
const { age, ...newPerson } =
    Object.defineProperties({}, {
        name: {
            value: person.name,
            writable: true, enumerable: true
        },
    });

console.log('After removing properties:');
console.log(newPerson);

Output

After adding a property:
{ name: 'Rohan', age: 20, city: 'Noida' }
After removing properties:
{ name: 'Rohan' }

Approach 4: Using the spread operator (ES6)

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' }