title: why the value of variable doesn't show as expected?
body: <p>there is a high vote answer of lexical scope in StackOverflow(or some other q&amp;a website, I'm not sure) describing as</p>
  
  <pre><code>function a() {
  
      var x
      x = 3
      function b() {
          x = 4
      }
      function c(){
          var x
          b()
      }
  
      c()
      print(x)
  }
  </code></pre>
  
  <p>the answer in general is like </p>
  
  <pre><code>if(final output is 4):
      it is lexical scope
  elif(final output is 3):
      it's dynamic scope
  </code></pre>
  
  <p>I make a conclusion:</p>
  
  <ol>
  <li><p>so lexical scope has nothing to do with where to invoke the function, but where to define the function.</p>
  
  <p>if lexical scope relates to where to invoke the function:
      b() is invoked in c(), final output should be 3</p></li>
  <li><p>normal variable all follows lexical scope rule</p></li>
  </ol>
  
  <hr>
  
  <p>following is my code</p>
  
  <pre><code>let a = "before f()"
  
  function f(){
      console.log(a) 
  }
  
  f() --&gt;output: before f()
  
  a = "before b() after f()"
  
  f() --&gt;output: before b() after f()
  </code></pre>
  
  <p>My Question:
  why invoking f() the second time it's <code>before b() after f()</code>, not <code>before f()</code>?</p>
  
  <p>this is the process I think</p>
  
  <pre><code>invoking f() the second time
  go to function definition and try to find value of a
  go to lexical scope where it's out and up to function definition 
  find a = "before f()"
  </code></pre>