ES2022 brings at() method for array
Table of contents
What is ES2022?
For those who dont know, ES2022 OR EcmaScript 2022 is standard for scripting developed with the cooperation of Netscape and Microsoft and mainly derived from Netscape's JavaScript, the widely-used scripting language that is used in Web pages to affect how they look or behave for the user.
Its abbreviated to ES1, ES2, ES3, ES5, and ES6. Since 2016 new versions are named by year (ECMAScript 2016 / 2017 / 2018).
const fruits = ['apple','banana','mango','custard'];
Now, let say we want to access last element of fruits array, but what if you don't know length of array.
How will you do that? Well, there are different approaches to achieve this:
1. Using length property of array:
let lastElement = fruits[fruits.length - 1]; console.log(lastElement );
2. Using the slice() method:
let lastElement = fruits.slice(-1);console.log(lastElement );
3. Using the pop() method:
let lastElement = fruits.pop();console.log(lastElement);
But if you look into this methods, this methods main objective is not to output the last element of array but we are manipulating in such a way that its gives last element of array. Also, somewhere they have performance issue see here
So, ECMA2022 brings new method for us i.e., at(index). With at(index), you can get the element at the provided index. See example below
console.log(fruits.at(1)); // apple
console.log(fruits.at(-1)); // custard
console.log(fruits.at(2)); // mango
Working jsfiddle is here
Interestingly if you do fruits.at(-0) it gives you apple. So, merry go round.
Cheers! Follow Mohammed for more such contents.
Subscribe to my newsletter
Read articles from Mohammed Sabir directly inside your inbox. Subscribe to the newsletter, and don't miss out.
Written by
Mohammed Sabir
Mohammed Sabir
Currently, I am publishing the blog for Jan month updates in our technology fields, what is OOPS under the hoods in JavaScript?, Understand the flexbox CSS Under 5 min.