Skip to main content

How to Get the First and Last Elements of an Array in JavaScript

Accessing the first or last element of an array is a fundamental and frequent operation in JavaScript. You might need to get the first item in a queue, the last item in a log, or simply destructure an array for processing. Modern JavaScript provides several clean and highly readable ways to accomplish this.

This guide will teach you the best methods for getting the first and last elements of an array. You will learn the classic bracket notation, the modern and recommended at() method, and the powerful technique of array destructuring.

The Core Concept: Zero-Based Indexing​

It is essential to remember that arrays in JavaScript are zero-indexed. This means the first element is at index 0, the second is at index 1, and the last element is at index array.length - 1.

How to Get the First Element of an Array​

There are two primary methods for getting the first element.

Method 1: Bracket Notation​

This is the classic and most universally understood method.

const fruits = ['apple', 'banana', 'cherry'];

const firstFruit = fruits[0];

console.log(firstFruit); // Output: "apple"

Array destructuring is a modern and highly declarative way to extract values from an array. It allows you to unpack values into distinct variables in a single line.

const fruits = ['apple', 'banana', 'cherry'];

const [firstFruit] = fruits;

console.log(firstFruit); // Output: "apple"
note

This is the recommended best practice when you want to assign the first element to a new variable, as its intent is very clear.

How to Get the Last Element of an Array​

There are two excellent methods for getting the last element.

The Array.prototype.at() method is the newest and most readable way to get an element at a specific index. Its key feature is that it accepts negative integers, which count back from the end of the array.

const fruits = ['apple', 'banana', 'cherry'];

const lastFruit = fruits.at(-1);

console.log(lastFruit); // Output: "cherry"
note

This is the recommended best practice because it is concise and avoids manual calculation.

Method 2: Bracket Notation with .length​

The classic method is to calculate the last index by subtracting 1 from the array's length.

const fruits = ['apple', 'banana', 'cherry'];

const lastFruit = fruits[fruits.length - 1];

console.log(lastFruit); // Output: "cherry"
note

While this works perfectly, at(-1) is more readable and less prone to "off-by-one" errors.

How to Get Both the First and Last Elements at Once​

Array destructuring provides an incredibly elegant way to get the first and last elements with a declarative line by using the rest (...) operator.

const [first, ...rest] = [1, 2, 3, 4, 5];
const last = rest.pop(); // removes last element from rest

console.log(first); // Output: 1
console.log(last);  // Output: 5
console.log(rest);  // Output: [2, 3, 4]
note

This is a powerful and highly readable pattern for processing the ends of an array.

Handling Empty Arrays​

A robust solution must handle cases where the array might be empty. All the recommended methods do this gracefully.

const emptyArray = [];

// Bracket Notation
console.log(emptyArray[0]);                     // Output: undefined
console.log(emptyArray[emptyArray.length - 1]); // Output: undefined

// .at() Method
console.log(emptyArray.at(0));                  // Output: undefined
console.log(emptyArray.at(-1));                 // Output: undefined

// Destructuring
const [first] = emptyArray;
console.log(first);                             // Output: undefined
note

In all cases, attempting to access an element from an empty array safely returns undefined.

Conclusion​

For accessing the first and last elements of an array, modern JavaScript offers several excellent options.

  • To get the first element, both bracket notation array[0] and destructuring const [first] = array are great choices. Destructuring is preferred for its declarative style.
  • To get the last element, the array.at(-1) method is the recommended best practice for its superior readability.
  • To get both at once, the most elegant solution is array destructuring with the rest operator.

Table of Contents