Explore TypeScript Fat Arrow!

Of all of TypeScript's many notable features, the fat arrow is arguably one of the most powerful, yet it is also the most confusing to newbies to the TypeScript language. 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 one of the most powerful, yet it is also the most confusing to newbies to the TS language. For those reasons, it would be a valuable exercise to explore the fat arrow's role and usage in TS.

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. Anonymous functions save you from having to assign a name to the function, but the "function" part is still required. The fat arrow allows you to create a function sans the "function" keyword.

Here's a simple example:

It's standard practice in JavaScript to pass an anonymous function to the setTimeout() function:

setTimeout(function() {
console.log("setTimeout called!");
}, 1000);

In TS, we can re-write our function call as:

setTimeout(() => {
console.log("setTimeout called!")
}, 1000);

As you can see, we omitted the "function" keyword and inserted the fat arrow between the argument parentheses and opening curly brace.

It gets even better; if the function only contains a one-line expression, we can drop the curly braces as well to shorten the code even further to:

setTimeout(() => console.log("setTimeout called!"), 1000);

Arguments & Return Values

Although the fat arrow syntax dispenses with the "function" keyword, it keeps the parentheses in place for arguments. Consider this simple concat() function, which accepts two strings to join together:

Using Arrow functions with JS Libraries

Many libraries, such as jQuery, set the this context within their iteration methods so that you can reference the current object being iterated over. JQuery.each() is one such method. Therefore, should you wish to reference the enclosing object's context you have to store it in a local variable just as you would when not using an arrow function.

The code presented in this article is also available on Codepen, where you can see it in action.

Conclusion

As we saw here today, the TypeScript fat arrow provides several notable benefits to us developers. Master its syntax and writing code will be several orders of magnitude easier than ever before!

Rob Gravelle resides in Ottawa, Canada. His design company has built web applications for numerous businesses and government agencies. Email him.

Rob's alter-ego, "Blackjacques", is an accomplished guitar player, who has released several CDs and cover songs. His band, Ivory Knight, was rated as one of Canada's top hard rock and metal groups by Brave Words magazine (issue #92).

Advertiser Disclosure:
Some of the products that appear on this site are from companies from which QuinStreet receives compensation. This compensation may impact how and where products appear on this site including, for example, the order in which they appear. QuinStreet does not include all companies or all types of products available in the marketplace.