delete an element from an array using delete or splice in JavaScript

As a JavaScript developer, many times in interviews or when building projects we would need to remove some items from an array. And in order to do this, the two things which come to our mind are using delete or splice on the array.

But do you really know what is the difference between the both?. Well, you have come to the right place. Keep reading!!!

As part of this blog, we are going to see

What is delete operator?
What is splice?
What is the difference between splice and delete?
What is the best way to delete an element?.

Define delete operator

According to MDN docs,

The JavaScript delete operator removes a property from an object.

Syntax : delete expression

where expression should evaluate to

delete object.property
delete object['property']

Lets see an example

let items_delete = [1,2,3,4,5];
items_delete.length; //Returns 5
delete items_delete[3];
items_delete.length; //Returns 5
console.log(items_delete); // Returns [1,2,empty,4,5]

In the above example,

lets declare and initialize an array with 5 items, whose length is returned as 5.
In the next step using delete operator delete the third item in the array.
When you check the length of the array after deletion it will still return as 5.
As a final step when you try to print the array again you will see that in the position of third key, the value will be seen as empty.

Define splice operator

According to MDN docs

The splice() method changes the contents of an array by removing or replacing existing elements and/or adding new elements in place.

let items_splice = [1,2,3,4,5];
items_splice.length; //Returns 5
items_splice.splice(3,1);
items_splice.length; //Returns 4
console.log(items_delete); // Returns [1,2,4,5]

In the above example,

let's declare and initialize an array with 5 items, whose length is returned as 5.
In the next step using splice method delete the third item in the array.
When you check the length of the array after deletion it will still return as 4.
As a final step when you try to print the array again you will see that only 4 items are present in the array.

Difference between delete and splice

So by the example what we see is

Delete - will delete the element and replace it with empty/defined, which means the length of the array always remains the same.
Whereas when you use splice to delete an element, it removes the value or the index associated with it, which means the length of the array also changes.

What is the preferred method?.

Based on the example we have seen above, when you want to delete an element in the array it is best to use splice, since delete will result in an empty placeholder.

Conclusion

Now you should know the difference between splice and delete and which one to use during development.

References

Are you more of a Twitter person?. Then you can read the same thing in the below thread

https://twitter.com/KritikaPattalam/status/1412794415219892225

Follow me on Twitter | LinkedIn for more web development related tips and posts. Feedbacks and suggestions are welcome.

Checkout my other blog post series

Difference between delete and splice an element in an array using JavaScript

Comments (3)

JavaScript

Difference between var and let in JavaScript

More from this blog

HTML Roadmap

Do you use git? Then this is for you...

Create a DOWNLOAD link in a single line of HTML

First Step to Learning Vue JS - 3

Display random quotes from Chuck Norris API

Define delete operator

Define splice operator

Difference between delete and splice

What is the preferred method?.

Conclusion

References

Are you more of a Twitter person?. Then you can read the same thing in the below thread

Command Palette

Comments (3)

JavaScript

Difference between var and let in JavaScript

More from this blog

Define delete operator

Define splice operator

Difference between delete and splice

What is the preferred method?.

Conclusion

References

Are you more of a Twitter person?. Then you can read the same thing in the below thread