JavaScript Guide to Adding & Deleting Object Properties

Working with objects is a fundamental aspect of mastering JavaScript. That's why understanding the techniques to modify object properties is so important. There are many ways to do this, and we'll go over a few in this article.

How to Add a Property to an Object?

#1: Using `.` Notation

First off, the easiest way to add a new property to an object is by using dot notation. It works like this:

const book = {};
book.title = 'Dracula';

You usually use dot notation to change a property’s value, but you can also add properties with it. It’s simple yet effective.

💡

Just remember, it only works with simple property names without special characters.

#2: Using `[]` Notation

Using square brackets is another easy way to create a new object property. It may be more useful because it works even when there are special characters in the property name.

const book = {};
book['BOOK_TITLE'] = 'Dracula';

It’s another simple and effective way to get things done.

#3: Using Spread Operator

The spread operator was introduced in JavaScript ES6, and it is a very helpful feature that can clone all or parts of an existing array or object into another.

let book = { title: 'Dracula' };
book = { ...book, genre: 'Novel' };

In the example above, we simply spread over the book object and added a new genre property. We can also combine multiple objects into one using spread operators, allowing the addition of various parameters.

#4: Using Object.assign() Method

Object.assign() is another way to add a new property to an object. It might not be as popular as the others, but it's still worth knowing. It copies all its properties from one or more source objects to a target object.

const book = {title: 'Dracula'};

Object.assign(book, {
  author: 'Bram Stoker', 
  genre: 'Novel'
});

In this case, the book is the target object, and it will have the author and genre properties added to it from the source object.

🔎

Also: Take a look at my article on the every() and some() array methods.

#5: Using Object.defineProperty() Method

The Object.defineProperty() method is the last one we'll discuss for adding properties. It's a more detailed and complex method but offers a higher level of control over the properties being defined or modified on an object.

const book = {};

Object.defineProperty(book, "title", {
  enumerable: false,
  configurable: false,
  writable: false,
  value: "Dracula", // the value associated with the property
});

This method has a more involved syntax, with three parameters to work with:

Object.defineProperty(obj, prop, descriptor)

obj: The object on which to define the property.
prop: The name of the property.
descriptor: An object containing properties to configure beyond just setting a value.

For example, with writable set to false, any attempts to change the value of the title property will not work, ensuring the property remains as initially set.

const book = {};

Object.defineProperty(book, "title", {
  writable: false,
  value: "Dracula"
});

book.title = "Something else";

console.log(book.title); // Output: 'Dracula'

💡

There's also the Object.defineProperties() method, which works similarly but allows for the definition or modification of multiple properties at once.

How to Remove a Property From an Object?

#1: Using delete Property

The delete operator is a simple yet effective method to remove a property from an object. It offers a direct way to alter the object by erasing the specified property.

The property can be referenced in two ways: dot and square bracket notation.

delete object.property
delete object[property]

When a property is deleted using this method, attempting to access it will yield undefined since the property no longer exists on the object.

const book = { 
  title: 'Dracula',
  genre: 'Fantasy'
};

delete book.genre; // or delete book['genre'];

console.log(book.genre) // Output: undefined

#2: Using Rest Operator

The delete operator is the most common method for removing properties, but JavaScript offers an alternative - the rest syntax, allowing removal through object destructuring.

Let's take a look at the example below:

let book = {
  author: 'Bram Stoker', 
  title: 'Dracula', 
  genre: 'Novel'
};

const { genre, ...remaining } = book;
book = remaining; 

console.log(book) // Output: { author: 'Bram Stoker', title: 'Dracula' }

In this example, the original object is deconstructed, and every property, except genre, is placed into a new object named remaining.

This method does not modify the original object automatically. So, to reflect the changes, we have to assign the remaining object back to the book variable.

💡

This method is more versatile and allows the removal of multiple properties in a single line.