title: Why can't I access a declared variable in the global scope
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>        var bar = {
              myName: 'bar',
              printName: function () {
                  console.log(this.myName)
              }
          }
          function foo() {
              let myName = 'foo'
              return bar.printName
          }
          let myName = 'outer'
          let _printName = foo()
          _printName()
          bar.printName()</code></pre>
  </div>
  </div>
  </p>
  <p>Why the result of the first function execution is undefined ? I thought the result would be 'outer', and why output 'outer' after changing let to var ? This is so confusing, please help me.</p>