title: Why the same JavaScript Code giving different outputs?
body: <p>Here is a piece of code :</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>// -------- Sample 1 --------------- 
  var funcs = [];
  for (var i = 0; i &lt; 3; i++) {  
      funcs[i] = function() {  
          console.log("My value: " + i); 
      };
  }
  for (var j = 0; j &lt; 3; j++) {
    funcs[j](); 
  }
  
  // --------- Sample 2 --------------
  var fun = [];
  for(var i = 0;i &lt; 3; i++) {
      fun[i] = function() {
          console.log('values is '+ i);
      }
  }
  for(var i = 0; i &lt; 3; i++) {
      fun[i]();
  }</code></pre>
  </div>
  </div>
  </p>
  
  <p>Both the sample codes are same except the variable names. But it's giving different output. The output of the above code is :</p>
  
  <pre><code>My value: 3
  My value: 3
  My value: 3
  values is 0
  values is 1
  values is 2
  </code></pre>
  
  <p>Can any one figure out why its happening ?
  <a href="https://jsfiddle.net/zq2cfo45/1/" rel="nofollow noreferrer">DEMO</a></p>