Search for a command to run...
JavaScript array provides many methods to deal with the data in it. The proposed at(index) method is going to be a game changer. Here is why.
Co-Founder, @CreoWis | Teacher, @tapaScript | Founder, @ReactPlay | YouTuber | Writer | Human
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 keyup, or change in 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).
Inside the 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.
https://js-array-at-method.netlify.app/
I hope it is clear now.
To answer this,
As the at(index) method is in the proposal now and not added to the JavaScript language yet, we can only use it with the help of a Polyfill.
As the Polyfil I am using is available as an NPM, I have installed it and imported it for using the at() method.
The beauty of it is, if there is support of it in JavaScript language in the future, you can just remove that import from the code along with the polyfill entry from 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.
Thanks Yogesh Chavan.
I hope the method gets added soon, it will save one from typing.
Thanks for sharing!
Great Blog Tapas Adhikary, at() was a really new thing to me. Thank you for this amazing blog! Keep up the great work!
Thanks a lot Savio Martin. Glad you found it helpful.
Traditional SSR is great, but it has a massive buffering problem. Let's look into the SSR Streaming and learn how it could be a game changer.
Learn how to build maintainable, reusable forms in React using design patterns like custom hooks, compound components, and context for scalable CRUD
Learn how JavaScript variables work, including let vs const, primitive and reference types, pass by value, and how JavaScript stores data in memory.
A beginner-friendly introduction to JavaScript covering what it is, how it works, and how to set up your JavaScript environment
Learn how the promises are handled internally using event loop. This concept is essentials to debug and work with async programming.
GreenRoots Blog - A Blog by Tapas Adhikary
186 posts
Educator | YouTuber | Building ReactPlay | Let's Connect
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,
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[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,
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) MethodThe 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.Like the 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 NewThe at(index) array method is a proposal at this moment. 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 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(⭐).
You may also like,