ES6 arrow functions and array.map [duplicate]

Question

I am trying to understand some shorthand ways of writing ES6. What I cannot fully understand in the example below is the last shorthand "({length})" - I comprehend that it does work, and that it gets the length property of the array, but not why. How could this syntax be applied in another scenario, not involving arrays?

//Declare array
var materials = [
  'Hydrogen',
  'Helium',
  'Lithium',
  'Beryllium'
];

//Long version - ok
materials.map(function(material) { 
  return material.length; 
});

//Arrow function - ok
materials.map((material) => {
  return material.length;
});

//Shorthand arrow function - ok
materials.map(str => str.length);

//What? :)
materials.map( ({length}) => length );

The example above is from the mozilla documentation of arrow functions. https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/Arrow_functions

developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/… — Andy
– Andy, Commented Feb 8, 2018 at 9:57

Ori Drori · Accepted Answer · 2019-07-15 05:57:35Z

46

The length is a property of strings, and can be destructured and returned in the map.

It's mostly the same as:

materials.map((str) => {
  const {length} = str;
  return length;
});

edited Jul 15, 2019 at 5:57

answered Feb 8, 2018 at 9:55

Ori Drori

196k32 gold badges243 silver badges233 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

ES6 arrow functions and array.map [duplicate]

1 Answer 1

Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Linked

Related