Remove Properties from Object Javascript

We often encounter a requirement to delete specific properties from a javascript object. This article demonstrates easy ways to delete single or multiple properties from a javascript object using different methods and example illustrations.

Table of Contents:

• Remove Property from Object Javascript
• Remove Property from Object Javascript Destructuring
• Delete Multiple Properties from Object Javascript

Remove Property from Object Javascript

Javascript’s delete operator will remove a property from a javascript object. If no references to the deleted property are found, it is released eventually.

Syntax:-

delete objectName.propertyName
delete objectName[propertyName]

Example :-

Remove personIdNumber property from the object { personFirstName: ‘George’, personLastName: ‘Smith’, dateOfBirth: ‘Nov 14 1984’ , city : ‘Santiago’, personIdNumber : 3434343}

Code:-

let personObject =  { personFirstName : 'George',
                      personLastName  : 'Smith',
                      dateOfBirth     : 'Nov 14 1984' ,
                      city            : 'Santiago',
                      personIdNumber  : 3434343};
console.log("Before Delete: " );
console.log(personObject);
// using delete operator
delete personObject.personIdNumber;
console.log("After Delete: ");
console.log(personObject);

Output:-

Before Delete: 
{
  personFirstName: 'George',
  personLastName: 'Smith',
  dateOfBirth: 'Nov 14 1984',
  city: 'Santiago',
  personIdNumber: 3434343
}
After Delete: 
{
  personFirstName: 'George',
  personLastName: 'Smith',
  dateOfBirth: 'Nov 14 1984',
  city: 'Santiago'
}

Explanation:-

As the output shows after applying the delete operator to personObject on personIdNumber(personObject.personIdNumber), the property personIdNumber is not seen on the console.

Remove Property from Object Javascript Destructuring

Javascript’s destructuring assignment syntax allows the properties from objects or values from arrays to be unpacked to distinct variables.

Example :-

Create a new object without personIdNumber property from the object { personFirstName: ‘George’, personLastName: ‘Smith’, dateOfBirth: ‘Nov 14 1984’ , city : ‘Santiago’, personIdNumber : 3434343}

Code:-

let personObject =  { personFirstName : 'George',
                      personLastName  : 'Smith',
                      dateOfBirth     : 'Nov 14 1984' ,
                      city            : 'Santiago',
                      personIdNumber  : 3434343};
//object destructuring
const {personIdNumber, ...newObject} = personObject;
console.log("Original Object: ")
console.log(personObject);
console.log("New Object: ")
console.log(newObject);

Output:-

Original Object: 
{
  personFirstName: 'George',
  personLastName: 'Smith',
  dateOfBirth: 'Nov 14 1984',
  city: 'Santiago',
  personIdNumber: 3434343
}
New Object: 
{
  personFirstName: 'George',
  personLastName: 'Smith',
  dateOfBirth: 'Nov 14 1984',
  city: 'Santiago'
}

Explanation:-

Here, the new object(newObj) will contain all properties from the personObject except the property personIdNumber using destructing of personObject.

Note that destructuring can be used from ECMAScript6 onwards.

Remove Multiple Properties from Object Javascript

Example :-

Remove the properties personIdNumber, city from the object { personFirstName: ‘George’, personLastName: ‘Smith’, dateOfBirth: ‘Nov 14 1984’ , city : ‘Santiago’, personIdNumber : 3434343}

Code:-

//create a custom method to delete multiple properties
function deleteMultipleProperties (_object, _propertyArray) 
{
  for (const p of _propertyArray) {
      (p in _object) && (delete _object[p]);
  }    
}
let personObject =  { personFirstName : 'George',
                      personLastName  : 'Smith',
                      dateOfBirth     : 'Nov 14 1984' ,
                      city            : 'Santiago',
                      personIdNumber  : 3434343};
console.log("Before Delete:");
console.log(personObject);
// usage of the function deleteMultipleProperties
deleteMultipleProperties(personObject, ['city', 'personIdNumber']);
console.log("After Delete:");
console.log(personObject);

Output:-

Before Delete:
{
  personFirstName: 'George',
  personLastName: 'Smith',
  dateOfBirth: 'Nov 14 1984',
  city: 'Santiago',
  personIdNumber: 3434343
}
After Delete:
{
  personFirstName: 'George',
  personLastName: 'Smith',
  dateOfBirth: 'Nov 14 1984'
}

Explanation:-

• Here, we use the same delete operator to delete the properties one-by-one. The only difference is that we have created a custom method deleteMultipleProperties().
• _object: is the object from which the properties need to be deleted.
• _propertyArray: is the array of properties to be deleted from the object.

I hope this article helped you delete a single property or multiple properties from a javascript object. Good Luck !!!