How do I empty an array in JavaScript?

Front End TechnologyJavascriptWeb Development

This tutorial teaches us to make an array empty in JavaScript. While programming with JavaScript, programmers need to make an array empty in many conditions. For example, coders are doing competitive programming with JavaScript. Suppose, to solve some problem, they need to create a new or an empty array while calling the function every time. Users can visualize this problem from the below example.

function child ( ){
   // create a new array or use a single array and make it empty every time function invokes
   }
   function parent ( ) {
      for ( int i=0; i< 10; i++ ) {
         Child ( );
      }
   }

In the above example, if the coder creates a new array every time, their code performance will decrease.

To overcome similar problems like the above, we have explained different approaches in this tutorial.

  • Assigning the new empty array

  • Making the array length zero

  • Using the pop() and shift() methods

  • Using the splice() method

Assigning the New Empty Array

In this approach, we will assign the new empty array ‘[ ]’ to the array to make the array empty. Assigning the empty array is the fastest and most popular approach to making an array empty. However, if users have taken reference to create the array, it will update the current array only, not the parent array from which they have taken reference.

Syntax

Users can follow the below syntax for this approach.

let array = ["welcome", "to", "the", "TutorialsPoint"];
array = [ ];

Example

In this example, we will look at the basic JavaScript to make an array empty by assigning it to an empty array.

<!DOCTYPE html>
<html>
<head>
   <title>Make an array.</title>
</head>
<body>
   <h2>Make an array empty by assigning new empty array.</h2>
   <h4>Initial array as follows:</h4>
   <div id="Initial"></div>
   <h4> Final array as follows:</h4>
   <div id="Final"></div>
   <script>
      let Initial = document.getElementById("Initial");
      let Final = document.getElementById("Final");
      let arr = ["welcome", "to", "the", "TutorialsPoint"];
      Initial.innerHTML = " [ " + arr + " ] ";
      arr = []; // making array empty
      Final.innerHTML = " [ " + arr + " ] ";
   </script>
</body>
</html>

In the above output, users can see that after assigning the empty array to the current array, it becomes empty.

Making the Array Length Zero

In JavaScript, every array has a length property that returns the number of elements inside the array. If we make an array length to 0, the array has no elements, and we can achieve our goal of making an array empty.

Syntax

Users can follow the below syntax to use the array length property and make it 0.

let array = ["welcome", "to", "the", "TutorialsPoint"];
array.length = 0;

Example

In this example, we will write JavaScript code to empty the array by making its length zero.

<html>
<head>
   <title>Make an array empty.</title>
</head>
<body>
   <h3>Make an array empty in JavaScript by making array length 0.</h3>
   <h4>Initial array: </h4>
   <div id="Initial"></div>
   <h4> Final array: </h4>
   <div id="Final"></div>
   <script type="text/javascript">
      let Initial = document.getElementById("Initial");
      let Final = document.getElementById("Final");
      let array = ["TutorialsPoint", "is", "the", "computer", "science", "portal."];
      Initial.innerHTML = " [ " + array + " ] ";
      array.length = 0; // making array empty by making length 0.
      Final.innerHTML = " [ " + array + " ] ";
   </script>
</body>
</html>

Using the pop() and shift() Methods

We can apply the pop() and shift() methods to the array in JavaScript. The Array.pop() method removes the single element from the last, and Array.shift() method removes the element from the first. Using this approach, we will remove elements from the array one by one until the array becomes empty.

Syntax

Users can follow the below syntax to use the Array.pop() and Array.shift() method.

let array = [ 10, 20, 30, 100, 200, 300 ];
array.pop( ) // removes element from the last.
array.shift( ) //removes element from the first.

Example

The below example demonstrates to make an array empty by using the array.pop() method. We will run the while loop and pop the single element from the array until the array becomes empty.

<html>
<head>
   <title>Make an array empty.</title>
<head>
<body>
   <h3>Make an array empty in JavaScript by using the Array.pop() method.</h3>
   <h4>Original Array of numbers:</h4>
   <div id="Initial"></div>
   <h4> Empty array: </h4>
   <div id="Final"></div>
   <script type="text/javascript">
      let numbers = [10, 20, 30, 100, 200, 300];
      document.getElementById("Initial").innerHTML = " [ " + numbers + " ] ";
      // making array empty using Array.pop().
      let n = numbers.length; // length of the array
      while (n--) {
         numbers.pop();
      }
      document.getElementById("Final").innerHTML = " [ " + numbers + " ] ";
   </script>
</body>
</html>

Using the splice() Method

In this approach, we will use the splice() method to empty the array. The splice() method helps to remove the elements from the list or array in JavaScript. We will remove all elements from the array using the splice() method.

Syntax

Here is the syntax to use the splice() method and remove all elements from the array.

let chars = [ ‘T’, ‘u’, ‘t’, ‘r’, ‘I’, ‘a’, ‘l’, ‘s’ ];
let n = array.length;
chars.splice( start_index, n );

Parameters

The splice() method takes two parameters.

  • strart_index − It is the starting index, from where we want to start to remove the array elements.

  • n − It is the number of elements that we need to remove from the start index.

Example

<html>
<head>
   <title>Make an array empty.</title>
</head>
<body>
   <h3>Make an array empty in JavaScript by using the Array.spilce() method.</h3>
   <h4>Array of chars as follow:</h4>
   <div id="initial"></div>
   <h4> Final array as follow:</h4>
   <div id="final"></div>
   <script>
      let chars = ['T', 'u', 't', 'r', 'I', 'a', 'l', 's'];
      document.getElementById("initial").innerHTML = " [ " + chars + " ] ";
      // making array empty using Array.spilce().
      let n = chars.length;
      chars.splice(0, n);
      document.getElementById("final").innerHTML = " [ " + chars + " ] ";
   </script>
</body>
</html>

Conclusion

Of the given four approaches, the first approach is the fastest, and the third approach is the slowest to making an array empty. As we need to loop through the whole array in the third approach, it is a very slow approach.

raja
Updated on 20-Jul-2022 08:40:09

Advertisements