title: code snippet and Behaviour of Arrow function and Normal function
body: <p>Can anyone help me understand the output of the below small es6 program?</p>
  
  <p>I know the difference between arrow function and normal function.</p>
  
  <p><strong>The Arrow</strong> function runs in parent's scope.
  <strong>The Normal</strong> function runs in its own scope.</p>
  
  <p>PFB the programme that's confusing me.</p>
  
  <pre><code>function Temp(){
    this.x =99;
    y =88;
    var z =77;
  
    setTimeout(function(){console.log(this.y+"::",this.x,"--",this.z),5});
    setTimeout(()=&gt;{console.log(this.y+"||",this.x,"--",this.z),5});
  
    doit(function (){ console.log(this.y+":",this.x,"_",this.z);})
    doit(()=&gt;{console.log(this.y+"|",this.x,"-",this.z);});
  
    function doit(task){
      this.i =0;
      task();
    }
  }
  
  new Temp();
  </code></pre>
  
  <p><strong><em>Output</em></strong></p>
  
  <pre><code>88:: undefined --undefined 
  undefined|| 99 --undefined 
  88: undefined -undefined 
  undefined| 99-undefined
  </code></pre>
  
  <p><strong><em>es6 Playground</em></strong></p>
  
  <p><a href="https://es6console.com/jnggv8d9/" rel="nofollow noreferrer">es6console link</a>
  Wanted to know the association between variable declaration and function (arrow/normal).</p>