In this post, I'm going to present the new array method
The main benefit of the new method is accessing elements from the end of the array using a negative index, which isn't possible using the regular square brackets syntax
Before I go on, let me recommend something to you.
The usual way to access an array element by index is the use of square brackets
const fruits = ['orange', 'apple', 'banana', 'grape'];const item = fruits;item; // => 'apple'
array[index] evaluates to the array item located at
In most cases, the square brackets syntax is a good way to access items by a positive index (
>= 0). It has a simple and readable syntax.
But sometimes you'd like to access the elements from the end, rather than from the beginning. For example, let's access the last element of the array:
const fruits = ['orange', 'apple', 'banana', 'grape'];const lastItem = fruits[fruits.length - 1];lastItem; // => 'grape'
fruits[fruits.length - 1] is how you can access the last element of the array, where
fruits.length - 1 is the index of the last element.
The difficulty is that the square brackets accessor doesn't allow a straightforward way to access items from the end of the array, and also doesn't accept a negative index.
Fortunately, a new proposal (at stage 3 as of January 2021) brings the method
at() to arrays (as well to typed arrays and strings), and solves many limitations of the square brackets accessor.
In simple words,
array.at(index) accesses the element at
index argument is a positive integer
>= 0, the method returns the item at that index:
const fruits = ['orange', 'apple', 'banana', 'grape'];const item = fruits.at(1);item; // => 'apple'
index argument is bigger or equal than the array length, then, like the regular accessor, the method returns
const fruits = ['orange', 'apple', 'banana', 'grape'];const item = fruits.at(999);item; // => undefined
The real magic happens when you use a negative index with
array.at() method — then the element is accessed from the end of the array.
For example, let's use the index
-1 to access the last element of
const fruits = ['orange', 'apple', 'banana', 'grape'];const lastItem = fruits.at(-1);lastItem; // => 'grape'
Here's a more detailed example of how
array.at() method accesses elements:
const vegetables = ['potatoe', 'tomatoe', 'onion'];vegetables.at(0); // => 'potatoe'vegetables.at(1); // => 'tomatoe'vegetables.at(2); // => 'onion'vegetables.at(3); // => undefinedvegetables.at(-1); // => 'onion'vegetables.at(-2); // => 'tomatoe'vegetables.at(-3); // => 'potatoe'vegetables.at(-4); // => undefined
Check out the demo.
negIndex is a negative index
< 0, then
the element at index
array.length + negIndex. Here's an example:
const fruits = ['orange', 'apple', 'banana', 'grape'];const negIndex = -2;fruits.at(negIndex); // => 'banana'fruits[fruits.length + negIndex]; // => 'banana'
and get the array item at that index.
However, accessing items from the end using the regular accessor isn't convenient since it doesn't accept negative indexes. So, for example, to access the last element of the array you have to use a workaround expression:
const lastItem = array[array.length - 1];
Fortunately, the new array method
array.at(index) lets you access the array elements by index as a regular accessor. Moreover,
array.at(index) accepts negative indexes, in which case the method takes elements from the end:
const lastItem = array.at(-1);
Just include the array.prototype.at polyfill into your application, and start using