How to get the last 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 last element of arrays is essential for retrieving the most recent item, implementing stack operations, and getting final values in data processing within JavaScript applications.
With over 25 years of experience in software development and as the creator of CoreUI, I have accessed last elements extensively in components like activity feeds, pagination controls, and timeline displays where the final item often represents the current state or latest entry.
From my extensive expertise, the most reliable and universally supported approach is using array index notation with array.length - 1 to access the final position.
This method is dependable, works across all JavaScript versions, and clearly expresses the intent to access the last element.
Use array index notation with length - 1 to access the last element of an array.
const fruits = ['apple', 'banana', 'orange']
const lastFruit = fruits[fruits.length - 1]
// Result: 'orange'
The expression fruits.length - 1 calculates the index of the last element because arrays are zero-indexed but length counts from 1. In this example, the array has 3 elements, so fruits.length is 3, and fruits.length - 1 equals 2, which is the index of 'orange'. This method returns undefined if the array is empty because array.length - 1 becomes -1, which does not exist. The approach works consistently regardless of the array’s data type or size.
Using Index Notation [length - 1]
The bracket notation with length - 1 is the traditional way to access the last element. It works in every JavaScript environment.
const numbers = [10, 20, 30, 40]
console.log(numbers[numbers.length - 1]) // 40
const users = [
{ id: 1, name: 'Alice' },
{ id: 2, name: 'Bob' },
{ id: 3, name: 'Charlie' }
]
console.log(users[users.length - 1]) // { id: 3, name: 'Charlie' }
console.log(users[users.length - 1].name) // 'Charlie'
// Returns undefined for empty arrays
const empty = []
console.log(empty[empty.length - 1]) // undefined
Because [length - 1] returns undefined for empty arrays rather than throwing an error, it is safe to use without a length check. However, the syntax is verbose, which is why modern JavaScript introduced the at() method as an alternative. For the counterpart to this article, see how to get the first element of an array in JavaScript.
Using Array.prototype.at(-1)
The at() method (ES2022) is the modern way to access the last element. It supports negative indices, where -1 refers to the last element, -2 to the second-to-last, and so on.
const colors = ['red', 'green', 'blue']
console.log(colors.at(-1)) // 'blue'
console.log(colors.at(-2)) // 'green'
console.log(colors.at(0)) // 'red'
const empty = []
console.log(empty.at(-1)) // undefined
// Works with any array type
const mixed = [1, 'two', { three: 3 }, [4]]
console.log(mixed.at(-1)) // [4]
The at(-1) syntax is cleaner and more readable than array[array.length - 1]. It avoids repeating the array name and makes the intent immediately clear. The at() method is supported in all modern browsers and Node.js 16.6+. In 2026, this should be your default choice for accessing the last element.
Using slice(-1)
The slice() method with a negative index returns a new array containing the last element. This is a non-mutating approach that has been available since ES3.
const fruits = ['apple', 'banana', 'orange']
const lastArray = fruits.slice(-1)
console.log(lastArray) // ['orange']
console.log(lastArray[0]) // 'orange'
// Combine with destructuring for a cleaner syntax
const [last] = fruits.slice(-1)
console.log(last) // 'orange'
// Returns an empty array for empty arrays
const empty = []
console.log(empty.slice(-1)) // []
const [none] = empty.slice(-1)
console.log(none) // undefined
The slice(-1) approach creates a new single-element array, so you need [0] or destructuring to extract the value. This is slightly less efficient than direct indexing but useful when you want to chain operations or need a copy rather than a reference.
Getting the Last Element of an Array of Objects
When working with arrays of objects, you often need a specific property from the last item. This is common in components like the CoreUI Pagination where the last page number determines the upper bound.
const pages = [
{ number: 1, active: false },
{ number: 2, active: false },
{ number: 3, active: true }
]
const lastPage = pages.at(-1)
console.log(lastPage.number) // 3
// Combine with optional chaining for safety
const emptyPages = []
console.log(emptyPages.at(-1)?.number) // undefined (no error)
Optional chaining (?.) is the modern way to safely access properties on the last element without checking for undefined first. This pattern is especially useful in React components where data may arrive asynchronously.
Removing and Returning the Last Element with pop()
If you need to both retrieve and remove the last element (stack behavior), use pop(). Be aware that this mutates the original array.
const stack = ['task-1', 'task-2', 'task-3']
const last = stack.pop()
console.log(last) // 'task-3'
console.log(stack) // ['task-1', 'task-2']
// Returns undefined for empty arrays
const empty = []
console.log(empty.pop()) // undefined
Use pop() only when you intentionally want to remove the last element. For read-only access, always prefer at(-1) or [length - 1] to avoid unexpected mutations. This distinction is critical in React state management where mutating arrays directly can prevent re-renders.
Using Destructuring with toReversed()
You can combine destructuring with toReversed() (ES2023) to extract the last element without mutating the original array. Avoid using reverse() directly as it mutates.
const items = ['first', 'middle', 'last']
// Modern: toReversed() does not mutate
const [latest] = items.toReversed()
console.log(latest) // 'last'
console.log(items) // ['first', 'middle', 'last'] (unchanged)
// Pre-ES2023: spread + reverse
const [lastItem] = [...items].reverse()
console.log(lastItem) // 'last'
While this works, at(-1) is more readable and efficient for simply accessing the last element. Use the destructuring approach when you need the last few elements together. For more on array operations, see how to check if an array contains a value in JavaScript.
Best Practice Note:
In modern JavaScript, array.at(-1) is the recommended way to access the last element — it is concise, readable, and clearly expresses the intent. Use array[array.length - 1] only when supporting environments older than ES2022. Always prefer non-mutating approaches (at(), slice()) over pop() unless you specifically need stack-like behavior. When working with data-driven components like the CoreUI Smart Table, accessing the last row or page is a common operation that benefits from clean, readable syntax.
