0

Got the piece of code from:

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/Arrow_functions

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

I can understand this:

var x = materials.map(function(material) {
    return material.length;
});

console.log(x);

Result: [8, 6, 7, 9]

Arrow function example:

var z = materials.map( ( {length} ) => length );
console.log(z);

Result: [8, 6, 7, 9]

In the arrow function I don't understand what is going on.

The length param of the arrow function callback in map() should be the current value (from my understanding of map()) yet, => length somehow returns the length of the string, and not the current value.

How is this even possible, what is going on when executing ({length}) => length?

Robert
  • 10,126
  • 19
  • 78
  • 130
  • 1
    This has nothing to do with arrow functions, you can do the same thing with a traditional function. It's object destructuring. – Barmar Jan 04 '18 at 02:32
  • @robert-rocha Bottom of my answer (to duplicate question) tackles this precise problem! https://stackoverflow.com/a/48351652/4722345 – JBallin Jan 20 '18 at 01:22

0 Answers0