Stop using Array[index], use Array.at() instead
Tags: javascript, webdev, beginners, programming
Published: 2022-05-01 12:55:12

`Array.at()` is a brand new Javascript array method that solves a lot of common issues with the standard `Array[index]` method of accessing elements in an array. With it, we finally have the ability to do Negative Indexing natively in Javascript. 

## Negative Indexing
Negative Indexing is the ability to use negative numbers as index to access elements in arrays from the end rather than the start. For example if you want the last element in an array named `arr`, you would want to do `arr[-1]`. Sadly, this doesn't behave the way we want it to in Javascript because the `[]` syntax does not belong to arrays and string, but rather to all objects. 

The `[]` syntax with objects means getting the property of an object with that key. Since arrays and strings are object, this applies to them as well. Under the hood, arrays and strings assign each element to a key that matches with its current index. 

```js
// When it comes to indexing, 'arr' behaves exactly like 'obj'
const arr = ['cat', 'dog', 'fish', 'bird'];

const obj = {
   0: 'cat',
   1: 'dog',
   2: 'fish',
   3: 'bird'
};
```

So `arr[-1]` already is valid Javascript, but instead of returning the last element, it tries to return the value of the "-1" key of the array, which is usually `undefined`. 

## Existing Workarounds
Currently, there are a few ways of getting this behavior to work correctly. The first is to subtract the negative index from the length of the array. 

```js
const pets = ['cat', 'dog', 'fish', 'bird'];
const lastPet = pets[pets.length - 1];

console.log(lastPet); // Prints out 'bird'
```
This works and is the way that most developers get around this limitation, but there are a few issues:
- The name of the array is called twice and it's generally pretty lengthy.
- This can't be used for values that have not been assigned to a variable.  
- This can't be used to get the last item of the return value of a function unless it's first store it in a temporary variable.

```js
['cat', 'dog', 'fish', 'bird'][ **what do you put here** - 1];

const a = () => ['cat', 'dog', 'fish', 'bird']; 
a()[ **What do you out here** - 1];
```

The other method is to use `Array.slice()` which has negative indexing built in.
```js
const pets = ['cat', 'dog', 'fish', 'bird'];
const lastPet = pets.slice(-1)[0];

console.log(lastPet); // Prints out 'bird'
```

This actually resolves many of the issues of the previous method, but introduces a few new ones: 

- The syntax is not immediately understandable, specifically the trailing `[0]` since slice returns an array. 
- A temporary array is created from the desired index to the end of the array which is immediately discarded. 

## Array.at()

That is why `Array.at()` was implemented. It works exactly how `Array[index]` with positive numbers, but correctly implements negative indexing for negative numbers.

```js
const pets = ['cat', 'dog', 'fish', 'bird'];
const lastPet = pets.at(-1);

console.log(lastPet); // Prints out 'bird'
```
This provides a cleaner syntax than the previous methods and doesn't suffer from any performance penalties. It is currently available in most modern browsers with Polyfills available if you need it. 

If you want to learn more, check out the [MDN](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/at) reference for it. You can also read the [original proposal](https://github.com/tc39/proposal-relative-indexing-method) for it.