title: Surprised that global variable has undefined value in JavaScript
body: <p>Today, I got completely surprised when I saw that a global variable has <code>undefined</code> value in a certain case.</p>
  <p>Example:</p>
  <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 value = 10;
  function test() {
      //A
      console.log(value);
      var value = 20;
  
      //B
      console.log(value);
  }
  test();</code></pre>
  </div>
  </div>
  </p>
  <p>Gives output as</p>
  <pre><code>undefined
  20
  </code></pre>
  <p>Here, why is the JavaScript engine considering global value as <code>undefined</code>? I know that JavaScript is an interpreted language. How is it able to consider variables in the function?</p>
  <p>Is that a pitfall from the JavaScript engine?</p>