Introduction to JavaScript Empty Array
Emptying the array is nothing but to remove the elements of the array using various methods, it can be done from the start of the array, end of the array, specific index value or the specified value. In JavaScript, the array is a single variable which is used to store different elements, unlike other programming languages. Javascript array allows to group 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 are required to be passed to the pop or shift method in javascript.
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 is used to remove elements from the end of the array is setting the length of the array. We need to set the value of length less than that of 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 last element of the array modifying the array and its length.
4.5 (4,582 ratings)
View Course
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
By iterating the array using for loop and clearing 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 shift() method, it works exactly the same as the pop() method but removes elements from the start of the array, we need not provide any parameters as 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 shift() method is implemented on that array, it will return undefined as array length is 0.
Example #6
Using 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 which 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 which is triggered as the user traverses through the array elements and passes 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 above-mentioned methods we use regularly in our day to day programming. Now, let us look at some more methods of 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, 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 ‘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 does it affect the index of the other elements, which means the deleted element is not removed completely but becomes undefined.
This delete operator does not remove the elements completely because deleting here refers to freeing 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 –
