Typescript : fat arrow & this scope relation

typescript function interface
typescript named parameters
arrow function in angular 6
typescript playground
typescript types
angular arrow function
typescript generics
typescript arrow function as parameter

I was practicing below code Code Reference : Link

   let obj = {
    name : "Cj",   
    sayLater : function(){
        setTimeout(function(){
          console.log("sayLater :> "+this.name); 
        },3000)
    },
    sayNow : function(){
      console.log("sayNow :> "+this.name); 
    },
    sayLaterFA : function(){
      setTimeout(() => console.log("sayLaterFA :> "+this.name) ,3000)
    },
    sayNowFA : () => console.log("sayNowFA :> "+this.name),
    sayLaterPureFatArrow : () => { setTimeout(() => console.log("sayLaterPureFatArrow :> "+this.name),4000) },
    sayNowPureFatArrow : () => { console.log("sayNowPureFatArrow :> "+this.name) }
  }



 obj.sayLater();             //Output : sayLater :> undefined
  obj.sayNow();               //Output : sayNow :> Cj
  obj.sayLaterFA();           //Output : sayLaterFA :> Cj 
  obj.sayNowFA();             //Output : sayNowFA :> Cj
  obj.sayLaterPureFatArrow(); //Output : sayLaterPureFatArrow :> undefined 
  obj.sayNowPureFatArrow();   //Output : sayNowPureFatArrow :> undefined

Can anyone explain me why my output is undefined though I am using fat arrow function


Functions · TypeScript, We make it clear which is the return type by using a fat arrow ( => ) between the parameters and the return type. As mentioned before, this is a required part of  In the above example, sum is an arrow function. (x:number, y:number) denotes the parameter types, :number specifies the return type. The fat arrow => separates the function parameters and the function body. The right side of => can contain one or more code statements. The above arrow function sum will be converted into the following JavaScript code.


The this value for those arrow functions is the value of this in the context where the functions were created. That's not the object you're constructing; it's whatever this is where that object initializer code exists.

In other words, inside

let obj = {
  // whatever
};

the value of this does not change from what it is before or after that initialization. The language does not provide a way to refer to an "under construction" object in an initializer block.

Explore TypeScript Fat Arrow!, In this tutorial, Rob Gravelle explores the fat arrow's role and usage. Of all of TypeScript's (TS) many notable features, the fat arrow is arguably  Fat Arrow Basics. The fat arrow (=>) was named as such to differentiate it from the thin arrow (->). It was introduced as part of the ECMAScript 6 (ES6) specification, which TS extends, as a shorter way to define anonymous functions. Not surprisingly, functions that use the fat arrow are referred to as fat arrow functions. The impetus to the advent of the fat arrow function was a simple one: in JavaScript you tend to type the word "function" quite a lot.


There is no this referring to the object a arrow function is in in an arrow function,

An arrow function expression has a shorter syntax than a function expression and does not have its own this[...]

This will always refer to the object you are calling from, i.e. window in a browser

Fat Arrow Functions • Angular, What if we wanted to pass an argument to the function? We can re-write the below normal function Duration: 8:13 Posted: Oct 6, 2016 Summary. The new fat arrow function syntax in ES6 is far more than just a slightly shorter way of writing anonymous functions. It has finally solved the thorny issue of stabilising the value of this that has affected javascript since the start and caused so many work arounds to be discussed and applied in code.


undefiend is shown as output, since this refers to the scope inside the setTimeout() function where name isn't available, hence, undefined

I usually do it something on the lines of

ayLater : function(){ let instance = this;
    setTimeout(function(){
      console.log("sayLater :> "+instance.name); 
    },3000)
},

Hope this answers :)

TypeScript Arrow function, We can call it fat arrow (because -> is a thin arrow and => is a "fat" arrow). It is also called a Lambda function. The arrow function has lexical scoping of "this"  An Arrow Function a.k.a. Fat Arrow Function, are concise way of writing a function expression. In the following example we have two ways of writing a function in ES5 and ES6 style of coding. Arrow function with no parameters and no return value. To create an arrow function with no parameters and no return value we use the given syntax.


What's the meaning of "=>" in TypeScript? (Fat Arrow), Perhaps you are confusing type information with a function declaration. If you compile the following: var MakePoint: () => {x: number; y: number  About Arrow functions in ES6. ES6 | ES2015 | Typescript | ES6 Tutorial | ES2015 Tutorial | Typescript Tutorial | ES6 Tutorial for Beginners | ES2015 Tutorial for Beginners | Typescript tutorial


'this' in TypeScript · microsoft/TypeScript Wiki · GitHub, Local Fat Arrow. In TypeScript (shown here with some dummy parameters for explanatory reasons):. var x = new SomeClass();  What Are Arrow Functions? Arrow functions – also called “fat arrow” functions, from CoffeeScript (a transcompiled language) — are a more concise syntax for writing function expressions. They


typescript-book/arrow-functions.md at master · basarat/typescript , Another commonly used feature is the fat arrow function ()=>something . The motivation for a fat arrow is: You don't need to keep typing function; It lexically  The second part is the return type. We make it clear which is the return type by using a fat arrow ( =>) between the parameters and the return type. As mentioned before, this is a required part of the function type, so if the function doesn’t return a value, you would use void instead of leaving it off. Of note,