Updated July 6, 2023
Introduction to JavaScript Empty Array
Emptying the array is nothing but removing the array’s element using various methods; it can be done from the start of the array, end of the array, specific index value, or the specified value. Unlike other programming languages, the array is a single variable used to store different elements in JavaScript. Javascript array allows to group of values and performs operations/iterate on them. Users can add and remove elements in an array in many ways. As Javascript does not have a simple remove method to clear the elements in an array, we have some other methods and techniques which are useful in clearing the Javascript array elements.
- pop: Clears elements from the end of the array.
- shift: Clears elements from the start of the array.
- splice: Clears elements from a specified index of the array.
- filter: Clears elements through analytical code from the array.
Syntax:
In the case of pop and shift
<name of the array>.pop/ shift()No specific arguments must be passed to javascript’s pop or shift method.
In the case of the splice,
<name of the array>.splice(index, number of elements to be removed)We have an even simple method of clearing the array elements, which removes elements from the end of the array by setting the array’s length. We need to set the value of length less than the current array length.
Examples of JavaScript Empty Array
Given below are the examples of JavaScript Empty Array:
Example #1
Code:
<!DOCTYPE html>
<html>
<body>
<h2>Remove Javascript array elements using .length</h2>
<p id="demo"></p>
<script>
var array = [23,45,67,43,32,65];
array.length = 3;
document.write( array );
</script>
</body>
</html>Output:
Example #2
By setting the length of the array to 0.
Code:
<!DOCTYPE html>
<html>
<body>
<h2>Remove Javascript array elements using .length</h2>
<p id="demo"></p>
<script>
var array = [23,45,67,43,32,65];
array.length = 0;
if(array.length == 0)
{
document.write( 'array cleared' );
}
else{
document.write( array );
}
</script>
</body>
</html>Output:
Example #3
Using pop(): The pop() method removes the array’s last element, modifying the array and its length.
Code:
<!DOCTYPE html>
<html>
<body>
<h2>Remove Javascript array elements using pop method </h2>
<p id="demo"></p>
<script>
var array = [23,45,67,43,32,65];
array.pop();
document.write( array );
</script>
</body>
</html>Output:
Example #4
Iterates the array using for loop and clears the elements of the javascript array.
Code:
<!DOCTYPE html>
<html>
<body>
<h2>Remove Javascript array elements using pop method</h2>
<p id="demo"></p>
<script>
var array = [23,45,67,43,32,65];
for (var i = array.length; i > 0; i--) {
array.pop();
}
if(array.length == 0){
document.write( 'array cleared' );
}
else{
document.write( array );
}
</script>
</body>
</html>Output:
Example #5
Using the shift() method works the same as the pop() method but removes elements from the start of the array; we need not provide any parameters as the shift() method clears only the first elements of the array.
Code:
<!DOCTYPE html>
<html>
<body>
<h2>Remove Javascript array elements using shift method </h2>
<p id="demo"></p>
<script>
var array = [23,45,67,43,32,65];
array.shift();
document.write( array );
</script>
</body>
</html>Output:
If the array does not have any array elements and if the shift() method is implemented on that array, it will return undefined as the array length is 0.
Example #6
Using the splice() method to remove elements of the javascript array.
Code:
<!DOCTYPE html>
<html>
<body>
<h2>Remove Javascript array elements using splice method </h2>
<p id="demo"></p>
<script>
var array = [23,45,67,43,32,65];
var removed_elements = array.splice(1,3);
document.write( 'elements in array ', array );
document.write('</br>');
document.write( 'removed elements ', removed_elements );
</script>
</body>
</html>Output:
Splice () can also be used to remove a range of elements in the array; let us now see how to remove elements in an array by specifying the value,
First, we need to know the value in the array the user wants to remove and identify its index number. Only single items can be removed using this method.
Example #7
Code:
<!DOCTYPE html>
<html>
<body>
<h2>Remove Javascript array elements using splice with target index</h2>
<p id="demo"></p>
<script>
var array = [23,45,67,43,32,65,45,54,45];
for( var i = 0; i < array.length; i++){
if ( array[i] === 45) {
array.splice(i, 1);
i--;
}
}
document.write('elements in array ', array);
</script>
</body>
</html>Output:
Let us look at removing the elements of an array by value using the filter method.
Filter() creates a new array and does not change the input array; it has a single parameter, a callback method triggered as the user traverses through the array elements and passes the current value, current array index, and input array.
Example #8
Code:
<!DOCTYPE html>
<html>
<body>
<h2>Remove Javascript array elements using filter</h2>
<p id="demo"></p>
<script>
var array = [23,45,67,43,32,65,45,54,45];
var filtered_array = array.filter(function(value, index, arr){
return value > 45;
});
document.write('elements in filtered array ', filtered_array);
</script>
</body>
</html>Output:
The methods mentioned above we used regularly in our day-to-day programming. Now, let us look at more methods for emptying the javascript array.
- Lodash array Remove method: Lodash provides a set of utility libraries for array manipulation methods; one among those is ‘remove.’ It works similarly to the filter method but does not save the original values and returns only the matching elements into a new array.
- Making a Remove method programmatically: Instead of using Lodash, we can create our utility method ‘Remove’ and use it for emptying the array. The first parameter is the input array; it assumes only values like numbers or strings.
- Explicitly removing the array elements using the ‘delete’ operator: We can specify the array element to be removed using the delete operator. It does not affect the length of the input array nor the index of the other elements, which means the deleted element is not obliterated but becomes undefined.
This delete operator does not obliterate the elements because deleting here frees the memory space.
Example #9
Code:
<!DOCTYPE html>
<html>
<body>
<h2>Remove Javascript array elements using filter</h2>
<p id="demo"></p>
<script>
var array = [10, 29, 38, 47, 56, 65];
delete array[2];
document.write(array);
</script>
</body>
</html>Output:
Conclusion
Removing/emptying the javascript array items is useful as we can manage data storage. We don’t have a remove method available to empty the array, but we have many other methods, as we have reviewed above with examples.
Recommended Articles
This is a guide to JavaScript Empty Array. Here we discuss the introduction and examples of JavaScript empty array. You may also have a look at the following articles to learn more –
