How to pick an array element more direcly with ES6


what is the ES6 equivalent solution to : myArr[0] & myArr[4] ?
The ES6 solution requires duplicating the array with letters in order to create the constants.
E.g : const [a, b, …arr] = [1, 2, 3, 4, 5, 7];

Is it possible to do this as directly as ES5 ?

let myArr = [1, 2, 3, 4, 5];
      let myFirstElement = myArr[0];
      let myLastElement = myArr[4];
      console.log(myFirstElement); // return this: 1
      console.log(myLastElement); // return this: 5

Hello there,

I suppose this is ES6-ish:

const [first, last] = [myArr[0], myArr[myArr.length-1]];

Does this answer your question?

“Does this answer your question?”
This is not not as simple as ES5 :face_with_thermometer:
So maybe for this e.g it’s better to use ES5.

For now, as I’m beginer, I don’t see what this kind of code, const [a, b, …arr] = [1, 2, 3, 4, 5, 7]; can be used for, probably for more complicated situations. :thinking:

I don’t see how this is a question of ES6+ vs ES5-

Pulling two elements out of different places in an array isn’t really a particularly ‘clean’ thing

1 Like

well destructuring in js is not as advanced as lets say python, where its not even called destructuring, you can simply work more fluidly with array/list elements, but it can be quite useful in many occasions.
With the example you give, you are able to pick the first few elements in the array and also have the rest of the array, minus the first two, which can be useful exactly in situations where you need those paritcular elements. Ofc you are not limited to those elements. You can also use commas and spaces, to “skip” some values. For example:

let arr=[1,2,3,4,5]
const [one, , ,four]=arr
console.log(one, four)  //returns 1, 4

Notice how i did not even bother pick the fifth element, it is simply left out. E.g. you can do const [one, two]=arr which will assign 1 to one and 2 to two respectively.

1 Like

You can do that, but I would discourage it as somewhat fragile. That’s a lot of hard coding.

I also don’t know that I would say that Python is ‘better’ with arrays/lists. Python is just different. List comprehension is just a different way to write a map, for example.

Different languages, different syntax.

1 Like

The es6 way might be one of two, i suppose - either just do the es5 way like you have, or create a functional tool for the job.

// ES6 arrow functions, just because
const nth = (position) => (array) => array[position];
const nthFromLast = (position) => (array) => array[array.length-(1+position)];

// these build from those, but will work 
//  with any array OR STRING
const first = nth(0);
const third =nth(4);
const last = nthFromLast(0);

console.log( last([3, 1.7, -5, 11, 58]) )

This isn’t pulling them out of the array, they’re still in that original array - you’re just referencing a particular position in that array.

Thank you all,
I never saw this kind of function with double arrow, anyway thank you again for your help. I will come back later about this topic if I don’t found cours about it.

It’s not an “ES6” thing, for accessing a specific value at a specific index you just do arr[0]. There isn’t really a “new” way of doing this. JavaScript is just JavaScript, they just add features but the language is still the same.

Aside from destructuring, the only real alternative is that if you want to be able to use negative numbers, you can use at (note that this does not work yet on Safari, either desktop or mobile [which means it just flat out doesn’t work on iPhones], which limits its usefulness):

> [1,2,3,4,5].at(-1)

Which means that if you want the last value in an array (common need) you don’t have to write:

> const arr = [1,2,3,4,5]
> arr[arr.length - 1]

And at works fine with anything else:

> [1, 2, 3, 4, 5].at(1)

Destructuring, like in Python (normally called unpacking instead), is a shortcut that just lets you assign specific elements in a structure (in JS, an array or a plain object) to variables all at once.

JS, even though how the language works is different, basically has feature parity with Python. It uses slightly different syntax (mostly lesseg no brackets needed in Python, JS doesn’t allow using _ to denote values you want to ignore, JS uses for...of not to take one of the cases where destructuring is often used). Only real difference is that you can’t do this:

first, *middle, last = [1, 2, 3, 4, 5]
# first is 1, middle is [2, 3, 4], last is 5
*first, last = [1, 2, 3, 4, 5]
# first is [1, 2, 3, 4], last is 5

JS uses the rest/spread operator (...thing) instead of Python’s star variables (*thing), but it has to be the last thing. These don’t work, they’ll just error:

[first, ...middle, last] = [1, 2, 3, 4, 5]
[...first, last] = [1, 2, 3, 4, 5] 

Can only do:

> [first, ...last] = [1, 2, 3, 4, 5]
> first
> last
[2, 3, 4, 5]

Here’s the same thing in earlier format:

function nth(position){
  // this is a closure, containing a private
  //  variable, position. We'll return a function
  //  that can access this private space:
  return function[array)(
    return array[position];

// third becomes a function expecting an
//  array or string.
const third = nth(4);

Note that this isn’t anything new, it’s simply hiding what you already do.

1 Like

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.