JavaScript Array Hacks: Deleting Elements Like a Pro
Tags: webdev, programming, beginners, javascript
Published: 2023-12-25 11:15:44

**JavaScript** array is a single variable that is used to store the elements or a group of values.

You can add or remove elements from the array in any position. 

Here, we will discuss different ways to remove elements from the array. 

**Methods to Remove Elements from JavaScript Array:**
There are many methods that are used to remove elements from JavaScript array which are discussed below

- Using the pop() method
- Using the shift() method
- Using the splice() method
- Using the filter() method
- Using Delete Operator
- Using a simple for() loop and a new array


## 1: using the **pop()** method:
This method is used to remove the last element of the array and returns the removed element. This function decreases the length of the array by 1.

```
const array = ["apple", "mango", "banana", "orange"];
  const popedArray = array.pop();
  console.log(popedArray);
  console.log(array);
  // output =  orange
  // output =  ['apple', 'mango', 'banana']
```
## 2: using the **shift()** method:
This method is used to remove the first element of the array and reduce the size of the original array by 1. 

```
 const array = ["apple", "mango", "banana", "orange"];
  const shiftedArray = array.shift();
  console.log(shiftedArray);
  console.log(array);
  // output =  apple
  // output =   ['mango', 'banana', 'orange']
```
## 3: using the **splice()** method:
This method is used to modify the contents of an array by removing the existing elements and/or adding new elements. To remove elements by the splice() method you can specify the elements in different ways.

```
  const array = ["apple", "mango", "banana", "orange"];
  const splicedArray = array.splice(2, 1);
  console.log(splicedArray);   // output =  ['banana']
  console.log(array); // output =   ['apple', 'mango', 'orange']
```
here in this example array.splice(2, 1) , 2 is index of deleting element and 1 is number of elements you want to delete .

## 4: using the **filter()** method:
This method is used to create a new array from a given array consisting of only those elements from the given array which satisfy a condition set by the argument function. 
```
 function isPositive(value) {
    return value > 0;
  }
  const array = [1, 3, 45, 124, -1, 0, 125];
  const filtereddArray = array.filter(isPositive);
  console.log(filtereddArray); // output =  [1, 3, 45, 124, 125]
```
## 5: using the **Delete Operator**:
Use the delete operator to remove elements from a JavaScript array. 

```
const array = [1, 3, 45, 20];
  const deleted = delete array[2];
  console.log(deleted); // output =  true
  console.log(array); // output =  [1, 3, empty, 20]
```
## 6: using the **for loop**:
Here a simple for() will be run over the array and the except for the removed element, the remaining elements will be pushed into the new array which will be declared inside the function or a method.

```
  let removeElement = (array, n) => {
    let newArray = [];

    for (let i = 0; i < array.length; i++) {
      if (array[i] !== n) {
        newArray.push(array[i]);
      }
    }
    return newArray;
  };

  let passed_in_array = [1, 2, 3, 4, 5];
  let element_to_be_removed = 2;
  let result = removeElement(passed_in_array, element_to_be_removed);
  console.log(result); // output  [1, 3, 4, 5]
```

While I find **filter()** and **splice()** convenient for deleting elements from a JavaScript array in certain scenarios due to their readability and simplicity, I also recognize the importance of understanding fundamental techniques the classic **for loop** remains a cornerstone in array manipulation.