JavaScript Error Handling

JavaScript Error Handling – Property X Cannot Be Deleted TypeError

Next up in our JavaScript Error Handling series we’re looking at the Property X Cannot Be Deleted TypeError in greater detail. The Property X Cannot Be Deleted TypeError is typically thrown when trying to delete an object property that is non-configurable.

In this article we’ll explore the Property X Cannot Be Deleted TypeError to see where it sits within the JavaScript Exception hierarchy along with a few sample code snippets to illustrate how Property X Cannot Be Deleted TypeErrors are thrown. We’ll also briefly take a gander at JavaScript’s built-in data properties (like configurable), so let’s get started!

The Technical Rundown

  • All JavaScript error objects are descendants of the Error object, or an inherited object therein.
  • The TypeError object is inherited from the Error object.
  • The Property X Cannot Be Deleted TypeError is a descendant of TypeError object.

When Should You Use It?

As we’ve seen many times before the Property X Cannot Be Deleted TypeError is a strict mode only exception. Strict mode is an optional variant of JavaScript that uses slightly different (and typically more restrictive) semantics when compared to normal JavaScript. One specific change is that strict mode contains a set of error types that are not thrown when strict mode is disabled and Property X Cannot Be Deleted TypeError is one such example.

Strict mode can be enabled by placing the 'use strict'; statement at the top of our script. We won’t go into any more details of strict mode’s particular behaviors here, but feel free to check out the MDN documentation for more info.

As previously mentioned the Property X Cannot Be Deleted TypeError occurs when trying to delete a property value that is marked as non-configurable. The configurable state of a property is actually an attribute in JavaScript. Such an attribute is essentially a built-in configuration setting that can be altered throughout code and will effect how that property behaves. Some methods allow for direct modification of property attributes, while other methods modify certain attributes behind the scenes.

We can use the Object.defineProperties() method to directly add or modify object properties, including the name, value, and attributes. Here we have a simple example where we’ve defined a book object and then called Object.defineProperties() which expects the first argument to be the object we’re modifying, while the second argument is an object defining the list of properties to add/modify and their respective values:

In the above case we specified the name of our properties, the value, and also set the configurable attribute to true for the author property only. The configurable attribute defaults to false, which specifies that the proeprty cannot be deleted or have most other attributes changed.

We can see from the commented output next to the console.log() calls above that our first output shows both properties (title and author). We then delete the book.author property and then output again, while shows the modified object only contains title.

Since configurable defaults to false our title property is currently considered non-configurable. Therefore, let’s try deleting the title property this time instead of author and see what happens:

Unsurprisingly, the attempt to delete the non-configurable title property results in a Property X Cannot Be Deleted TypeError, which appears as slightly different messages depending on the browser in use:

We’re seeing another Property X Cannot Be Deleted TypeError because, just as before when we explicitly set our configurable property to false, calling Object.freeze() on our object also sets configurable to false behind the scenes. This can be verified by calling the Object.getOwnPropertyDescriptor() method and passing the object and name of the property in question. In this case it doesn’t matter which property we check since the entire object is frozen, but here we are outputting the author property object which shows the direct property descriptor (as opposed to the indirect descriptor attached to the prototype chain of our object instance):

To dive even deeper into understanding how your applications deal with JavaScript Errors, check out the revolutionary Airbrake JavaScript error tracking tool for real-time alerts and instantaneous insight into what went wrong with your JavaScript code.