DEV Community

Cover image for Tips: How to get last element of an array in javascipt
Sakib Ahmed
Sakib Ahmed

Posted on • Edited on

12 6 1 1 1

Tips: How to get last element of an array in javascipt

An array is a data structure, which can store a fixed-size collection of elements of the same data type

If you have worked with JavaScript arrays before, you might know that they can be destructured much like objects. This is most commonly used to extract the first value of an array or the values of an array with a known length.

But destructuring can go much further, as it allows you to extract the length property of an array. Add this to the fact that extracted variables can be used in the destructuring assignment itself and you can put together a one-liner to extract the last element of an array.

const arr = [1, 2, 3];
const { 0: first, length, [length - 1]: last } = arr;
first; // 1
last; // 3
length; // 3
Enter fullscreen mode Exit fullscreen mode

While this technique is interesting, it has a couple of caveats. First off, you have to extract the length property, which creates an additional variable for it. And secondly, it doesn’t have any significant performance advantages over other options, such as using Array.prototype.slice().

Another way we can do is, first we need array length then subtract 1 to get the last element index.

Take a look at code

const arr = [1, 2, 3];
const lastEle = arr[arr.length - 1]
lastEle; // 3
Enter fullscreen mode Exit fullscreen mode

arr.length = 3
3 – 1 = 2
arr[2] = 3

website DevvSakib.Me

Image of Timescale

🚀 pgai Vectorizer: SQLAlchemy and LiteLLM Make Vector Search Simple

We built pgai Vectorizer to simplify embedding management for AI applications—without needing a separate database or complex infrastructure. Since launch, developers have created over 3,000 vectorizers on Timescale Cloud, with many more self-hosted.

Read full post →

Top comments (12)

Collapse
 
miketalbot profile image
Mike Talbot ⭐
   const arr = [1, 2, 3]
   const lastElement = arr.at(-1)
Enter fullscreen mode Exit fullscreen mode
Collapse
 
muhammed_navas profile image
MUHAMMED NAVAS

it is making an error, arr.at is not a function.

Collapse
 
miketalbot profile image
Mike Talbot ⭐ • Edited

This is modern ES6 syntax, you will either need a modern browser/version of node or to use a transpiler like Babel.

This is the currently supported list:

caniuse.com/mdn-javascript_builtin...

Collapse
 
quocbahuynh profile image
Quoc Huynh Website

perfect

Collapse
 
mrcaidev profile image
Yuwang Cai

I especially love this feature when combined with optional chain, in TypeScript, e.g. unknownArr?.at(1) ?? 0. It makes the code so much cleaner.

Collapse
 
jonrandy profile image
Jon Randy 🎖️

Beat me to it

Collapse
 
yxsh profile image
Yash

well i always do

array[array.length - 1]
Enter fullscreen mode Exit fullscreen mode
Collapse
 
codemeop profile image
codemeop

i always use arr.length-1

Collapse
 
ludovic974 profile image
Ludovic974

arr.pop() ?????

Collapse
 
devvsakib profile image
Sakib Ahmed

pop() method removes the last element from an array and returns that element. This method changes the length of the array.

Collapse
 
schemetastic profile image
Schemetastic (Rodrigo) • Edited

Cool, i knew a little about the pop() method but now is more clear to me.

Here is a small example of this

var fruits = ['apples', 'oranges', 'grapes'];
var myLastFruit = fruits.pop();
console.log(fruits, myLastFruit);
Enter fullscreen mode Exit fullscreen mode

This would log:

Array [ "apples", "oranges" ] grapes
Enter fullscreen mode Exit fullscreen mode

As you can see 'grapes' now doesn't form part of the fruits variable but at the same time the pop() method returns the last item of the array. So clearly, if someone is going to use this method must be aware of this.

Collapse
 
gilfewster profile image
Gil Fewster
Comment hidden by post author

Some comments have been hidden by the post's author - find out more

The best way to debug slow web pages cover image

The best way to debug slow web pages

Tools like Page Speed Insights and Google Lighthouse are great for providing advice for front end performance issues. But what these tools can’t do, is evaluate performance across your entire stack of distributed services and applications.

Watch video