Home Whiteboard Practice Code Graphing Calculator Online Compilers Articles Tools
Tutorials Courses Jobs

Removing an element from the start of the array in javascript

Javascript Web Development Front End Technology

In JavaScript, there are several methods to remove the first element from an array. The most common approaches are using the shift() method, slice() method, or the Underscore.js _.rest() method.

Using shift() Method (Recommended)

The shift() method removes and returns the first element from an array, modifying the original array.

Syntax

array.shift()

Example

<!DOCTYPE html>
<html lang="en">
   <head>
      <meta charset="UTF-8" />
      <meta name="viewport" content="width=device-width, initial-scale=1.0" />
      <title>Remove first element using shift()</title>
   </head>
   <body>
      <div id="original"></div>
      <div id="shift"></div>
      <div id="removed"></div>
      
      <script>
         let arr = [10, "Alice", 20, "Edward", 30, 40];
         document.getElementById("original").innerHTML = "Original array: " + arr;
         
         let removedElement = arr.shift();
         document.getElementById("shift").innerHTML = "Array after shift(): " + arr;
         document.getElementById("removed").innerHTML = "Removed element: " + removedElement;
      </script>
   </body>
</html>

Original array: 10,Alice,20,Edward,30,40
Array after shift(): Alice,20,Edward,30,40
Removed element: 10

Using slice() Method

The slice() method creates a new array without the first element, leaving the original array unchanged.

Example

<!DOCTYPE html>
<html lang="en">
   <head>
      <meta charset="UTF-8" />
      <meta name="viewport" content="width=device-width, initial-scale=1.0" />
      <title>Remove first element using slice()</title>
   </head>
   <body>
      <div id="original"></div>
      <div id="slice"></div>
      
      <script>
         let arr = [10, "Alice", 20, "Edward", 30, 40];
         document.getElementById("original").innerHTML = "Original array: " + arr;
         
         let newArr = arr.slice(1);
         document.getElementById("slice").innerHTML = "New array after slice(1): " + newArr;
      </script>
   </body>
</html>

Original array: 10,Alice,20,Edward,30,40
New array after slice(1): Alice,20,Edward,30,40

Using _.rest() Method (Underscore.js)

The _.rest() method from Underscore.js returns all elements except the first one.

Syntax

_.rest(array, index)

Example

<!DOCTYPE html>
<html lang="en">
   <head>
      <meta charset="UTF-8" />
      <meta name="viewport" content="width=device-width, initial-scale=1.0" />
      <script src="https://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.9.1/underscore-min.js"></script>
      <title>Remove first element using _.rest()</title>
   </head>
   <body>
      <div id="original"></div>
      <div id="rest"></div>
      
      <script>
         let arr = [10, "Alice", 20, "Edward", 30, 40];
         document.getElementById("original").innerHTML = "Original array: " + arr;
         document.getElementById("rest").innerHTML = "Array after _.rest(): " + _.rest(arr);
      </script>
   </body>
</html>

Original array: 10,Alice,20,Edward,30,40
Array after _.rest(): Alice,20,Edward,30,40

Comparison

Method Modifies Original Returns Removed Element Dependency
shift() Yes Yes None
slice(1) No No None
_.rest() No No Underscore.js

Conclusion

Use shift() when you need to modify the original array and get the removed element. Use slice(1) when you want to preserve the original array and create a new one without the first element.

Updated on: 2026-03-15T23:18:59+05:30

230 Views

Learn More in Our Tutorials

Kickstart Your Career

Get certified by completing the course

Get Started
Advertisements