title: ES6 destructing assignment
body: <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>function drawES2015Chart({size = 'big',cords = {x: 0,y: 0},radius = 25} = {}) {
    console.log(size, cords, radius);
    // do some chart drawing
  }
  
  drawES2015Chart({
    cords: {x: 18, y: 30},
    radius: 30
  });</code></pre>
  </div>
  </div>
  </p>
  
  <p>I found this snippet on Mozilla's developer site under <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Destructuring_assignment#Setting_a_function_parameter&#39;s_default_value" rel="nofollow noreferrer">Destructuring assignment</a>.<br>
  I was learning about ES6 destructuring assignment but have got bogged down here, I can't grasp how this function accepts an argument and sets default values?</p>