How to remove the first item from an array in JavaScript

Removing the first element from JavaScript arrays is a common operation when processing queues, managing dynamic lists, or handling user interface components that need to update their content. As the creator of CoreUI, a widely used open-source UI library, I’ve implemented this pattern extensively in components like breadcrumbs, notification lists, and data tables where elements need to be removed from the beginning. From my expertise, the most efficient and built-in solution is using the shift() method, which removes and returns the first element. This approach is clean, performant, and specifically designed for this exact use case.

Use the shift() method to remove and return the first item from an array.

const fruits = ['apple', 'banana', 'orange']
const firstFruit = fruits.shift()
// firstFruit: 'apple', fruits: ['banana', 'orange']

The shift() method modifies the original array by removing the first element and shifting all remaining elements down by one index position. In this example, fruits.shift() removes ‘apple’ from the beginning of the array and returns it, while the array becomes ['banana', 'orange']. The method returns the removed element, which you can capture in a variable if needed, or simply call fruits.shift() to remove without storing the value.

Best Practice Note:

This is the same approach we use in CoreUI components to manage notification queues and dynamic navigation elements. For performance-critical applications with large arrays, consider using slice(1) to create a new array instead of mutating the original, though shift() remains the standard choice for most scenarios.