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

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

In this tutorial, We will have a look, Six ways to remove a property or key in the object of Javascript with code examples.

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

You can also check other posts on Javascript Add, Delete from Array

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.

How to remove property in the javascript object using the delete operator?

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:

{ 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

Similarly, an 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.

How to remove a key from an object by assigning an undefined value to the key in javascript

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

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

Important points.

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

Output:

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

Delete a property from an object 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);

output:

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

Delete a property from an object using the 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:

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

ES6 Spread and destruction assignment syntax approach

It is another way of using the latest Javascript version spread operator and destruction assignment are new features ES6 language. It is easy to use the es6 syntax.

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

And output:

{ 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:

{"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.