title: Using ES6 spread operator on an object that is returned from a function
body: <p>I am using a function to convert hex codes to rgb values, it's one I found on this site and all is working perfectly.
  The function takes in a string as an parameter, and returns an obj with <code>r,g,b</code> properties and their associated values.</p>
  
  <p>I am then taking these values and printing them inside of a React functional component. 
  I just wanted to tidy up the syntax and avoid:</p>
  
  <pre><code>rgbValue={'rgb=(' + hexToRgb('#000').r + ', ' + hexToRgb('#000').g + ', ' + hexToRgb('#000').b + ')'}
  </code></pre>
  
  <p>and replace it with something like:</p>
  
  <pre><code>rgbValue={ 'rgb=(' + ...hexToRgb('#000') + ')'}
  </code></pre>
  
  <p>Hoping that this would return the <code>r,g,b</code> values from the object and the end result would be:</p>
  
  <pre><code>rgbValue={'rgb=(0,0,0)'}
  </code></pre>
  
  <p>However, this is not working as expected. I do not know if this is a logic issue or a sytnax error.
  I am new to using the spread operator so I am not overly familiar with it but is there a way to achieve this using my current setup? </p>
  
  <p>JS function being used to show what is returned:</p>
  
  <pre><code>function hexToRgb(hex) {
    // Expand shorthand form (e.g. "03F") to full form (e.g. "0033FF")
    var shorthandRegex = /^#?([a-f\d])([a-f\d])([a-f\d])$/i;
    hex = hex.replace(shorthandRegex, function(m, r, g, b) {
      return r + r + g + g + b + b;
    });
    var result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex);
    // return rgb values as properties on an object
    return result ? {
      r: parseInt(result[1], 16),
      g: parseInt(result[2], 16),
      b: parseInt(result[3], 16)
    } : null;
  }
  </code></pre>