The Array.at Method in JavaScript

Greetings, friends! Every year a new EcmaScript standard comes out, adding new features to the JavaScript language. In ECMAScript 2022, we got a new Array.at method that can be used to return an item in an array at a specific index. Let's look at an example!

const bestFood = ['pizza', 'donuts', 'potatoes'];

console.log(bestFood.at(0));
// OUTPUT: pizza

You may be scratching your head, wondering how this is useful. After all, we've been able to use the square bracket notation to do the same thing for years! The following code would be equivalent.

const bestFood = ['pizza', 'donuts', 'potatoes'];

console.log(bestFood[0]);
// OUTPUT: pizza

What makes the Array.at method stand out is the ability to access items in an array using a negative index, a feature that has existed in other languages such as Ruby and Python.

If we try using a negative index with the square bracket notation in JavaScript, we would get a value of undefined.

const bestFood = ['pizza', 'donuts', 'potatoes'];

console.log(bestFood[-1]);
// OUTPUT: undefined

However, the new Array.at method lets us access elements using a negative index!

const bestFood = ['pizza', 'donuts', 'potatoes'];

console.log(bestFood.at(-1));
// OUTPUT: potatoes

Using an index of -1 means we grab the last item from the array. If we used an index of -2, then we would grab the second-to-last item. The Array.at method is actually just syntactic sugar. We could have used the following code to get the last item from the array.

const bestFood = ['pizza', 'donuts', 'potatoes'];

console.log(bestFood[bestFood.length - 1]);
// OUTPUT: potatoes

This looks messy though! The Array.at method makes the code look much cleaner!

One interesting example of the Array.at method could be using it with a generator to grab elements from each end of an array in an alternating pattern. Keep in mind that the code I'm about to show can be done without the Array.at method. I just wanted to showcase an example of using it with a generator.

If you need a refresher on generators, I have a tutorial talking all about them! We can use a generator to lazily grab items from the front of the array and then alternate with the back of the same array without modifying the array.

function* getElementAndAlternateSide(array) {
  let arrayPosition = 0;
  let counter = 0;

  while (true) {
    if (arrayPosition === 0) {
      yield array.at(arrayPosition);
      arrayPosition = -1;
    } else {
      yield array.at(arrayPosition);

      if (Math.sign(arrayPosition) === 1) {
        arrayPosition = (arrayPosition + 1) * -1;
      } else {
        arrayPosition *= -1;
      }
    }

    counter++;

    if (counter === array.length) {
      return;
    }
  }
}

const fruit = ['apple', 'orange', 'banana', 'grape', 'watermelon'];

const generator = getElementAndAlternateSide(fruit);

for (const value of generator) {
  console.log(value);
}

/* OUTPUT:
apple
watermelon
orange
grape
banana
*/

In the code above, we are grabbing the first element of the array. Then, we are grabbing from the last item of the array. We then keep going further into the array from each side until we reach the very middle of the array. Since banana is in the middle of the array, it is logged last.

I'm not sure when we'd use this, but it seemed like a fun example to conjure up as I was writing this article. The Array.at method is a great way to grab elements from the back of an array using a negative index. The code will look a lot cleaner without seeing array[length - 1] everywhere!

Resources

• MDN: Array.at
• Generators Tutorial