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,
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.
junkFoodILove; // 🍕
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,
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?
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.
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.
square bracket method, the
at(index) method returns
undefined when the index is not found.
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.
Do you want to try it out? Here is the link to access the demo: https://js-array-at-method.netlify.app/. So please give it a try.
at(index) method is Brand New
at(index) method yet.
Don't be disappointed. It may get added soon. But until that happens, we can use this polyfill to use the
at(index) method in our code. 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(⭐).
Please let me know if you find this post helpful. Let's connect. You can follow me on Twitter(@tapasadhikary). Also, feel free to check my side-projects on GitHub(atapas).
You may also like,
Interested in reading more such articles from Tapas Adhikary?
Support the author by donating an amount of your choice.
Thanks Tapas Adhikary for writing this. It was very helpful to know about this method. I am definitely going to use it instead of the conventional methods of accessing array elements.
Siddharaj Suryavanshi, Thanks, and glad that it was helpful.
As you had the follow-up questions on Twitter about it, I thought of answering them here to document everything at the same place. Thanks a lot for asking.
I have an input box to accept the index as a number. In the last two marked lines, I am collecting the number from the input box when someone
changein it. It will take care of both when someone types in the input box or use the up-down slider to change the number.
Once the number is collected in a variable, I pass the number to a method called
findAtIndex(index)method, I am first checking if the input in
NaN. It can happen when you make the input box empty. If it is
NaN, I am printing a blank output. Else, I am using the
at(index)method to access it using the index.
The number input box and triggering events to access the element using
at() was purely for demo purposes.
I hope it is clear now.
To answer this,
As the Polyfil I am using is available as an NPM, I have installed it and imported it for using the
package.json file. That's it.
I have mentioned the polyfill above under the section, "The at(index) method is Brand New".
Thanks a lot for asking and discussing.