Get the Last element of an Array in TypeScript

avatar

Borislav Hadzhiev

Last updated: Mar 3, 2022

banner

Photo from Unsplash

Get the Last element of an Array in TypeScript #

Use the Array.at() method to get the last element of an array in TypeScript, e.g. const last = arr.at(-1). When passed a negative index, the at() method returns an element by counting back from the end of the array.

index.ts
const arr: string[] = ['a', 'b', 'c']; // 👇️ const lastAgain: string | undefined const last = arr.at(-1); console.log(last); // 👉️ "c" if (last !== undefined) { console.log(last.toUpperCase()); // 👉️ "C" } // 👇️ Or use optional chaining console.log(last?.toUpperCase()); // 👉️ "C"

We used the Array.at method to get the last element of an array in TypeScript.

The only parameter the method takes is the index of the array element to be returned.

When passed a negative index, the method returns an element by counting back from the end of the array.

The at() method returns the element in the array that matches the provided index or undefined if the given index cannot be found.

Notice that TypeScript types the last variable as string or undefined.

This is accurate because if the array were empty, the return value would be undefined.

index.ts
const arr: string[] = []; // 👇️ const lastAgain: string | undefined const last = arr.at(-1); console.log(last); // 👉️ undefined if (last !== undefined) { console.log(last.toUpperCase()); } // 👇️ Or use optional chaining console.log(last?.toUpperCase()); // 👉️ undefined

You can get around the value being possibly undefined by using a simple type guard.

The if statement and the optional chaining (?.) operator serve as type guards and exclude the possibility of the value being undefined, which enables us to use type-specific built-in methods.

Alternatively, you can access the array element at the last index.

To get the last element of an array in TypeScript, access the array at index array.length - 1, e.g. const last = arr[arr.length - 1]. The calculation evaluates to the index of the last element in the array.

index.ts
const arr: string[] = ['a', 'b', 'c']; // 👇️ const last: string const last = arr[arr.length - 1]; console.log(last); // 👉️ "c" if (last !== undefined) { console.log(last.toUpperCase()); } console.log(last?.toUpperCase());
Indexes are zero-based in JavaScript. That's why we have to subtract 1 from the array's length to get the index of the last element in the array.

Notice that the last variable has a type of string, which might not be what you want because what if the array were empty.

index.ts
const arr: string[] = []; // 👇️ const last: string const last = arr[arr.length - 1]; console.log(last); // 👉️ undefined

Even though the array is empty, the last variable is typed as string in TypeScript.

This is probably not what you want because if you access a property or call a method on an undefined value, you'd get an error.

index.ts
const arr: string[] = []; // 👇️ const last: string const last = arr[arr.length - 1]; console.log(last); // 👉️ undefined // ⛔️ Cannot read properties of undefined (reading 'toUpperCase') console.log(last.toUpperCase());

You can use a type guard to get around this.

index.ts
const arr: string[] = []; // 👇️ const last: string const last = arr[arr.length - 1]; if (last !== undefined) { console.log(last.toUpperCase()); } // 👇️ Or use optional chaining console.log(last?.toUpperCase()); // 👉️ undefined
Our if condition explicitly checks that the last variable does not store undefined before calling the toUpperCase() method.

We can be sure that the last variable stores a string in the if block.

Alternatively you can use the optional chaining (?.) operator, which short-circuits, instead of throwing an error, if the reference is undefined or null.

I wrote a book in which I share everything I know about how to become a better, more efficient programmer.
book cover
You can use the search field on my Home Page to filter through all of my articles.