Coder Perfect

Delete vs. splice when deleting array members in JavaScript

Problem

What’s the difference between using the delete operator on an array element and the Array.splice method?

For example:

myArray = ['a', 'b', 'c', 'd'];

delete myArray[1];
//  or
myArray.splice (1, 1);

If I can delete array elements like I can with objects, why do I need the splice method?

Asked by lYriCAlsSH

Solution #1

The object attribute will be deleted, but the array will not be reindexed or its length updated. This gives the impression that it is undefined:

> myArray = ['a', 'b', 'c', 'd']
  ["a", "b", "c", "d"]
> delete myArray[0]
  true
> myArray[0]
  undefined

Note that it is not in fact set to the value undefined, rather the property is removed from the array, making it appear undefined. The Chrome dev tools make this distinction clear by printing empty when logging the array.

> myArray[0]
  undefined
> myArray
  

[empty, “b”, “c”, “d”]

myArray.splice(start, deleteCount) removes the element from the array, reindexes it, and modifies its length.

> myArray = ['a', 'b', 'c', 'd']
  ["a", "b", "c", "d"]
> myArray.splice(0, 2)
  ["a", "b"]
> myArray
  ["c", "d"]

Answered by Andy Hume

Solution #2

Array was designed by John Resig, the author of jQuery. I always use the remove approach in my projects.

// Array Remove - By John Resig (MIT Licensed)
Array.prototype.remove = function(from, to) {
  var rest = this.slice((to || from) + 1 || this.length);
  this.length = from < 0 ? this.length + from : from;
  return this.push.apply(this, rest);
};

Here are some examples of how it could be put to use:

// Remove the second item from the array
array.remove(1);
// Remove the second-to-last item from the array
array.remove(-2);
// Remove the second and third items from the array
array.remove(1,2);
// Remove the last and second-to-last items from the array
array.remove(-2,-1);

John’s website

Answered by Mohsen

Solution #3

The length of the array will not change because delete only removes the object from the element in the array. Splice shortens the array by removing the object.

“a”, “b”, “undefined”, and “d” will be displayed using the following code.

myArray = ['a', 'b', 'c', 'd']; delete myArray[2];

for (var count = 0; count < myArray.length; count++) {
    alert(myArray[count]);
}

This, on the other hand, will show “a,” “b,” and “d.”

myArray = ['a', 'b', 'c', 'd']; myArray.splice(2,1);

for (var count = 0; count < myArray.length; count++) {
    alert(myArray[count]);
}

Answered by andynormancx

Solution #4

When I was trying to figure out how to remove every instance of an element from an Array, I came across this query. For eliminating every ‘c’ from the items Array, here’s a comparison of splice and delete.

var items = ['a', 'b', 'c', 'd', 'a', 'b', 'c', 'd'];

while (items.indexOf('c') !== -1) {
  items.splice(items.indexOf('c'), 1);
}

console.log(items); // ["a", "b", "d", "a", "b", "d"]

items = ['a', 'b', 'c', 'd', 'a', 'b', 'c', 'd'];

while (items.indexOf('c') !== -1) {
  delete items[items.indexOf('c')];
}

console.log(items); // ["a", "b", undefined, "d", "a", "b", undefined, "d"]
​

Answered by Troy Harvey

Solution #5

Operators > Special Operators > delete Operator: from Core JavaScript 1.5 Reference > Operators > Special Operators > delete Operator:

Answered by f3lix

Post is based on https://stackoverflow.com/questions/500606/deleting-array-elements-in-javascript-delete-vs-splice