JavaScript .at() method – retrieve array item by index

When working with arrays, one of the frequent thing we do is retrieving item from the array by it’s index. It is very simple and all we have to do is pass the index in square bracket notation. In JavaScript, this can be done a little easier using the handy .at() method. In this article let us see how we can use the .at() method in JavaScript and how it differs from the traditional square bracket notation.

Using square bracket notation

The most common way of retrieving array item is by it’s index using the square bracket notation. In the below example, I have retrieved the element in index 3 and the last element from the array data.

const data = ['a', 'b', 'c', 'd', 'e'];

// to retrieve item from index 3
const item_3 = data[3];
console.log(item_3);  // d

// to retrieve the last item
const last_item = data[data.length -1];
console.log(last_item);  // e

// to retrieve the second item from last
const last_sec_item = data[data.length -3];
console.log(last_sec_item);  // c

In JavaScript, following zero-based numbering, the indexes of an array starts from 0 and the last index will be array's length - 1. In the above example, I have retrieved the value at index 3 using the square bracket notation as shown in the line data[3]. I then used the indices data.length - 1 and data.length - 3 to retrieve the last item and second item from last. Using .at() method. To achieve this, we need the array’s length to retrieve items from the last element.

Using .at() method

After the proposal in tc39, the .at() method was introduced in JavaScript. Added to the prototype of built-in indexable objects such as array, string and typed-arrays, the .at() method is similar to the square bracket notation and retrieves items from array by their index. It takes a number that represents the index as input and returns the element at that index as output. If the index is invalid, it returns undefined.

const data = ['a', 'b', 'c', 'd', 'e'];

// to retrieve item from index 3
const item_3 = data.at(3);
console.log(item_3);  // d

It comes handy when retrieving items from the last. When using .at() method, we do not need the array’s length to determine the index from last.

const data = ['a', 'b', 'c', 'd', 'e'];

// to retrieve the last item
const last_item = data.at(-1);
console.log(last_item);  // e

// to retrieve the second item from last
const last_sec_item = data.at(-3);
console.log(last_sec_item);  // c

The .at() method supports relative indexing method. It retrieves the array items from the end when a negative number is passed. It simply counts index in reverse relative to the last index of the array.

Reference

• https://tc39.es/proposal-relative-indexing-method/
• https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/at

---

I hope this post was helpful 😊. If you find this post informative, support us by sharing this with fellow programmers in your circle 😀.

For any suggestions, improvements, reviews or if you like us to cover a specific topic, please leave a comment.
Follow us on twitter @thegeeksclan and in Facebook.
#TheGeeksClan #DevCommunity