alt text
Benjamin Thomson
Web & UX Designer

Drink A Coffee With Me Today

Loading...
Success!
Error!

Follow On Instagram

Mayank Gupta (+91-9711083089)
Menu
Close

Delete Keyword in JavaScript


This article shall help you understand the following:

1. Using Delete Keyword in JavaScript

2. Deleting Object Properties

3. Cases where the Properties of JavaScript cannot be Deleted

4. Correctly Using Delete Keyword


Using Delete Keyword:

Delete Keyword is basically used to delete properties in JavaScript Object.

One of the misconception is that "delete keyword" is used to free my memory.


How delete keyword works:

1. It de-references the property from the Object

2. The de-referenced property is then available to Garbage Collector.

** Delete Keyword has nothing to do with directly freeing the momory for Garbage Collection


delete keyword returns:

1. "true" in case the property is deleted and also when property is not found

2. "false" in case properties cannot be deleted


Syntax for Deleting Keyword


var Sales = {

  products: 'Paste',

  Quantity: 10

}

console.log(delete Sales.Quantity);    // returns "true"

console.log(Sales.Quantity)            // returns "undefined"

This is a simple scenerio where:

1. Properties "product" and "Quantity" are added to "Sales" Object.

2. "Quantity" property is deleted from Sales Object and "true" is returned.

3. When user try to access "Quantity", it is "undefined".


Non-configurable properties

We can mark the property of an object as "Non Configurable".

Non-Configurable properties cannot be deleted.


Each property defined for an Object contains 4 properties:

1. value: contains value of the property

2. writable: indicates whether the property can be edited/changed

3. enumerable: states whether the property can be enumerated or not

4. configurable: indicates whether we can change the configuration of the property



// An empty Object Employee is Defined

var Employee = { };

// Add a property "name" to "Employee" and mark it "non-configurable"

Object.defineProperty(Employee, "name", { configurable: false });

In the above example, a new property "name" is added to "Employee" Object.

This property is marked as "Non Configurable".


Here is the code to check the Properties of a variable:


// Check if property is Configurable or not

var name = "Mayank";

var propDescriptor = Object.getOwnPropertyDescriptor(window, 'name')

console.log(propDescriptor);

output: {
  value: "Mayank",
  writable: true,
  enumerable: true,
  configurable: false
}

In the above code, we can see that the variable "name" is marked as "non-configurable" property.

Since it is defined with "var" keyword.



// Check if property is Configurable or not

name = "Mayank";

var propDescriptor = Object.getOwnPropertyDescriptor(window, 'name')

console.log(propDescriptor);

output: {
  value: "Mayank",
  writable: true,
  enumerable: true,
  configurable: true
}

Here the property is marked as "non-configurable", since it is declared without "var" keyword.


Special Cases for "Delete Keyword"

Object Properties that does not Exists returns "true"

When the property which user is trying to delete does not exists, it return "true".

This is important to consider since it can create confusion


var Sales = {

  products: 'Paste',

  Quantity: 10

}

console.log(delete Sales.Cost);        // returns "true"


Variables declared with "var" keyword cannot be deleted

Any variable declared inside function or global scope with keyword "var", cannot be deleted.

Since we cannot delete any non-configurable properties.


var Name = "Ankit";

var Designation = "Developer"

console.log(delete Designation); // returns "false"

console.log(delete Name); // returns "false"


Whereas, if a property is added without to global scope without "var" keyword, it can be deleted.

Property added without "var" keyword are marked as configurable


// variable Name and Designation is added without "var" keyword

// These variables are added to the Global Scope

Name = "Ankit";

Designation = "Developer"

//variable that are not declared using "var" keyword, can be deleted

console.log(delete Designation); // returns "true"

console.log(delete Name); // returns "true


Whenever a variable is declared with "var" keyword, it is marked as "non-configurable".

We shall be discussing about "non-configurable" properties below.


Lets try delete Objects instead of Variables:


We can even delete Objects from "Global Object" if not declared with "var" keyword

Again, the same logic goes here, Global Objects without "var" are declared "non-configurable"


// Lets an an Object to Global Scope.

// It is added to global scope with "var"

// Therefore it cannot be deleted from "window" object

var EmployeeDetails = {

  empName: 'Abc',

  empAge: 20;

};

console.log(delete window.EmployeeDetails;)     // returns false

In the above code, we saw that Object "EmployeeDetails" cannot be deteted.


Lets take another Example where we add an Object without "var" keyword:


// Lets an an Object to Global Scope without using "var"

EmployeeDetails = {

empName: 'Abc',

  empAge: 20;

};

console.log(delete window.EmployeeDetails;) // returns true

In the above case, we are able to delete object from Global Object since iit is configurable property.

Here the Object is marked as "Configurable".


Cannot delete Build-In Objects

We cannot delete any "built-in" Object and related property.

It includes Objects Like "Array", "Math" and "Object".


// Lets try to delete Built-In Object and its Properties

delete window.Array     // return false

delete Math.round       // return false

delete window.Object    // return false


Deleting Array Elements

When an array element is deleted, its length does not change

Deleting the element from Array shall assign "undefined" to element value


Lets evaluate with an Example


delete window.Array // return false

var elementArray = ["1", "2", "3"]

delete elementArray[1];

console.log(elementArray)

output: ["1", undefined, "2"]

In the above example, we can see that the element value is replaced by "undefined"

The length of Array is still the same.


Using "use strict"

This is the special case which needs extra attension.


Strict Mode shall give "Syntax Error" in case it references to:

1. Variable

2. Function Argument

3. Function Name


So, in case of "Strict Mode", we cannot apply "delete keyword" on any of these situation.



function Employee() { }

delete Employee                        // Syntax Error

var myData = "";

delete myData;                         // Syntax error

function getSalary(int salary) {

delete salary;                         // Syntax error

}


Other References:

You can refer following Documents for more Information:

1. https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/delete



{{Count}} Comments

{{comment.user}}

{{comment.message}}

{{comment.date.substring(0, 10)}}

Leave A Comment

;