The easy way to access the last JavaScript array element
Tags: javascript, typescript, webdev
Published: 2024-03-29 18:32:15

In JavaScript, accessing the last element of an array is not as straightforward as in other languages. In Python, for example, you can use negative indexing to access the last element of an array. In JavaScript, however, using negative indexing with brackets `[]` doesn't work. Instead, you have to use brackets with the length of the array minus one.

```js
const frameworks = ['Nuxt', 'Remix', 'SvelteKit', 'Ember'];

// ❌ Doesn't work
frameworks[-1];
// undefined


// ✅ Works
frameworks[frameworks.length - 1];
// 'Ember'
```

To make array indexing more flexible, JavaScript introduced the `at` method. The `at` method allows you to get the element at a given index in an array, *with* support for negative indexing.

```js
const frameworks = ['Nuxt', 'Remix', 'SvelteKit', 'Ember'];

// 🔥 Supports negative indexing
frameworks.at(-1);
// 'Ember'
```

However, the `at` method is only an accessor method. This means that you can't use it to mutate the array. If you want to mutate the array, you have to use the bracket notation.

```js
const frameworks = ['Nuxt', 'Remix', 'SvelteKit', 'Ember'];

// ❌ Doesn't work
frameworks.at(-1) = 'React';
// Uncaught ReferenceError: Invalid left-hand side in assignment

// ✅ Works
frameworks[frameworks.length - 1] = 'React';
// ['Nuxt', 'Remix', 'SvelteKit', 'React']
```

A similar method for mutations that does support negative indexing has been introduced as well. The `with` method allows you to change the value of an element at a given index in an array. However, it returns a new array with the change, as it doesn't mutate the original array.

```js
const frameworks = ['Nuxt', 'Remix', 'SvelteKit', 'Ember'];

// ✅ Returns a copy with the change
frameworks.with(-1, 'React');
// ['Nuxt', 'Remix', 'SvelteKit', 'React']
```

## Browser support

The `at` function has baseline [browser support](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/at#browser_compatibility) on since 2022. Node has support in all current LTS versions.

If you're targetting older browsers, [a pollyfill](https://github.com/zloirock/core-js#relative-indexing-method) is available in core-js.

| Chrome | Edge | Firefox | Safari | Node.js |
| --- | --- | --- | --- | --- |
| ✅ 92 | ✅ 92 | ✅ 90 |	✅ 15.4 | ✅ 16.6.0 |

The `with` function is newer, having only baseline [browser support](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/with#browser_compatibility) since July 2023. Node includes support since version 20.

Luckily, there is also [a polyfill](https://github.com/zloirock/core-js#change-array-by-copy) available in core-js.

| Chrome | Edge | Firefox | Safari | Node.js |
| --- | --- | --- | --- | --- |
| ✅ 110 | ✅ 110 | ✅ 115 | ✅ 16 | ✅ 20.0.0 |

## Conclusion

This article introduced the `at` method to access elements in an array. It supports negative indexing, which comes in handy when selecting the last elements. The `with` method is a new syntax that allows you to change the value of an element at a given index. However, it returns a new array with the change, as it doesn't mutate the original array. Both methods are supported in modern browsers, but you might need a polyfill for older browsers.

Interested in content like this? Follow along on [~Twitter~ X](https://twitter.com/Ignace_Maes).