4 Ways to remove elements from a JavaScript Array for Beginners

JavaScript arrays allow you to group values and iterate over them. You can add and remove array elements in different ways. Unfortunately there is not a simple Array.remove method.

So, how do you delete an element from a JavaScript array?
There 4 many methods that is used to remove elements from JavaScript array which are discussed below:

• pop() JavaScript – Remove last element from array javascript
• shift() JavaScript – Remove first element from array javascript
• splice() JavaScript – Remove specific element from array javascript
• filter() JavaScript – Allows you to programmatically remove elements from an Array

1. JavaScript | Array pop()

arr.pop() function is used to remove the last element of the array and also returns the removed element. This function decreases the length of the array by 1. The syntax of this function is as follows:

arr.pop()

Arguments
This function does not have any argument.

Return value
This function returns the removed element. If the array is empty, then this function returns undefined.

Example :

var arr = [34, 234, 567, 4];
var popped = arr.pop();
print(popped);
print(arr);

Output:

4
34,234,567

In this example the function pop() removes the last element from the array, which is 4 and returns it.

2. JavaScript | Array shift()

arr.shift() function removes the first element of the array thus reducing the size of the original array by 1.

Syntax:

arr.shift()

Arguments

This function does not take any argument.

Return value

• This function returns the removed first element of the array.
• If the array is empty then this function returns undefined.

Note: This function can also be used with other javascript objects that behave like the array.

Example :

var arr = [34, 234, 567, 4];
print(arr.shift());
print(arr);

Output:

34
234,567,4

In this example the function shift() removes the first element of the array, therefore it returns 34.

3. JavaScript | Array.splice() Method

The Array.splice() method is an inbuilt method in JavaScript which is used to modify the contents of an array by removing the existing elements and/or by adding new elements.

Syntax:

Array.splice( index, remove_count, item_list )

Parameter: This method accepts many parameters some of them are described below:

• index: It is a required parameter. This parameter is the index which start modifying the array (with origin at 0). This can be negative also, which begin after that many elements counting from the end.

• remove_count: The number of elements to be removed from the starting index.

• items_list: The list of new items separated by comma operator that is to be inserted from the starting index.

Return Value: While it mutates the original array in-place, still it returns the list of removed items. In case there is no removed array it returns an empty array.

Below example illustrates the Array.splice() method in JavaScript:

Example:

<script> 
var languages = ['C++', 'Java', 'Html', 'Python', 'C']; 
  
document.write(languages + "<br>"); 
  
// Add 'Julia' and 'Php' after removing 'Html'. 
var removed = languages.splice(2, 1, 'Julia', 'Php') 
  
document.write(languages + "<br>"); 
document.write(removed + "<br>"); 
  
// No Removing only Insertion from 2nd index from the ending 
languages.splice(-2, 0, 'Pascal') 
document.write(languages) 
</script>                           

Output:

C++,Java,Html,Python,C
C++,Java,Julia,Php,Python,C
Html
C++,Java,Julia,Php,Pascal,Python,C 

4. JavaScript | Array filter()

arr.filter() function 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. The syntax of the given function is as follows:

var newArray = arr.filter(arg_function[, this_arg])

Here arr is the original given array.

Argument
The argument to this function is another function that defines the condition to be checked for each element of the array. This arg_function itself takes three arguments:

• array
  This is the array on which the .filter() function was called.

• index
  This is the index of the current element being processed by the function.

• element
  This is the current element being processed by the function.

Another argument **this_arg **is used to tell the function to use this value when executing argument function.

Return value
This function returns a new array consisting of only those elements that satisfied the condition of the arg_function.

Example

function isPositive(value) {
  return value > 0;
}

var filtered = [112, 52, 0, -1, 944].filter(isPositive);
print(filtered);

Output:

[112,52,944]

In this example the function filter() creates a new array consisting of only those elements that satisfy the condition checked by isPositive() function.

Conclusion

Removing JavaScript Array items is important to managing your data. There is not a single ‘remove’ method available, but there are different methods and techniques you can use to purge unwanted array items.

Thanks for reading

#javascript