Remove elements from a JavaScript Array

An Array is special variable which can hold more that one value under a single name. we can add or remove elements from array in any position in this article we are going to discuss the different ways to remove an element from JavaScript array.

There are different methods you can use to remove elements from JavaScript arrays:

1. pop - Removes element from the End of an Array

2. shift - Removes element from the beginning of an Array

3. splice - removes element from a specific Array index

4. filter - allows you to remove element programmatically from an Array and returns a new array

JavaScript array pop()

The pop() method is used to remove the last element from the array and returns the removed element.

var arr = ['shift', 'splice', 'filter', 'pop']
// JavaScript code to illustrate shift() method
// to remove elements from array
// Popping the last element from the array
const poppedArray = arr.pop()
console.log('The removed element: ' + poppedElement)
console.log('elements after removing: ' + arr)

JavaScript array shift()

The shift method has similar behavior to pop() method but instead of removing from the last it removes the first element from the array When the first element is removed remaining elements are shifted down.

// JavaScript code to illustrate shift() method
// to remove elements from array
//Removing the first element from array
var arr = ['shift', 'splice', 'filter', 'pop']

var shifted = arr.shift()
console.log('Removed element: ' + shifted + '<br>')
console.log('Remaining elements: ' + arr)

JavaScript array splice()

This another built-in method in JavaScript lets you change the content of your array by removing or replacing existing elements with new ones.

Unlike the pop method and the shift method splice method takes argument the first argument is start index it is a zero-based index at which to start changing the array then delete Count it indicates how much elements to to remove from the array and optimal parameters to add to the array, beginning from start

// JavaScript code to illustrate splice() method
// to remove elements from array
const myFish = ['angel', 'clown', 'mandarin', 'sturgeon']
const removed = myFish.splice(2, 0, 'drum')

// myFish is ["angel", "clown", "drum", "mandarin", "sturgeon"]
// removed is [], no elements removed

Note: The splice method modifies the original array and returns the removed elements as a new array.

JavaScript array filter()

This method returns a new array by filtering down to just the elements from the given array that pass the test implemented by the provided function

First, let’s understand the syntax of the filter() method.

Syntax of filter function

arr.filter(callbackFn)
arr.filter(callbackFn, thisArg)

1. callbackFn - The test function to execute on each array element; returns true if element passes the test, else false. The callbackFn accepts up to three parameters: element, index, array.

2. thisArg - (optional) - The value to use as this when executing callback. By default, it is undefined.

// JavaScript code to illustrate filter() method
// to remove elements from array

const numbers = [10, 11, 12, 23, 27, 44, 16]

function checkEven(number) {
  return number % 2 == 0
}

let filteredEvenNumbers = numbers.filter(checkEven)
console.log(filteredEvenNumbers) // [ 10, 12, 44, 16 ]

let newNumbers = numbers.filter((number) => number % 2 == 0)
console.log(newNumbers) // [ 10, 12, 44, 16 ]