How to get the first element of an array in JavaScript
Łukasz Holeczek
Follow Łukasz Holeczek on GitHub
Connect with Łukasz Holeczek on LinkedIn
Follow Łukasz Holeczek on X (Twitter)
Accessing the first element of arrays is fundamental for processing data sequences, implementing queue operations, and retrieving initial values in JavaScript applications.
With over 25 years of experience in software development and as the creator of CoreUI, I have accessed first elements countless times in components like breadcrumb navigation, carousel displays, and data lists where the initial item often has special significance or styling.
From my extensive expertise, the most straightforward and universally supported approach is using array index notation with [0] to access the first position.
This method is direct, readable, and works consistently across all JavaScript environments without any dependencies.
Use array index notation [0] to access the first element of an array.
const fruits = ['apple', 'banana', 'orange']
const firstFruit = fruits[0]
// Result: 'apple'
Array index notation uses square brackets with the position number to access specific elements, with arrays being zero-indexed meaning the first element is at position 0. In this example, fruits[0] returns 'apple' as it is the first element in the array. This method returns undefined if the array is empty or if you try to access an index that does not exist. The approach is consistent whether you are working with strings, numbers, objects, or any other data type stored in the array.
Using Index Notation [0]
The bracket notation is the most common and performant way to access the first element. It works in every JavaScript environment since ES1.
const numbers = [10, 20, 30]
console.log(numbers[0]) // 10
const users = [
{ id: 1, name: 'Alice' },
{ id: 2, name: 'Bob' }
]
console.log(users[0]) // { id: 1, name: 'Alice' }
console.log(users[0].name) // 'Alice'
// Returns undefined for empty arrays
const empty = []
console.log(empty[0]) // undefined
Because [0] returns undefined for empty arrays rather than throwing an error, it is safe to use without a length check. However, if you need to distinguish between an empty array and an array whose first element is actually undefined, check array.length > 0 first.
Using Array.prototype.at(0)
The at() method (ES2022) provides a cleaner syntax and also supports negative indices. For accessing the first element, at(0) behaves identically to [0].
const colors = ['red', 'green', 'blue']
console.log(colors.at(0)) // 'red'
console.log(colors.at(-1)) // 'blue' (last element)
const empty = []
console.log(empty.at(0)) // undefined
The main advantage of at() is negative indexing — at(-1) gives you the last element without computing array.length - 1. For the first element specifically, [0] and at(0) are interchangeable. The at() method is supported in all modern browsers and Node.js 16.6+. For the counterpart to this article, see how to get the last element of an array in JavaScript.
Using Destructuring
Array destructuring provides a concise way to extract the first element, especially when you also need the remaining items.
const fruits = ['apple', 'banana', 'orange']
// Extract just the first element
const [first] = fruits
console.log(first) // 'apple'
// Extract the first element and the rest
const [head, ...tail] = fruits
console.log(head) // 'apple'
console.log(tail) // ['banana', 'orange']
// With a default value for empty arrays
const [initial = 'none'] = []
console.log(initial) // 'none'
Destructuring is particularly useful when you need both the first element and the remaining array in one statement. The default value syntax (= 'none') is a clean way to handle empty arrays without a separate conditional check.
Getting the First Element of an Array of Objects
When working with arrays of objects, you often need a specific property from the first item. This is common in components like the CoreUI Breadcrumb where the first item represents the root navigation.
const breadcrumbs = [
{ label: 'Home', href: '/' },
{ label: 'Products', href: '/products' },
{ label: 'Details', href: '/products/1' }
]
const root = breadcrumbs[0]
console.log(root.label) // 'Home'
// Combine with optional chaining for safety
const emptyNav = []
console.log(emptyNav[0]?.label) // undefined (no error)
Optional chaining (?.) is the modern way to safely access properties on the first element without checking for undefined first. This pattern is especially useful in React components where data may not be loaded yet.
Getting the First Match with find()
When you need the first element that matches a condition rather than simply the first element in the array, use find(). This is useful for filtering data in components like the CoreUI Carousel where you might need the first active slide.
const items = [
{ id: 1, status: 'inactive' },
{ id: 2, status: 'active' },
{ id: 3, status: 'active' }
]
const firstActive = items.find((item) => item.status === 'active')
console.log(firstActive) // { id: 2, status: 'active' }
// Returns undefined if no match
const firstArchived = items.find((item) => item.status === 'archived')
console.log(firstArchived) // undefined
Unlike filter() which returns all matches as an array, find() returns the first matching element directly and stops iterating as soon as it finds a match. This makes it more efficient when you only need one result. For checking whether a value exists at all, see how to check if an array contains a value in JavaScript.
Removing and Returning the First Element with shift()
If you need to both retrieve and remove the first element (queue behavior), use shift(). Be aware that this mutates the original array.
const queue = ['task-1', 'task-2', 'task-3']
const next = queue.shift()
console.log(next) // 'task-1'
console.log(queue) // ['task-2', 'task-3']
// Returns undefined for empty arrays
const empty = []
console.log(empty.shift()) // undefined
Use shift() only when you intentionally want to remove the first element. For read-only access, always prefer [0] or at(0) to avoid unexpected mutations.
Best Practice Note:
For most use cases, array[0] is the best choice — it is the fastest, most readable, and universally supported method. Use at(0) when you also need negative indexing elsewhere in your code. Use destructuring when you need the first element and the rest of the array together. Use find() when you need the first element matching a condition. Always prefer non-mutating approaches over shift() unless you specifically need queue-like behavior.
