Article Categories
- All Categories
-
Data Structure
-
Networking
-
RDBMS
-
Operating System
-
Java
-
MS Excel
-
iOS
-
HTML
-
CSS
-
Android
-
Python
-
C Programming
-
C++
-
C#
-
MongoDB
-
MySQL
-
Javascript
-
PHP
-
Economics & Finance
How to remove the 0th indexed element in an array and return the rest of the elements in JavaScript?
Arrays in JavaScript are zero-indexed data structures where elements can be accessed using their index positions. The first element is at index 0, the second at index 1, and so on.
const colors = ["Green", "Maroon", "Blue"]; // Index: 0 1 2
This article explores different methods to remove the first element (at index 0) from an array and return the remaining elements.
Using the shift() Method
The shift() method removes the first element from an array and returns that element. This method modifies the original array.
<html>
<body>
<script>
let vehicles = ["Car", "Bus", "Flight", "Train", "Bike"];
document.write("Original Array: " + vehicles + "<br>");
// Remove the first element
let removedElement = vehicles.shift();
document.write("Removed element: " + removedElement + "<br>");
document.write("Remaining elements: " + vehicles);
</script>
</body>
</html>
Original Array: Car,Bus,Flight,Train,Bike Removed element: Car Remaining elements: Bus,Flight,Train,Bike
Using the splice() Method
The splice() method can remove elements from any position in an array. To remove the first element, use splice(0, 1).
<html>
<body>
<script>
let animals = ["Lion", "Tiger", "Cheetah", "Elephant", "Giraffe"];
document.write("Original Array: " + animals + "<br>");
// Remove first element using splice(startIndex, deleteCount)
let removedElements = animals.splice(0, 1);
document.write("Removed element: " + removedElements + "<br>");
document.write("Remaining elements: " + animals);
</script>
</body>
</html>
Original Array: Lion,Tiger,Cheetah,Elephant,Giraffe Removed element: Lion Remaining elements: Tiger,Cheetah,Elephant,Giraffe
Using slice() Method (Non-destructive)
The slice() method returns a new array without modifying the original. Use slice(1) to get all elements except the first one.
<html>
<body>
<script>
let numbers = [10, 20, 30, 40, 50];
document.write("Original Array: " + numbers + "<br>");
// Create new array without first element
let newArray = numbers.slice(1);
document.write("Original (unchanged): " + numbers + "<br>");
document.write("New Array: " + newArray);
</script>
</body>
</html>
Original Array: 10,20,30,40,50 Original (unchanged): 10,20,30,40,50 New Array: 20,30,40,50
Using filter() Method
The filter() method creates a new array with elements that pass a test. You can filter out the first element by its index.
<html>
<body>
<script>
let fruits = ["Apple", "Banana", "Orange", "Mango"];
document.write("Original Array: " + fruits + "<br>");
// Filter out the first element (index 0)
let filteredArray = fruits.filter((item, index) => index !== 0);
document.write("After filtering: " + filteredArray);
</script>
</body>
</html>
Original Array: Apple,Banana,Orange,Mango After filtering: Banana,Orange,Mango
Comparison of Methods
| Method | Modifies Original | Returns Removed Element | Performance |
|---|---|---|---|
shift() |
Yes | Yes | Fast |
splice(0, 1) |
Yes | Yes (as array) | Fast |
slice(1) |
No | No | Medium |
filter() |
No | No | Slower |
Conclusion
Use shift() when you need to modify the original array and get the removed element. For creating a new array without the first element, slice(1) is the most efficient non-destructive approach.
973 Views
