title: ES6 arrow functions and array.map
body: <p>I am trying to understand some shorthand ways of writing ES6.
  What I cannot fully understand in the example below is the last shorthand &quot;({length})&quot; - 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?</p>
  <pre><code>//Declare array
  var materials = [
    'Hydrogen',
    'Helium',
    'Lithium',
    'Beryllium'
  ];
  
  //Long version - ok
  materials.map(function(material) { 
    return material.length; 
  });
  
  //Arrow function - ok
  materials.map((material) =&gt; {
    return material.length;
  });
  
  //Shorthand arrow function - ok
  materials.map(str =&gt; str.length);
  
  //What? :)
  materials.map( ({length}) =&gt; length );
  </code></pre>
  <p>The example above is from the mozilla documentation of arrow functions.
  <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/Arrow_functions" rel="nofollow noreferrer">https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/Arrow_functions</a></p>