Using Array.at() over Array[index]

In this article, I'll talk about why we might want to use Array.prototype.at() over Array[index] when accessing elements of an array.

Motivation

When accessing elements of an array, I used to use Array[index], similar to Array[1].
This is what I have been familiar with and what I learned when grabbing an element.

However, I recently received a code review from one of my coworkers, who said "Why don't you use Array.prototype.at() instead of relying on the index?"

My code was

const element = arr[1]

and he suggested

const element = arr.at(1)

This way was eye-opening to me because it looked pretty straightforward.

How to use Array.prototype.at()

Let me introduce you to what Array.prototype.at() is capable of.

It takes an integer and returns an element of an array.

For instance, you have an array

const arr = ["One", "Two", "Three"]

Then you call

arr.at(0) // returns "One"

That's straightforward.

It's equivalent to bracket notation, array[0]. You might wonder what's the deal. We are going to dive into the benefits of using this method.

Why Array[index] is not ideal?

Let's take a look at a couple of situations where we might want to use Array.prototype.at() method instead of Array[index].

Getting the last element of an array.

Suppose you have an array of strings such as

const sports = ["basketball", "baseball", "football"]

and when you want to pick up the last element of this array, "football" in this case you could write this code.

const lastElement = sports[sports.length - 1]

This is the correct way; however, you can write differently with Array.prototype.at() method.

const lastElment = sports.at(-1)

Don't you think it's way readable?

Type inference

In TypeScript, bracket notation doesn't give a possibility of being undefined.

const arr:string[] = []
const element = arr[0]
console.log(element) // undefined

The value, element is typed as string not string | undefined.

We expect TypeScript to give a compile error while writing code.

In general, we want to ensure the array has an element we try to access.

const arr:string[] = []
const element = arr[0]
if(typeof element === 'string') console.log(element) 

Weirdly, we are checking the element's type that TypeScript infers as string.

As you might wonder, we can do type assertions like

const element : string | undefined = arr[0]

however, this is the last thing we want to do because we don't have to assume ourselves writing the perfect code.

To solve this problem, we can do two things.

1. Write a type-guard function
2. Use noUncheckedIndexedAccess

noUncheckedIndexedAccess

Both ways work well but if you use Array.prototype.at(), you don't; have do both of them.

const arr:string[] = []
const element = arr.at(0) // string | undefined
console.log(element)

If you try to insert the value element to other values that typed as string, you'd get a compile error

const arrOfFruit = ["Apple", "Banana", "Grape"]
const arr:string[] = []
const element = arr.at(0)

arrOfFruit.includes(element)

Type 'string | undefined' is not assignable to type 'string'.
  Type 'undefined' is not assignable to type 'string'.

Conclusion

You can write more straightforward code with Array.prototype.at() and avoid putting extra functions and configs.

Array.prototype.at() explained in mozilla