Tuesday, February 25, 2020

Different ways of remove property in object of Javascript|ES6

Remove property or key from an object

In this blog post, We are going to learn following ways to remove the key from an object.
  1. using delete operator syntax
  2. Assign undefined to key
  3. Using Lodash omit method
  4. Using ramdaJS dissoc function
  5. ES6 Spread and destruction assignment syntax approach 
JavaScript object is a collection of key and values of a properties enclosed in parenthesis{}.
Considered here is an object inline declaration initialized with its key and values.
let obj = {
    "model": "alto",
    "company": "Maruthi",
    "type": "car"
}

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 or 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 iteration with for loop. 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' }

Related article


EmoticonEmoticon