Deleting array elements in JavaScript - delete vs splice

When it comes to deleting elements from an array in JavaScript, many beginners get confused between the delete operator and the splice() method. While both can remove items, they behave very differently and can lead to different results in your code.

Here’s a clear breakdown:

Using delete:

• Removes the value at a specific index but does not affect the array’s length.
  
• The deleted element becomes undefined, leaving an empty slot (hole) in the array.
  
• This is usually not recommended when working with arrays, as it can cause unexpected behavior in iteration.
  

let arr = [1, 2, 3, 4];

delete arr[2];

console.log(arr); // [1, 2, empty, 4]

console.log(arr.length); // 4

Using splice():

• Actually removes elements from the array and adjusts the length accordingly.
  
• Shifts the remaining elements to fill the gap, ensuring no empty slots remain.
  
• Can also be used to add or replace elements.
  

let arr = [1, 2, 3, 4];

arr.splice(2, 1); 

console.log(arr); // [1, 2, 4]

console.log(arr.length); // 3

In summary:

• Use delete if you specifically want to remove the value but keep the index (rare in real-world cases).
  
• Use splice() when you want to cleanly remove elements without leaving holes and maintain array integrity.
  
•  The best practice in most cases is to use splice(), as it gives you a predictable and consistent result.