How to remove the first item from an array in JavaScript
Łukasz Holeczek
Follow Łukasz Holeczek on GitHub
Connect with Łukasz Holeczek on LinkedIn
Follow Łukasz Holeczek on X (Twitter)
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.
With over 25 years of experience in software development and as the creator of CoreUI, a widely used open-source UI library, I have 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 discard the value.
1. Capturing the Removed Element
One of the key advantages of shift() is that it returns the element it removed. This is useful when you need to process the item before discarding it, such as logging, displaying a confirmation, or passing it to another function.
const taskQueue = ['Send email', 'Generate report', 'Update dashboard']
const currentTask = taskQueue.shift()
console.log('Processing:', currentTask)
// Result: 'Processing: Send email'
console.log('Remaining tasks:', taskQueue)
// Result: ['Generate report', 'Update dashboard']
This pattern is the foundation of a simple queue data structure where items are processed in first-in, first-out (FIFO) order. Each call to shift() dequeues the next item for processing. In CoreUI notification components, we use this approach to display alerts one at a time, removing each from the queue after the user acknowledges it.
2. Removing from an Empty Array
When shift() is called on an empty array, it returns undefined rather than throwing an error. This makes it safe to use without checking the array length first, but you should handle the undefined return value if your logic depends on the removed item.
const emptyList = []
const result = emptyList.shift()
console.log(result)
// Result: undefined
console.log(emptyList)
// Result: []
// Safe pattern with a guard check
const notifications = []
const next = notifications.shift()
if (next !== undefined) {
console.log('Show notification:', next)
} else {
console.log('No notifications pending')
}
// Result: 'No notifications pending'
The undefined return value is a reliable signal that the array was empty. This eliminates the need for a separate if (array.length > 0) check before calling shift(), keeping your code concise. However, if your array legitimately contains undefined as a value, you should check the length instead to distinguish between an empty array and a removed undefined element.
3. Processing All Items with a Loop
A common pattern is to use shift() inside a while loop to process and remove every element from an array until it is empty. This is useful for batch processing or draining a queue.
const messageQueue = ['Hello', 'How are you?', 'Goodbye']
while (messageQueue.length > 0) {
const message = messageQueue.shift()
console.log('Sending:', message)
}
// Output:
// Sending: Hello
// Sending: How are you?
// Sending: Goodbye
console.log(messageQueue)
// Result: []
This drain pattern guarantees that every item is processed exactly once and that the array is empty when the loop completes. It is more expressive than a for loop when the intent is to consume the array, because the shrinking length naturally controls the iteration. In CoreUI template engines, we use this pattern to process batches of component configuration objects during initialization.
4. Using Destructuring as an Alternative
Modern JavaScript offers array destructuring as a non-mutating alternative to shift(). The rest syntax (...rest) separates the first element from the remaining items and creates a new array, leaving the original untouched.
const colors = ['red', 'green', 'blue', 'yellow']
const [first, ...rest] = colors
console.log(first)
// Result: 'red'
console.log(rest)
// Result: ['green', 'blue', 'yellow']
// Original array is unchanged
console.log(colors)
// Result: ['red', 'green', 'blue', 'yellow']
This approach is ideal in React and Vue state management where immutability is required. Instead of mutating the state array directly with shift(), you destructure to extract the first element and use rest as the new state value. This ensures that the framework detects the change and triggers a re-render correctly.
5. Removing the First N Items
While shift() removes one element at a time, you can combine it with splice() to remove multiple elements from the beginning of an array in a single operation.
const logs = ['[INFO] Start', '[WARN] Slow query', '[ERROR] Timeout', '[INFO] Resume', '[INFO] Done']
// Remove the first 3 log entries
const removed = logs.splice(0, 3)
console.log(removed)
// Result: ['[INFO] Start', '[WARN] Slow query', '[ERROR] Timeout']
console.log(logs)
// Result: ['[INFO] Resume', '[INFO] Done']
The splice(0, n) call starts at index 0 and removes n elements, returning them as a new array. This is significantly more efficient than calling shift() in a loop n times, because it performs the index shifting only once. Use this when you need to trim a fixed number of entries from the front, such as clearing old log entries or paginating through buffered data.
6. Combining shift() with Other Array Methods
You can use shift() alongside other array methods to build practical data processing pipelines. A common use case is rotating an array by moving the first element to the end.
const carousel = ['Slide A', 'Slide B', 'Slide C', 'Slide D']
// Rotate: move first item to the end
const firstSlide = carousel.shift()
carousel.push(firstSlide)
console.log(carousel)
// Result: ['Slide B', 'Slide C', 'Slide D', 'Slide A']
This rotate pattern is useful for implementing circular navigation like image carousels or round-robin scheduling. Each rotation moves the current item to the back of the queue and brings the next item to the front. In CoreUI carousel components, the underlying logic follows this same principle to cycle through slides in a predictable order.
Best Practice Note:
The shift() method mutates the original array, which is efficient for queue processing and imperative code. When immutability is required, such as in React or Vue state updates, use destructuring (const [first, ...rest] = array) or slice(1) to create a new array without the first element. This is the same approach we use in CoreUI components to manage notification queues and dynamic navigation elements. For related operations, see how to remove the last item, how to remove specific items, and how to add items to an array.
