Six ways of remove property or key in object of Javascript


JavaScript object is a collection of key and values of a properties enclosed in parenthesis{}. Considered following is an object inline declaration and initialized with its key and values.

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

In this blog post, We are going to learn different ways to deletethe 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

Using delete operator 

delete operator is used to remove key from an object, and its key and value removed from an object. Important points

  • delete removes own properties of an object 
  • Return true if key is removed, if key not exists,else false.
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

here is an above program explanation

  • a object declared and initialed 
  • printed object to console using console.log 
  • removed company key and its values from an object using 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
  • Undefined is printed by retrieving object’s deleted key

and other 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 case of undefined way, It will not completely remove from object
  • As you see in example, company property is still visible with undefined value during for 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 object and key or 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 first parameter as key to be deleted, second parameter is an source object and returns new object after 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 very easy using es6 syntax

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

And output is

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

omit, pick method underscorejs

This is not removing the object keys, but copy 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 this methods are Objects is an original source object keys are list of keys which you want to remove from 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"};

Hoping, this articles teaches multiple ways of removing an key from an object 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.