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"

Method 2 (Recommended): Array Destructuring

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"

How to Get the Last Element of an Array

There are two excellent methods for getting the last element.

Method 1: The at() Method (Recommended)

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"

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"

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]

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

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.