The Array.prototype.at() method in vanilla JavaScript

Today, I wanted to quickly share the Array.prototype.at() method: how it works, and when you might use it.
Let’s dig in!
Getting an item from an array by its index Let’s imagine you have an array of wizards, like this.
let wizards = [ ‘Merlin’, ‘Gandalf’, ‘Ursula’, ‘Radagast’, ‘Morgana’ ]; Using bracket notation, you can get an item by its index (remember, array indexes start at 0).
// returns “Ursula” let ursula = wizards[2]; // returns “Morgana” let morgana = wizards[4]; Here’s a demo.


This content originally appeared on Go Make Things and was authored by Go Make Things

Today, I wanted to quickly share the Array.prototype.at() method: how it works, and when you might use it.

Let’s dig in!

Getting an item from an array by its index

Let’s imagine you have an array of wizards, like this.

let wizards = [
	'Merlin',
	'Gandalf',
	'Ursula',
	'Radagast',
	'Morgana'
];

Using bracket notation, you can get an item by its index (remember, array indexes start at 0).

// returns "Ursula"
let ursula = wizards[2];

// returns "Morgana"
let morgana = wizards[4];

Here’s a demo.

Doing the same thing with Array.prototype.at()

The Array.prototype.at() method does the same thing. Call it on the array, and pass in the index you want. It returns the matching item.

// returns "Ursula"
let ursula = wizards.at(2);

// returns "Morgana"
let morgana = wizards.at(4);

Here’s another demo.

So if it does the same thing, what’s the point? I’ve avoided looking at this method for a long time because it always seemed kind of pointless.

But recently, my friend Steve Griffith pointed out a great use for this method: grabbing items from the end of an array.

Getting items from the end of an array

To get an item from the end of an array with bracket notation, you need to get the length of the array, subtract the number back from the end you want to go, and pass that in.

// returns "Radagast"
let secondToLastWizard = wizards[wizards.length - 2];

With the Array.prototype.at() method, you just pass in the index as a negative integer.

// returns "Radagast"
let secondToLastWizard = wizards.at(-2);

If you’re a visual learner, Steve does a great job of explaining this in his video.

⏰ Last Chance! A new session of the Vanilla JS Academy starts on Monday. Join today and get 25% off registration.


This content originally appeared on Go Make Things and was authored by Go Make Things


Print Share Comment Cite Upload Translate Updates
APA

Go Make Things | Sciencx (2022-07-13T14:30:00+00:00) The Array.prototype.at() method in vanilla JavaScript. Retrieved from https://www.scien.cx/2022/07/13/the-array-prototype-at-method-in-vanilla-javascript/

MLA
" » The Array.prototype.at() method in vanilla JavaScript." Go Make Things | Sciencx - Wednesday July 13, 2022, https://www.scien.cx/2022/07/13/the-array-prototype-at-method-in-vanilla-javascript/
HARVARD
Go Make Things | Sciencx Wednesday July 13, 2022 » The Array.prototype.at() method in vanilla JavaScript., viewed ,<https://www.scien.cx/2022/07/13/the-array-prototype-at-method-in-vanilla-javascript/>
VANCOUVER
Go Make Things | Sciencx - » The Array.prototype.at() method in vanilla JavaScript. [Internet]. [Accessed ]. Available from: https://www.scien.cx/2022/07/13/the-array-prototype-at-method-in-vanilla-javascript/
CHICAGO
" » The Array.prototype.at() method in vanilla JavaScript." Go Make Things | Sciencx - Accessed . https://www.scien.cx/2022/07/13/the-array-prototype-at-method-in-vanilla-javascript/
IEEE
" » The Array.prototype.at() method in vanilla JavaScript." Go Make Things | Sciencx [Online]. Available: https://www.scien.cx/2022/07/13/the-array-prototype-at-method-in-vanilla-javascript/. [Accessed: ]
rf:citation
» The Array.prototype.at() method in vanilla JavaScript | Go Make Things | Sciencx | https://www.scien.cx/2022/07/13/the-array-prototype-at-method-in-vanilla-javascript/ |

Please log in to upload a file.



There are no updates yet.
Click the Upload button above to add an update.

You must be logged in to translate posts. Please log in or register.

Related Posts