title: ES6 arrow function and lexical scope inside a function
body: <pre><code>let a = () =&gt; (
    {
      name:"Anna",
      func: () =&gt; console.log(this.name)
    }
  )
  
  let b = () =&gt; (
    {
      name:"Brian",
      func: function(){ console.log(this.name) }
    }
  )
  
  let c = function(){
    return(
      {
        name:"Charlie",
        func: function(){ console.log(this.name) }
      }
    )
  }
  
  let d = function(){
    return(
      {
        name:"Denny",
        func: () =&gt; console.log(this.name)
      }
    )
  }
  </code></pre>
  
  <p>These 4 functions have mix &amp; matched function syntax. When calling the nested function, the func: with arrow function returns blanks.</p>
  
  <p><code>a().func() // returns blank</code><br>
  <code>b().func() // returns "Brian"</code><br>
  <code>c().func() // returns "Charlie"</code><br>
  <code>d().func() // returns blank</code></p>
  
  <p>I thought the arrow function retain the scope of "this"? The behavior seems to be the opposite of what I've thought. When did the arrow function went out of scope?</p>