ES2022 brings at() method for array
imsabir

imsabir @msabir

About: I am web developer with expertise in cutting edge technologies, technical writer, technical recruiter. I believe in #Gratitude. ✨✨✨

Location:
Somewhere on Earth, Universe 🌎
Joined:
Feb 22, 2022

ES2022 brings at() method for array

Publish Date: Feb 25 '22
10 10

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'];
Enter fullscreen mode Exit fullscreen mode

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 );
Enter fullscreen mode Exit fullscreen mode

  1. Using the slice() method:
let lastElement = fruits.slice(-1);console.log(lastElement );
Enter fullscreen mode Exit fullscreen mode

  1. Using the pop() method:
let lastElement = fruits.pop();console.log(lastElement);

Enter fullscreen mode Exit fullscreen mode

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, somewere 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
Enter fullscreen mode Exit fullscreen mode

Working jsfiddle is here :

Interestingly if you do fruits.at(-0) it gives you apple. So, merry go round.

Cheers!
Follow @msabir for more such contents.

Comments 10 total

  • imsabir
    imsabirFeb 25, 2022

    If you want blog on any topic of JS, comment it out, I will surely add it in my bucket. :)

  • imsabir
    imsabirFeb 26, 2022

    Yes definitely but there is also one more thing, the older method were not meant to get you value from index, it's just we made the work around for that, and second point, in realistic scenario we might don't have array of 1000 elements (in realistic scene)

  • imsabir
    imsabirFeb 26, 2022

    Yes indeed

  • Devvrat Mishra
    Devvrat MishraFeb 26, 2022

    fruits[0] seems far better than fruits.at(0) but who knows if there's a specific application for .at()

    • imsabir
      imsabirFeb 26, 2022

      Try fruits[-1]. This will not work. Here at() comes handy.

    • Peter Vivo
      Peter VivoFeb 28, 2022
      fruits?.[0]
      
      Enter fullscreen mode Exit fullscreen mode
  • Peter Vivo
    Peter VivoFeb 28, 2022

    thanks for test, interesting result

Add comment