title: Difference Between : and = with javascript function
body: <p>I have two javascript codes which look same each other.</p>
  
  <p>The first one is like below resulting 2, 101, 102 in a row.</p>
  
  <pre><code>&lt;script&gt;
      var val = 100;
      var counter = {
          val : 1,
          func1 : function() {
              this.val += 1;
              alert('func1() this.val: ' + this.val);
              func2 = function() {
                  this.val += 1;
                  alert('func2() this.val: ' + this.val);
                  func3 = function() {
                      this.val += 1;
                      alert('func3() this.val: ' + this.val);
                  };
                  func3();
              };
              func2();
          }
      };
      counter.func1();
  &lt;/script&gt;
  </code></pre>
  
  <p>The following code is the second one. The Result is 2,3,4</p>
  
  <pre><code>&lt;script&gt;
      var val = 100;
      var counter = function() {
          val = 1;
          func1 = function() {
              this.val += 1;
              alert('func1() this.val: ' + this.val);
              func2 = function() {
                  this.val += 1;
                  alert('func2() this.val: ' + this.val);
                  func3 = function() {
                      this.val += 1;
                      alert('func3() this.val: ' + this.val); 
                  };
                  func3();
              };
              func2();
          };
          func1();
      };
      counter();
  &lt;/script&gt;
  </code></pre>
  
  <p>Q.Just in my opinion, this difference comes from the marks : =. Is that right?</p>
  
  <p>Q.Technically, is this difference related to Lexial Environment?</p>
  
  <p>Q.Are those two marks supposed to have difference scope or closure ?</p>
  
  <p>Q.If the above questions are not the reason, then what could be the reason?</p>