An array serves as a variable designed to hold one or multiple elements that share the same data type. In essence, it accommodates numerous elements of identical types. There are occasions when it becomes necessary to eliminate these elements from an array. JavaScript provides a range of built-in array functions that facilitate the straightforward addition or removal of elements from an array. Employing these functions, you can extract an element from the beginning, the end, or even from a specified index within the array.
These JavaScript array methods are as follows:
| Method | Description |
|---|---|
| pop() | This method removes the elements from the end of the array. |
| shift() | Like the pop() method, it also removes the elements but from the start of the array. |
| filter() | The filter() method removes the elements from an array in a programmatically way. |
| splice() | This method removes the elements from a specific index. |
All the above methods are array functions offered by JavaScript. These methods are discussed below in detail with examples.
Remove elements from the end of the array - pop
JavaScript includes the pop function, which is utilized to eliminate elements from the conclusion of an array. This method takes away the final element of the array and returns that removed item. When an element is extracted from the array, the total count of elements in the array decreases by one. Review the following code and output for clarification:
Example 1
<html>
<body>
<script>
function removeLastElement() {
var shoeBrand = ["Nike", " Adidas", " Sparks", " RedTape"];
document.write("Elements in array before removing: <br>" + shoeBrand + "<br> <br>");
// Removing last element from the array
var poppedElement = shoeBrand.pop();
document.write("Removed element from array: " + poppedElement + "<br> <br>");
//display remaining elements present in array after removing
document.write("Elements present in array: <br>" + shoeBrand);
}
removeLastElement();
</script>
</body>
</html>
Output
At the beginning, the array contains four elements. By utilizing the pop function, one element from the end of the array will be deleted, leaving three elements remaining in that array.
Elements in array before removing:
Nike, Adidas, Sparks, RedTape
Removed element from array: RedTape
Elements present in array:
Nike, Adidas, Sparks
Example 2
By incorporating the aforementioned code into a loop construct (such as for, while, or do-while), we can systematically remove each element from the end of the array on a one-by-one basis. Observe how this process functions:
<html>
<body>
<script>
function removeElement() {
var shoeBrand = ["Nike", " Adidas", " Sparks", " RedTape"];
//initial length of the array
document.write("Elements in array before removing: <br>" + shoeBrand + "<br> <br>");
document.write("Array length before removing elements is:" + shoeBrand.length + "<br> <br>");
while (shoeBrand.length) {
//store removed element in a variable
var poppedElement = shoeBrand.pop();
//display removed element
document.write("Removed element from array: " + poppedElement + " <br>");
}
//Length of the array after removing all elements
document.write("<br> Array length after removing elements is:" + shoeBrand.length);
}
removeElement();
</script>
</body>
</html>
Output
Elements in array before removing:
Nike, Adidas, Sparks, RedTape
Array Length after removing elements is: 4
Removed element from array: RedTape
Removed element from array: Sparks
Removed element from array: Adidas
Removed element from array: Nike
Array Length after removing elements is: 0
Remove elements from the start of the array - shift
JavaScript includes the shift method, which is designed to eliminate the first element from an array. This method not only removes the initial element but also returns the element that has been removed. When an element is taken out from the array, the total count of elements in the array decreases by one. Below is an example of the code along with its output to demonstrate the functionality of this method:
Example 1
<html>
<body>
<script>
function removeFirstElement() {
var shoeBrand = ["Nike", " Adidas", " Sparks", " RedTape"];
document.write("Elements in array before removing: <br>" + shoeBrand + "<br> <br>");
// Removing first element from the array
var poppedElement = shoeBrand.shift();
document.write("Removed element from array: " + poppedElement + "<br> <br>");
//display remaining elements present in array after removing
document.write("Elements present in array: <br>" + shoeBrand);
}
removeFirstElement();
</script>
</body>
</html>
Output
At the beginning, the array contains four elements. By utilizing the shift function, one element will be removed from the beginning of the array, leaving three elements remaining in that array.
Elements in array before removing:
Nike, Adidas, Sparks, RedTape
Removed element from array: Nike
Elements present in array:
Adidas, Sparks, RedTape
Example 2
Similar to the pop function, we can remove all items sequentially from the beginning of the array by placing the aforementioned code within a loop (for, while, or do-while). In the following example, we will utilize a while loop to demonstrate this process. Observe how it operates:
<html>
<body>
<script>
function removeElement() {
var shoeBrand = ["Nike", " Adidas", " Sparks", " RedTape"];
//initial length of the array
document.write("Elements in array before removing: <br>" + shoeBrand + "<br> <br>");
document.write("Array length before removing elements is:" + shoeBrand.length + "<br> <br>");
while (shoeBrand.length) {
//store removed element in a variable
var poppedElement = shoeBrand.shift();
//display removed element
document.write("Removed element from array: " + poppedElement + " <br>");
}
//Length of the array after removing all elements
document.write("<br> Array length after removing elements is:" + shoeBrand.length);
}
removeElement();
</script>
</body>
</html>
Output
Elements in array before removing:
Nike, Adidas, Sparks, RedTape
Array Length after removing elements is: 4
Removed element from array: Nike
Removed element from array: Adidas
Removed element from array: Sparks
Removed element from array: RedTape
Array Length after removing elements is: 0
Remove elements from a specific index in an array - splice
To eliminate an element from a designated index position, the splice function is utilized. This method not only deletes the element from the specified index but also returns the element that has been removed. Furthermore, it provides the capability for users to discard one or several elements from the array.
The splice function primarily takes two parameters: the starting index and the quantity of elements to extract. It is important to note that array indexing begins at 0, meaning the first element is accessed via a[0]. When elements are eliminated from an array, the total length of the array decreases accordingly. Below is an example that demonstrates the operation of the splice method along with its resulting output:
Example 1
In this illustration, we will remove three elements, commencing from index 1, specifically a[1] through a[3].
<html>
<body>
<script>
function removeElement() {
var shoeBrand = ["Nike", " Adidas", " Sparks", " RedTape", " Bata"];
document.write("Elements in array before removing: <br>" + shoeBrand + "<br> <br>");
// Removing first element from the array
var poppedElement = shoeBrand.splice(1, 3);
document.write("Removed element from array: " + poppedElement + "<br> <br>");
//display remaining elements present in array after removing
document.write("Elements present in array: <br>" + shoeBrand);
}
removeElement();
</script>
</body>
</html>
Output
In the response provided below, you will observe that three components from the array have been eliminated, leaving only two items (Nike and Bata) remaining in the array.
Elements in array before removing:
Nike, Adidas, Sparks, RedTape, Bata
Removed element from array: Adidas, Sparks, RedTape,
Elements present in array:
Nike, Bata
Example 2
In this illustration, we will incorporate the previously mentioned code within a for loop to eliminate all instances of a designated element from the array. The process will involve iterating through the entire array and sequentially removing each matching element from it.
<html>
<body>
<script>
function removeElement() {
var clothingBrand = ["Gucci", " Chanel", "Gucci", " Zara"];
// for loop to trace the whole array
for (var i = 0; i < clothingBrand.length; i++) {
//Match the specific element in array
if (clothingBrand[i] === "Gucci") {
//remove the matched element from array
var delEle = clothingBrand.splice(i, 1);
document.write("<br> Removed element: " + delEle);
document.write("<br> Remaining elements: " + clothingBrand);
document.write("<br>"); }
}
}
removeElement();
</script>
</body>
</html>
Output
In the output provided below, it is evident that the element labeled (Gucci) has been eliminated two times from the array, leaving only two elements (Chanel, Zara) remaining in the array.
Removed element: Gucci
Remaining Element: Chanel, Gucci, Zara
Removed element: Gucci
Remaining Element: Chanel, Zara
It is also possible to eliminate all elements from the array. Refer to the code provided below:
<script>
var clothingBrand = ["Gucci", " Chanel", " Calvin Klein", " Zara"];
document.write("Elements in array: " + clothingBrand);
//remove all elements
clothingBrand.splice(0, clothingBrand.length);
document.write("<br> Remaining elements: " + clothingBrand);
</script>
Output
See that all elements have been deleted.
Elements in array: Gucci, Chanel, Calvin Klein, Zara
Remaining Element:
Remove elements from the array using filter
This approach fundamentally eliminates elements according to the condition specified by the user. It discards the designated elements and generates a new array containing the elements that remain. Refer to the code and output below to observe its functionality:
Example 1
In this demonstration, we will examine the even and odd elements within an array and apply filtering techniques. The filter function will be utilized to identify the even numbers, which will then be included in the new array. Conversely, the odd numbers will be excluded from the array, resulting in the display of only the newly modified array.
<html>
<body>
<script>
function isEven( value ) {
if(value%2 == 0)
return value;
}
//initialize the array named ary
var ary = [43, 243, 56, 24, 1021, 348].filter( isEven );
document.write("Even elements in array: " + ary);
</script>
</body>
</html>
Output
Observe the output below, where only the even elements are retained in the altered array:
Even elements in array: 56, 24, 348
Remove elements using delete operator
In addition to the various functions mentioned, JavaScript provides a delete operator that is specifically designed to eliminate an element from a designated index within an array. This operator can be utilized by specifying the array name followed by the index of the element intended for removal, for instance, delete arrayname[3]. Upon successful removal of the element, it yields a true value.
The delete operator is utilized to eliminate a specific element from an array at a designated index. To illustrate the functionality of this delete operator, we will examine a practical example:
Example
<html>
<body>
<script>
//declare and initialize an array
var clothingBrand = ["Gucci", " Calvin Klein", " Chanel", " Zara"];
document.write("Elements in array: " + clothingBrand);
//delete element of index 1 from clothingBrand array
var result = delete clothingBrand[1];
//if returned value is true, element is deleted successfully
document.write("<br> Removed successfully: " + result + "<br>");
document.write("Remaining elements in array: " + clothingBrand);
</script>
</body>
</html>
Output
In this output, it is evident that when the value returned is true following the removal operation, the element located at index 1 has been successfully eliminated.
Elements in array: Gucci, Calvin Klein, Chanel, Zara
Removed successfully: true
Remaining elements in array: Gucci,, Chanel, Zara
Remove elements using clear and reset operator
JavaScript offers the clear and reset operator, which is utilized to eliminate elements from an array. Typically, these operations do not actually remove the elements from the array; instead, they transfer them to a different array while emptying the original array.
Let us explore how this functions using an illustrative example:
Example 1
<html>
<body>
<script>
//declare and initialize an array
var originalArray = ["Gucci", " Calvin Klein", " Chanel", " Zara"];
document.write("Initially elements in array: " + originalArray);
//declare one more array to keep the elements of original array
var newArray = originalArray
//clear the initially declared array
originalArray = [ ]
//display element of original and new array after removing
document.write("<br> <br> Array after removing elements: " + originalArray);
document.write("<br> <br> Elements in new array: " + newArray);
</script>
</body>
</html>
Output
In this output, it is evident that the elements from the original array have been relocated to a different array. The array that was declared at the beginning is currently devoid of any elements, indicating that there are no items present in the array at this moment.
Initially elements in array: Gucci, Calvin Klein, Chanel, Zara
Array after removing elements:
Elements in new array: Gucci, Calvin Klein, Chanel, Zara
Example 2
In addition to this method, we can eliminate all items from the array by assigning its length a value of 0. Refer to the example provided below:
<html>
<body>
<script>
//declare and initialize an array
var array1 = ["Gucci", " Calvin Klein", " Chanel", " Zara"];
document.write("Initially elements in array: " + array1);
//set length of array to 0
array1.length = 0;
//display element of original and new array after removing
document.write("<br> <br> Array after removing elements: " + array1);
</script>
</body>
</html>
Output
By assigning a length of 0 to the array, every element within the array has effectively been disabled or eliminated. Observe the empty array:
Initially elements in array: Gucci, Calvin Klein, Chanel, Zara
Array after removing elements: