JAVASCRIPT

JAVA SCRIPT- How to remove a property from a JavaScript object

Javascript Articles, Errors and Fixes
Javascript Articles, Errors and Fixes

delete operator

The delete operator removes a property from an object.

Syntax

jQuery Code
delete expression 

where expressions are.

jQuery Code
delete object.property
delete object['property']

Parameters

  • Object – The name of an object, or an expression evaluating to an object.
  • Property – The property to delete.

Return value

  • The property is an own non-configurable which case is true.
  • In case false is returned in non-strict mode.

Exceptions

Throws Global_objects/SyntaxError in strict mode if the property is an own non-configurable property.

The delete operator removes a given property from an object. On successful deletion, it will return true, else false will be returned.
However, it is important to consider the following scenarios:

  • If the property which you are trying to delete does not exist, delete will not have any effect and will return true.
  • If a property with the same name exists on the object’s prototype chain, then, after deletion, the object will
  • use the property from the prototype chain (in other words, delete only has an effect on own properties).
  • Any property declared with var cannot be deleted from the global scope or from a function’s scope.
    As such, delete cannot delete any functions in the global scope (whether this is part from a function definition or a function expression).
  • Functions which are part of an object (apart from the global scope) can be deleted with delete.
  • Any property declared with let or const cannot be deleted from the scope within which they were defined.
  • Non-configurable properties cannot be removed. This includes properties of built-in objects like Math, Array,
  • Object and properties that are created as non-configurable with methods like Object.defineProperty().
READ  [Solved - 10 Answers] JQUERY- Using jQuery to center a DIV on the screen

delete object properties:

For example:

jQuery Code
var wikitechy = {
    object1: “error and fix",
    object2: “Article"
};

delete wikitechy.object2;

// Outputs: {object1: “error and fix"}
console.log(wikitechy);

The delete operator will not delete ordinary variables.

jQuery Code
var wiki = “wikitechy";

delete wiki;

// Outputs: " wikitechy "
console.log(wiki);

To delete “global variables,” since they are actually properties of the global object (window in the browser).

Example 1:

jQuery Code
// Because var isn't used, this is a property of window
classicFlash = “wikitechy";

delete window.classicFlash;

// ReferenceError: classicFlash is not defined
console.log(classicFlash);

The delete operator also has a return value.
If it succeeds in deleting a property, it will return true.
If it fails to delete a property because the property is unwritable it will return false, or if in strict mode it will throw an error.

Example 2:

jQuery Code
var wikitechy = {
    object1: “error and fix",
    object2: “Article"
};

var object2Deleted = delete wikitechy.object2;

// Outputs: true
console.log(object2Deleted);

Non-configurable properties

This property is marked as non-configurable, delete won’t have any effect, and will return false. In strict mode this will raise a SyntaxError.

jQuery Code
var Employee = {};
Object.defineProperty(Employee, 'name', {configurable: false});

console.log(delete Employee.name);  // returns false

var, let and const create non-configurable properties that cannot be deleted with the delete operator:

jQuery Code
var nameOther = ‘wikitechy';

// We can access this global property using:

Object.getOwnPropertyDescriptor(window, 'nameOther');  

// output: Object {value: “wikitechy", 
//                  writable: true, 
//                  enumerable: true,
//                  configurable: false}

// Since "nameOther" is added using with the
// var keyword, it is marked as "non-configurable"

delete nameOther;   // return false

Strict vs.non-strict mode

  • In strict mode, if delete is used on a direct reference to a variable, a function argument or a function name, it will throw a SyntaxError.
  • If any variable defined with var is marked as non-configurable.
  • Here example, salary is non-configurable and cannot be deleted.
  • In non-strict mode, the delete operation will return false.
jQuery Code
function Employee() { 
  delete salary;
  var salary;
}

Employee();

The same code behaves in strict mode. Instead of returning false, the statement raises a SyntaxError.

jQuery Code
"use strict";

function Employee() {
  delete salary;  // SyntaxError
  var salary;        
}

// Similarly, any direct access to a function
// with delete will raise a SyntaxError

function DemoFunction() {
  //some code
}

delete DemoFunction; // SyntaxError

delete and the prototype chain

READ  [Solved -14 Answers] JAVASCRIPT - How to convert a string to boolean in JavaScript

we are delete an own property of an object while a property with the same name is available on the prototype chain.

jQuery Code
function wiki() {
  this.bar = 10;
}

wiki.prototype.bar = 42;

var techy = new wiki();

// Returns true, since the own property
// has been deleted on the techy object
delete techy.bar;           

// techy.bar is still available, since it 
// is available in the prototype chain.
console.log(techy.bar);

// We delete the property on the prototype
delete wiki.prototype.bar; 

// logs "undefined" since the property
// is no longer inherited
console.log(techy.bar);

About the author

Venkatesan Prabu

Venkatesan Prabu

Wikitechy Founder, Author, International Speaker, and Job Consultant. My role as the CEO of Wikitechy, I help businesses build their next generation digital platforms and help with their product innovation and growth strategy. I'm a frequent speaker at tech conferences and events.

Add Comment

Click here to post a comment