How to remove the 0th indexed element in an array and return the rest of the elements in JavaScript?

Javascript Web Development Front End Technology

Array is a structure, which can hold values elements and they can be accessed by referencing to them with the help of index numbers.

Const colors = [“Green”, “Maroon”, “Blue”];

Reference index of array

In JavaScript arrays are referred with reference indexes. These indexes are zero-indexed. The very first element in the array will be 0 index. Second element will be index 1. Last element in the array will be the total size of the array minus 1.

Spread operator (…)

In this article, we are going to discuss how to remove the 0th indexed element in an array and return the rest of the elements in JavaScript.

Using the rest() method

The _.rest() method is in the library of underscore.js in JavaScript. This method will perform on array, returns the remaining elements apart from 0 index.

It includes two parameters, first is array and another is index value. The second parameter will begin the start the search from the mentioned indexed array.

Syntax

_.rest( array, index );

Example 1

Using rest operator

In this scenario, we performed the rest method on the array to print the elements after the 0^th element in the array. As because we didn’t include the second parameter.


<html>
<body>
   <script src="https://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.9.1/underscore-min.js">
   </script>
   <script type="text/javascript">
      document.write("Resultant array after performing rest method");
      document.write(_.rest([1, "Sharukh", 3, "Hrithik", 5, 6, 7, 8, "Aamir", 10]));
   </script>
</body>
</html>

Example 2

In this scenario, we performed the rest method on the array to print elements after the index number which is passed in the second parameter. Which means it will not print the elements which are previous elements of the passed index number. It prints the elements after that passed index number.


<html>
<body>
   <script src="https://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.9.1/underscore-min.js">
   </script>
   <script type="text/javascript">
      document.write("Resultant array after performing rest method: ");
      document.write(_.rest([1, "Sharukh", 3, "Hrithik", 5, 6, 7, 8, "Aamir", 10],2));
   </script>
</body>
</html>

Example 3

Using the shift() method

In this scenario, we are using shift method to remove the 0th index element in the array and decreasing it’s size by 1.


<!DOCTYPE html>
<html>
   <title>Removing element using Shift method</title>
<head>
   <script>
      /* JavaScript code to perform shift() method to remove elements from array */
      function remove() {
         var arr = ["Car", "Bus", "Flight", "Train", "Bike"];
         
         // Deleting the first element in the array
         document.write("Original Array: " +arr+ "<br>");
         
         //Performing the deletion
         var newArr = arr.shift();
         document.write("Removed element: " + newArr + "<br>");
         document.write("Remaining elements: " + arr);
      }
      remove();
   </script>
</head>
<body>
</body>
</html>

Example 4

Using the splice() method

In this scenario, we performed splice method to remove the first element in array. This method modifies the existing array by adding or modifying elements. And to remove we need specify the particular element.


<!DOCTYPE html>
<html>
   <title>Removing an element using Shift method</title>
<head>
   <script>
      // JavaScript code to perform splice() function on array
      function Array() {
         var arr = ["Lion", "Tiger", "Cheetah", "Elephant", "Giraffe"]; // creating an array
         document.write("Original Array: " +arr+"<br>");
         
         // performing the removal of particular element from the array
         var newArr = arr.splice(0, 1);
         document.write("Removed element: " + newArr + "<br>");
         document.write("Remaining elements: " + arr);
      }
      Array();
   </script>
</head>
<body>
</body>
</html>

Example 5

Using for loop in splice method

In this scenario, we did the removal of 0th element in the array by adding for loop to the splice method.


<!DOCTYPE html>
<html>
   <title>Removing an element using Splice method</title>
<head>
   <script>
      // JavaScript code to perform splice() function on array.
      function Array() {
         var arr = ["BMW", "AUDI", "JAGUAR", "FERRARI", "LAMBHORGINI"];
         document.write("Original Array: " + arr + "<br>");
         // Removing the specified element by value from the array
         for (var i = 0; i < arr.length; i++) {
            if (arr[i] === "BMW") {
               var newArr = arr.splice(i, 1);
               document.write("Removed element: " + newArr + "<br>");
               document.write("Remaining elements: " + arr);
            }
         }
      }
      Array();
   </script>
</head>
<body>
</body>
</html>

Example 6

Using the remove() method

In this scenario, removal of 0th node happened by creating a remove() method by using filter method.


<!DOCTYPE html>
<html>
   <title>Removing an element in array using REMOVE NODE method</title>
<head>
   <script>
      // Declare an array
      var arr = ["Ten", "Twenty", "Thirty", "Fourty", "Fifty"]
      
      //Creating function
      function arrayRemove(array, value) {
         document.write("Original Array: " + arr + "<br>");
         // performing filter method to create a remove method
         return arr.filter(function(func) {
            return func != value;
         });
      }
      var result = arrayRemove(arr, "Ten");
      document.write("Remaining elements: " + result)
   </script>
</head>
<body>
</body>
</html>

Example 7

Using Delete operator

In this scenario, we performed deletion of 0th element in the array by using Delete operator.


<!DOCTYPE html>
<html>
   <title>Removing an element in array using DELETE OPERATOR method</title>
<head>
   <script>
      // Create and assign elements to an array
      var arr = ["Ironman", "Batman", "Thor", "CapAmerica", "Groot"]
      document.write("The original array: " + arr +"<br>")
      
      // Delete element at index 0
      var deleted = delete arr[0];
      
      //Printing the rest of the array
      document.write("Remaining elements: " + arr);
   </script>
   </head>
<body>
</body>
</html>

Example 8

Using for loop an array

In this scenario, the for loop we created will traverse through the array, excluding the removed element, and store the remaining elements into a new array that is defined inside the function.


<!DOCTYPE html>
<html>
   <title>Removing an element in array using for loop() and new array</title>
<head>
   <script>
      let deleteElement = (arr, n) => {
         let newArray = [];
         for (let i = 0; i < arr.length; i++) {
            if (arr[i] !== n) {
               newArray.push(arr[i]);
            }
         }
         return newArray;
      };
      
      //Elements in the array
      let elements_in_array = ["SHIFT", "ALT", "TAB", "CAPS", "HOME"];
      
      //Selecting the element to be deleted
      let element_to_be_deleted = "SHIFT";
      let newArr = deleteElement(elements_in_array, element_to_be_deleted);
      document.write("Existing array is: " + elements_in_array);
      document.write("Remaining elements after deletion: " + newArr);
   </script>
</head>
<body>
</body>
</html>