# Why do you need to know about the JavaScript Array at() method?

The `array` in JavaScript is a collection of elements. The most important use of the array data structure is storing data and accessing it whenever needed. Arrays have methods to insert, remove, retrieve, traverse, and mutate elements. Today, we will learn about a newly proposed method `at(index)` and understand how it will help us.

I love junk food. Let's create an array with the junk food I am in love with,

```js
const junkFoodILove = ['🥖', '🍔', '🍟', '🍕', '🌭', '🥪', '🌮', '🍿'];
```
How would you access the pizza(🍕) element from the above array? The straightforward way to use the `square bracket` syntax with the index.

```js
junkFoodILove[3]; // 🍕
```
There is one small problem, though. With this approach, we can only traverse and pick elements from the beginning of the array. Here is the way to access the last element from the above array,

```js
const last = junkFoodILove[junkFoodILove.length - 1]; // 🍿
```
Wouldn't it be flexible if we have a way to traverse an array `from the end(backward)` too?

# Meet the `at(index)` Method
The `at(index)` method takes an integer(index) as an argument and returns the element at that index. It is similar to the `square bracket` syntax we have seen above but with a few differences.
- The `at(index)` method accepts both positive and negative numbers as an index.
- The negative index count back from the array whereas, the positive index count from the beginning as usual.

Like the `square bracket` method, the `at(index)` method returns `undefined` when the index is not found.

```js
const junkFoodILove = ['🥖', '🍔', '🍟', '🍕', '🌭', '🥪', '🌮', '🍿'];

junkFoodILove.at(0); // 🥖
junkFoodILove.at(3); // 🍕
junkFoodILove.at(-1); // 🍿
junkFoodILove.at(-5); // 🍕
junkFoodILove.at(-8); // 🥖
junkFoodILove.at(10); // undefined
```
Here is a fun demo using the `at(index)` method. Please notice the output when we change the index number.

![Array at method demo.gif](https://cdn.hashnode.com/res/hashnode/image/upload/v1621250026349/9NgG5M4Fh.gif)

> Do you want to try it out? Here is the link to access the demo: [https://js-array-at-method.netlify.app/](https://js-array-at-method.netlify.app/). So please give it a try.

# The `at(index)` method is Brand New
The `at(index)` array method is a [proposal at this moment](https://tc39.es/proposal-relative-indexing-method/#sec-array-prototype-additions). It means the support for this method is not yet added to the JavaScript programming language. Hence none of the browsers have added any support for the `at(index)` method yet. 

Don't be disappointed. It may get added soon. But until that happens, we can use [this polyfill](https://github.com/es-shims/Array.prototype.at) to use the `at(index)` method in our code. 

> Update: Google Chrome version 92 and Firefox version 90 supports the at() method.

That's all for now. Before we go, here is the **GitHub repository** to find the source code of the demo we have seen above. If you find it helpful, please don't forget to give a star(⭐).

%[https://github.com/atapas/js-array-at-method]

<hr />
Please let me know if you find this post helpful. Let's connect. You can follow me on [Twitter(@tapasadhikary)](https://twitter.com/tapasadhikary). Also, feel free to check my side-projects on [GitHub(atapas)](https://github.com/atapas).

You may also like,
- [5 valuable tips about the JavaScript array sort method](https://blog.greenroots.info/5-useful-tips-about-the-javascript-array-sort-method-ckfs2cifq00eju9s17dfy3jq8)
- [Why do you need to know about Array-like Objects?](https://blog.greenroots.info/why-do-you-need-to-know-about-array-like-objects-ckgsynazh07er06s18ppn32n0)
- [Build your JavaScript Muscles with map, reduce, filter, and other array iterators](https://blog.greenroots.info/build-your-javascript-muscles-with-map-reduce-filter-and-other-array-iterators-cjyo22miw000xzss1ydfqveib)
- [Ways to Empty an Array in JavaScript and the Consequences](https://blog.greenroots.info/ways-to-empty-an-array-in-javascript-and-the-consequences-cjwt45q9d002h2fs1kz5a77a2)