{

Six ways of remove property or key in the object of Javascript


Learn different ways of removing property or key in a javascript .object.

How to Delete a property from an object in Javascript?

JavaScript object is a collection of keys and values of a property enclosed in parenthesis{}.

Let’s declare an object in javascript with inline initialization of key and values

let obj = {
    "model": "alto",
    "company": "Maruthi",
    "type": "car"
}

In this blog post,

We are going to learn different ways to delete the key from an object with examples.

  • using delete operator syntax
  • Assign undefined to key
  • Using Lodash omit method
  • Using ramdaJS dissoc function
  • ES6 Spread and destruction assignment syntax approach
  • underscorejs pick and omit method

All the above methods mutate an original array.

Using the delete operator to remove a property

The delete operator is used to remove the key from an object, and its key and value are removed from an object.

Syntax:

delete object[key]; 
or
delete object.key

Important points

  • delete removes own properties of an object
  • Return true, if the key is removed, and return false if the key does not exist.
console.log(obj);
delete obj.company
for (const property in obj) {
    console.log(`${property}: ${obj[property]}`);
}
console.log(obj.company);

Output is

{ model: 'alto', company: 'Maruthi', type: 'car' }
model: alto
type: car
undefined

Step by Step

  • A object declared and initialed
  • printed object to console using console.log
  • removed the company key and its values from an object using the delete operator
  • Iterated object keys and value properties using for in loop syntax
  • And the property is completely removed and not shown during printing during loop iteration
  • Undefined is printed by retrieving the object’s deleted key

and another alternative to using delete is as follows

delete obj['company']

delete operator is usable and simple, but not best when you are doing bulk deleting keys from large objects with loop iteration. delete is very slow in performance.

Assigned undefined value to key

Assign undefined value to key, and key and value are removed from an object.

Performance-wise, assign undefined is 10x faster than delete operator.

Important points.

  • In this approach, It will not be completely remove from the object
  • As you see in the example, company property is still visible with undefined value during loop iteration.
console.log(obj);
obj.company = undefined
console.log(obj);

Output is

{ model: 'alto', company: 'Maruthi', type: 'car' }
{ model: 'alto', company: undefined, type: 'car' }

Using Lodash omit method

omit method in lodash removes object own properties, Omit method accepts objects and keys or a list of keys to be removed. Here is an example

newobj = _.omit(obj, 'type');
console.log(newobj)

and output is

Object {company: "Maruthi", model: "alto"}

Using ramdaJS dissoc function

ramdaJS utility library is utility library which has dissoc function. It accepts the first parameter as the key to being deleted, the second parameter is a source object and returns a new object after the deleted key.

R.dissoc('model', {"model": "alto","company": "Maruthi","type": "car"});

Output is

{company: "Maruthi", type: "car"}

ES6 Spread and destruction assignment syntax approach

spread operator and destruction assignment are new features ES6 language. It is easy using es6 syntax.

const { company, ...newobj } = obj;
console.log(newobj);

And output is

{ model: 'alto', type: 'car' }

omit, pick method in underscorejs

It does not remove the object keys but copies the properties from an original object by filtering specified keys. Both methods -pick and omit do the same operation.

Here is the syntax

pick(object,keys)
omit(object,keys)

Input to these methods are Objects is a source object keys are the list of keys that you want to remove from a target object

var empObject = {"id": "1", "name": "Franc", "salary": "5000"};
let empIdNameObject=_.pick(empObject, "id", "name");
console.log(empIdNameObject)
let empIdObject=_.omit(empObject, "id");
console.log(empIdObject)

and the output is

{"id": "1", "name": "Franc"};
{"id": "1"};

How to delete a property or key from an object array

Suppose you have an object array and wants to return a new array by removing a key from an array Array has a forEach function which contains a callback called for every object, use delete syntax to delete and return a new array of object

array.forEach(function(obj){ delete obj.key });

Conclusion

Hoping, this article teaches multiple ways of removing a key from an object or array of objects in javascript.

THE BEST NEWSLETTER ANYWHERE
Join 6,000 subscribers and get a daily digest of full stack tutorials delivered to your inbox directly.No spam ever. Unsubscribe any time.

Similar Posts
Subscribe
You'll get a notification every time a post gets published here.