Remove leading zeros in array - JavaScript

Javascript Web Development Front End Technology

In this article, the given task is to remove the leading zeros in an array in JavaScript. Before we dive into the examples, let’s get an understanding of the problem by looking at the input-output scenarios below.

Input-Output Scenario

Let’s look into some input-output scenarios -

Assume that we are having an array with elements in it. In which the starting elements in the array are zeros and task is to remove the leading arrays.

Input = [0, 0, 0, 5, 67, 12, 4, 0, 5];
Output = [5, 67, 12, 4, 0, 5]

Now, consider another scenario where there are no leading zeros in the array.

Input = [4, 0, 71, 3, 6, 0 ,5];
Output = [4, 0, 71, 3, 6, 0, 5]

We are performing the given task in the article with several ways. Let’s look into them one by one with specified examples.

Using shift() Method

The shift() method in JavaScript remove the first element from the array and will return that removed element. This method will modify(change) the length of array.

Syntax

Following is the syntax of shift() method in JavaScript -

shift();

Where,

The shift() method will return the removed element from the array and undefined if the array is empty.

Example

In this example below,

We have created an array with some elements in it. To remove the leading zeros in the array we have used shift() method.
Whenever there is a 0 in any index till non-zero index shift() method will remove them.
The elements which are after leading non-zero elements will be pushed into empty array which we have created.

<!DOCTYPE html>
<html>
<head>
   <title>Remove leading zeros in array - JavaScript</title>
</head>
<body>
   <script>
      const removeLeadingZeros = array => {
         let i=0;
         let ResArr = [];
         while(array[i]===0) {
            array.shift();
         }
         while(i<array.length){
            ResArr.push(array[i]);
            i++;
         }
         document.write(ResArr);
      }
      removeLeadingZeros(array = [0,0,4,0,23,43,7,0,6]);
      document.write("<br>");
      document.write("The length of array after removing the leading zero's: ", array.length);
   </script>
</body>
</html>

As we can see in the output, the leading zeros in the array got removed and the rest elements after leading zeros got pushed into result array. The length of original array got decreased after removing the leading zeros.

Example: Using unary '+' operator

In the following example,

We had a string value inside the array which consist of leading zeros. We used unary plus (+) operator to remove the leading zeros from a number.
The unary plus (+) operator will convert the string value to number value by removing all the leading zeros.

<!DOCTYPE html>
<html>
<head>
   <title>Removing leading zeros</title>
   <button onClick = "func()"> Click! </button>
   <p id = "para"></p>
</head>
<body>
   <script>
      function func(){
         const number = ['00013040079'];
         const LeadingZeros = +number;
         document.getElementById("para").innerHTML = "Number after leading zero's are removed: " + LeadingZeros;
      };
   </script>
</body>
</html>

In the output, the string value inside the number got converted into number values by removing the leading zeros.

Using indexOf() method

The indexOf() method in JavaScript will return the index of the first occurrence of value (searched value) in a array. This method will return -1 as output if the searched value is not found.

Syntax

Following is the syntax of indexOf() method in JavaScript -

array.indexOf(searchElement, startIndex)

Where,

The parameter (searchElement) is the element to search in array.
The parameter (startIndex) is the index to start the search from.

Example

In this example below, we have some array elements with some leading zeros involved. We’ve used indexOf() method to remove the leading zeros from the array. whenever there is a 0 in starting index in the array, the shift() method will remove them.

<!DOCTYPE html>
<html>
<head>
   <title>Removing leading zeros</title>
   <button onClick = "rec()"> Click! </button>
   <p id = "para"></p>
</head>
<body>
   <script>
      function rec(){
         const remove = array => {
            if (array.indexOf(0) === 0) {
               array.shift();
            };
         };
         remove(array = [0, 0, 3, 7, 10, 0, 33, 0]);
         document.getElementById("para").innerHTML = array;
      };
   </script>
</body>
</html>

As we can see in the output, the leading zeros are removed from the array and returned the rest of the elements which are after leading zeros.