title: JSX: when are JavaScript expressions evaluated?
body: <p>After going through GatsbyJS and React tutorials I got the impression that JavaScript expressions are always evaluated when they are inside {} brackets in JSX. But now I'm looking at a JSX file inside a GatsbyJS starter repo, where it looks like the brackets cause different behavior:</p>
  
  <pre><code>const {
      data: {
        posts: { edges: posts },
        site: {
          siteMetadata: { facebook }
        }
      }
  } = props;
  </code></pre>
  
  <p>(<a href="https://github.com/greglobinski/gatsby-starter-hero-blog/blob/master/src/pages/category.js" rel="nofollow noreferrer">Source</a>)</p>
  
  <p>According to the tutorials, "facebook" should be evaluated as JavaScript and should return undefined, but that's not what's happening. Somehow we end up with a JavaScript object data.site.siteMetadata.facebook, which has some data. What's going on here? Why is "facebook" not evaluated as a JavaScript expression?</p>