We can use both methods to delete an element from a javascript array. The answer is solely dependent on the application and on the programmer.
What slice() method does?
The slice method, as the name suggests, slices an array and returns a copy of the new array. This method does not affect the main array, it just returns the copy of the array. We can give this copy of the array to the main array or to any other array to get the sliced array.
Syntax:
array.slice(arg1, arg2);
Parameter: It accepts the following two parameters:
- arg1: It refers to the start index from which the method will begin slicing, the start index is inclusive which means if we give 0, it will begin with the 0th index.
- arg2: It refers to the end index. This end index is exclusive which means it will not include the given index in slicing
It is not necessary to give both arguments, if we do not provide the start index, it will start with the 0th index and if we do not provide the end index it will take to the last index.
Return Value: It returns a copy of the new array
Example 1: Here, we are giving the start index as 2 and end index as 4, so it will slice the elements 2, 3. As you can see it returns the copy of the new array, which we are storing in the same array. This method also shortens the array length. Previously array had a length of 4, after slicing the array, it became 2.
<script> // Sample array
var arr = ["super", "duper", "upar", "chopper"];
// Printing array length before function call
console.log(arr.length);
// Function call
arr = arr.slice(2, 4);
// Printing array and its length
// after function call
console.log(arr, arr.length);
</script> |
Output:
4 [ 'upar', 'chopper' ] 2
Example 2: Here we are not giving the end index so it will begin with the 1st index and slice till last.
<script> // Sample array
var arr = ["super", "duper", "upar", "chopper"];
// Printing length before function call
console.log(arr.length);
// Function call
arr = arr.slice(1);
// Printing array and its length
// after function call
console.log(arr, arr.length);
</script> |
Output:
4 [ 'duper', 'upar', 'chopper' ] 3
What delete() method does?
The delete is more like an operator than the method. It is used to remove the property from the object, it can also remove the data from the array. But it does not remove the references completely which means it does not shorten the array. The delete operator requires the reference to remove the property from that reference.
Example 1: As we can see, we have given the delete operator a reference arr[1] to be removed. But it only removes the property which it was holding. The reference is still there and the length is still 4, it did not shorten our array.
<script> // Sample array
var arr = ["super", "duper", "upar", "chopper"];
// Printing array length before delete call
console.log(arr.length);
// Deleting
delete arr[1];
// Printing array and its length
// after delete call
console.log(arr, arr.length);
</script> |
Output:
4 [ 'super', <1 empty item>, 'upar', 'chopper' ] 4
Example 2: In this second example. arr[2] reference is still there, only its value is removed, hence the undefined is shown, these deleted memory will be released automatically when there is no reference to the arr is left.
<script> // Sample array
var arr = ["super", "duper", "upar", "chopper"];
// Printing array length before delete call
console.log(arr.length);
// Deleting
delete arr[2];
// Printing array reference
console.log("The reference arr[2] is still there :", arr[2]);
// Printing array length after delete call
console.log(arr, arr.length);
</script> |
Output:
4 The reference arr[2] is still there : undefined [ 'super', 'duper', <1 empty item>, 'chopper' ] 4
Conclusion: If we want to shorten the length of the array, we will use the slice method and if we want to keep the array length the same for some reason, we will use the delete operator.
References:
- https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/delete
- https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/slice