JavaScript

How to remove a property from a JavaScript object

Advertisements

There are two ways to remove a property from a JavaScript object: one is the mutable way of doing it by using the delete operator. And the second one is the immutable way of doing it by using object restructuring. Let us go through each of these:

1. The delete operator

delete is a JavaScript instruction that allows us to remove a property from a JavaScript object. There are a couple of ways to use it:

delete object.property;
JavaScript

or

delete object['property'];
JavaScript

The operator deletes the corresponding property from the object.

let blog = {name: 'Wisdom Geek', author: 'Saransh Kataria'};
const propToBeDeleted = 'author';
delete blog[propToBeDeleted];
console.log(blog); // {name: 'Wisdom Geek'}
JavaScript

The delete operation modifies the original object. Therefore it is a mutable operation.

2. Object destructuring

Using the object restructuring and rest syntax, we can destructure the object with the property to be removed and create a new copy of it. After the destructuring, a new copy of the object would be created and assigned to a new variable without the property that we chose to remove.

const { property, ...remainingObject } = object;
JavaScript

For example:

let blog = {name: 'Wisdom Geek', author: 'Saransh Kataria'};
const { author, ...blogRest } = blog;
console.log(blogRest) // {name: 'Wisdom Geek'};
console.log(blog); // {name: 'Wisdom Geek', author: 'Saransh Kataria'}
JavaScript

If we want to do this dynamically, we can do:

const name = 'propertyToBeRemoved';
const { [name]: removedProperty, ...remainingObject } = object;
JavaScript

For example:

let blog = {name: 'Wisdom Geek', author: 'Saransh Kataria'};
const name = 'author';
const { [name]: removedProperty, ...remainingObject } = blog;
console.log(removedProperty); // Saransh Kataria
console.log(remainingObject); // {name: 'Wisdom Geek'}
JavaScript

It is also possible to remove multiple properties using the same syntax.

And those are the 2 ways to remove a property from a JavaScript object. If you have any questions, feel free to drop a comment below!

Saransh Kataria

Born in Delhi, India, Saransh Kataria is the brain behind Wisdom Geek. Currently, Saransh is a software developer at a reputed firm in Austin, and he likes playing with new technologies to explore different possibilities. He holds an engineering degree in Computer Science. He also shares his passion for sharing knowledge as the community lead at Facebook Developer Circle Delhi, NCR which is a developer community in Delhi, India.

Share
Published by
Saransh Kataria

Recent Posts

How To Get The Hash of A File In Node.js

While working on a project, I wanted to do an integrity check of a file…

2 days ago

Native popover API in HTML

Popovers have been a problem that was typically solved by using a third-party solution. But…

1 week ago

Node.js 20.6 adds built-in support for .env files

Node.js 20.6 added built-in support for the .env file. This is an excellent addition to the platform…

2 weeks ago

Object destructuring in TypeScript

Object destructuring is a powerful ES 6 feature that can help developers write cleaner code.…

4 weeks ago

Improve git clone performance in a CI pipeline

Have you felt particularly annoyed by the time it takes to clone a large repository,…

1 month ago

Fix: Hydration failed because the initial UI does not match what was rendered on the server

Within a React or Next.js app, if you encounter the error "Hydration failed because the…

2 months ago
Advertisements