Arrow Functions
Arrow Functions
Lovingly called thefat arrow (because-> is a thin arrow and=> is a fat arrow) and also called alambda function (because of other languages). Another commonly used feature is the fat arrow function()=>something. The motivation for afat arrow is:
You don't need to keep typing
functionIt lexically captures the meaning of
thisIt lexically captures the meaning of
arguments
For a language that claims to be functional, in JavaScript you tend to be typingfunction quite a lot. The fat arrow makes it simple for you to create a function
varinc= (x)=>x+1;this has traditionally been a pain point in JavaScript. As a wise man once said "I hate JavaScript as it tends to lose the meaning ofthis all too easily". Fat arrows fix it by capturing the meaning ofthis from the surrounding context. Consider this pure JavaScript class:
functionPerson(age) {this.age= age;this.growOld=function() {this.age++; }}var person=newPerson(1);setTimeout(person.growOld,1000);setTimeout(function() {console.log(person.age); },2000);// 1, should have been 2If you run this code in the browserthis within the function is going to point towindow becausewindow is going to be what executes thegrowOld function. Fix is to use an arrow function:
The reason why this works is the reference tothis is captured by the arrow function from outside the function body. This is equivalent to the following JavaScript code (which is what you would write yourself if you didn't have TypeScript):
Note that since you are using TypeScript you can be even sweeter in syntax and combine arrows with classes:
Tip: Arrow Function Need
Beyond the terse syntax, you onlyneed to use the fat arrow if you are going to give the function to someone else to call. Effectively:
If you are going to call it yourself, i.e.
thenthis is going to be the correct calling context (in this exampleperson).
Tip: Arrow Function Danger
In fact if you wantthisto be the calling context you shouldnot use the arrow function. This is the case with callbacks used by libraries like jquery, underscore, mocha and others. If the documentation mentions functions onthis then you should probably just use afunction instead of a fat arrow. Similarly if you plan to usearguments don't use an arrow function.
Tip: Arrow functions with libraries that usethis
thisMany libraries do this e.g.jQuery iterables (one examplehttps://api.jquery.com/jquery.each/) will usethis to pass you the object that it is currently iterating over. In this case if you want to access the library passedthis as well as the surrounding context just use a temp variable like_self like you would in the absence of arrow functions.
Tip: Arrow functions and inheritance
Arrow functions as properties on classes work fine with inheritance:
However, they do not work with thesuper keyword when you try to override the function in a child class. Properties go onthis. Since there is only onethis such functions cannot participate in a call tosuper (super only works on prototype members). You can easily get around it by creating a copy of the method before overriding it in the child.
Tip: Quick object return
Sometimes you need a function that just returns a simple object literal. However, something like
is parsed as ablock containing aJavaScript Label by JavaScript runtimes (cause of the JavaScript specification).
If that doesn't make sense, don't worry, as you get a nice compiler error from TypeScript saying "unused label" anyways. Labels are an old (and mostly unused) JavaScript feature that you can ignore as a modern GOTO (considered bad by experienced developers 🌹)
You can fix it by surrounding the object literal with():
Last updated