# The "delete" in JavaScript

## Introduction

In this article, we are going to discuss the `delete` operator in JavaScript. `Delete` is comparatively a lesser-known operator in JavaScript. We use this operator mainly to delete JavaScript object properties. 

JavaScript has `pop()`, `shift()` or `splice()` methods to delete an element from an array. But because of the key-value pair in an object, the deleting is more complicated in case of objects. It is important to note that, the `delete` operator only works on objects and not on variables or functions.

### Syntax

```javascript
delete object
// Or
delete object.property
// Or
delete object['property']
```

The operator returns `true` if it removes a property. While deleting an object property that doesn't exist will return a `true` but it will not affect the object in any way. Though while trying to delete a variable or a function will return a `false`.

## Example

Let's assume we have an object called `person` which has three key-value pairs (i.e., `firstName`, `lastName` and `phone`). Now, we'll use the `delete` operator to delete the `phone` property from the object.

### Code

```javascript
let person = {
  firstName: "John",
  lastName: "Doe",
  phone: 12345
}

console.log(delete person.phone); //true
console.log(person); //{ firstName: 'John', lastName: 'Doe'}
```

### Output

![](https://i.ibb.co/WcyP2fB/Annotation-2020-07-18-180727.png)

As the above output shows, `delete person.phone` returns `true` and if we log the `person` object we can clearly see that the `phone` property doesn't exist anymore. 

Let's try applying the `delete` operator for deleting a `variable` and a `function`.

### Code

```javascript
let num = 5;
let sum = (a, b) => {
  return a + b;
}

console.log(delete num); //false
console.log(delete sum); //false
```

### Output

![](https://i.ibb.co/WpnhK0c/Annotation-2020-07-18-181630.png)

Because the `delete` operator doesn't work for variables or function, it returns `false` and the actual variables remain untouched. 

Another thing to keep in mind is that this operator doesn't delete the value of the property rather it deletes the property itself.

## Example

### Code

```javascript
let person = {
  firstName: "John",
  lastName: "Doe",
  phone: 12345
}

let phone = person.phone;

console.log(delete person.phone); //true
console.log(phone); //12345
```

Because objects are reference types, so both the `person.phone` and `phone` variable will refer to the same memory address.

### Output

![](https://i.ibb.co/wQtfjvX/Annotation-2020-07-18-190117.png)

It is clearly visible that the `delete` operator has deleted the property but the value is still in the memory which shows that, `delete` doesn't delete the value.

## Exception

Global variables can be removed using the `delete` operator. Because the global variables are properties of the `window` __object__. And as `delete` works on objects, it'll delete the variable. 

### Code

```javascript
toDelete = 5;

console.log(delete toDelete); //true

console.log(toDelete); //toDelete is not defined
```

Without using the `var`, `let` or `const` keyword sets the variable as a global variable. And it'll work as an object property.

### Output

![](https://i.ibb.co/drpMMxT/Annotation-2020-07-18-184625.png)

The `delete toDelete` returns `true` and if we try to access the variable after deleting it we'll get a reference error as the variable is not defined. 

## Deleting Array Values Using `delete`

As we know JavaScript arrays are after-all objects. So, the `delete` operator can be used to delete an array item. But it'll cause a problem because after deleting the element from the array, this operator will show the position as `empty` and it'll not update the array length also.

## Example

### Code

```javascript
let arr = [1, 2, 3]

console.log(delete arr[0]); //true
console.log(arr); //[empty, 2, 3]
```

### Output

![](https://i.ibb.co/f8r9VCR/Annotation-2020-07-18-183114.png)

So, using `pop()`, `shift()` or `splice()` methods are clearly a better approach to delete array elements.

## Conclusion

Developers uses many workarounds to delete an object property, such as setting the value of an object property to `null` or `undefined`. But the property will still exist on the object and some operators like `for in` loop will still show the presence of the `null` property which can cause problems in many cases. 

Using the `delete` property in loops also slows down a program significantly. So, this method should only be used when it is absolutely necessary to delete an object property without leaving any traces.