Arrow function in JS

Source

Preface

Hi there!, I’m Gurkirpal Singh, currently enrolled in Google’s Reskilling India Scholarship Programme’s Mobile Web track. This article is my submission for “Beginner’s Guide to Mobile Web Development” activity task set 2. As the title suggests I’ll be talking about why arrow functions are cool. But first..

What are arrow functions

“Arrow functions were like rocket fuel for the functional programming explosion in JavaScript.” — Eric Elliott

Arrow functions, also called “fat arrow functions”, were a new feature added in ES6. Simply they are a shorthand way of writing a function but there’s a catch: they don’t work exactly like traditional functions. Why you ask? We’ll be discussing that later after we learn how to write arrow functions in JavaScript.

Syntax

Let’s start by taking a normal function and then convert it to an arrow function. We’ll be looking at this simple function and convert it to an arrow function.

codepen.io link

To convert it to an arrow function simply remove function then place a => just before the function block starts.

codepen.io link

That already looks cleaner than before. We can make further improvements by removing extra code. Next we make the function “one liner” by removing the total variable and return the result directly.

Explore on codepen.io

But wait, there’s more!. We can further shorten the code here due to some special conditions.

1. You can remove the return keyword since it’s the only statement inside function body. The single statement will will automatically be returned after evaluation. This type of return is called implicit return. This is extremely useful in certain situations. For eg. you can pass an arrow function to .map()
2. The {} brackets can also be dropped for same reasons.

Explore on codepen.io

Wow! this looks really neat. We compressed 4 lines of code into a single line while also making it much more readable.

In addition to that we have also special cases for when we have different numbers of arguments.

Arrow functions with single arguement

Let’s consider the following function that has only one argument.

https://codepen.io/gpalsingh/pen/zRXZXR

Since there is only one argument you can drop the () brackets.

Explore on codepen.io

Arrow functions with no arguments

If there are no arguments present you cannot just start the function with a => arrow. The following code will throw error “Unexpected token =>”.

Explore on codepen.io

There are two ways to solve this problem.

Provide empty pair of brackets

You can just use () without any arguments.

Explore on codepen.io

This is how you would want to handle the no argument case most of the times.

Provide a “throwaway variable”

Another alternative for the () brackets is the_ (underscore) sign.

Explore on codepen.io

_ is also called thethrowaway variable because it acts as a variable but is (most of the times) never used inside the function. So in the end the function acts as a no argument function. You can also use this in case you want to ignore any argument passed into the function.

A few things you should remember in addition to what we already discussed:

1. You need to provide the return statement if you arrow function has more than one statements. This is called explicit return.
2. You need to enclose the function body in {} braces if it has multiple statements.

Examples of usage of arrow functions

Following are some examples showing how arrow functions can be used in different cases

As argument to .map()

Explore on codepen.io

The above example uses arrow function that takes a number and prints it’s square in the console.

Similarly you can use it with .filter()

Explore on codepen.io

In the above example we use an arrow function to filter out all the even numbers in numbers.

Advantages of arrow functions

1. Concise.
2. Lexical scoping — Arrow functions have a lexical this while normal functions have a dynamic this . What this means is that in arrow functions the value of this is determined by the surrounding scope as opposed to how they are called as in normal functions. The advantage is that you no longer need to use .bind(this) or have to use that = this . Other variables that are determined in a lexical way include arguments , super , this and new.target .

Limits of arrow functions

While being very useful and full of features arrow functions aren’t perfect in a sense. Now we discuss some limitations while using arrow functions.

1. Cannot be used as constructors: Because arrow functions don’t have a prototype property or other internal functions, if you use new on an arrow function, it’ll throw an error.
2. Cannot be used as generators: There are no workarounds to use arrow functions as generators. Using yield inside arrow function will throw error.
3. No arguments variable: You can use the rest parameter instead.
4. No line breaks after parameters: After the parameters list and before writing the fat arrow (=> ) you cannot add a line break. The following code will result into an error

Explore on codepen.io

If you run into such problems traditional functions are your only option.

Sources

Here I list the articles I referred to while writing this post. You can find additional information from these since I’ve tried to keep my post as brief as possible.

• Arrow functions — http://exploringjs.com/es6/ch_arrow-functions.html#sec_syntactic-pitfalls-arrow-functions
• ES6 Arrow Functions: The New Fat & Concise Syntax in JavaScript — https://www.sitepoint.com/es6-arrow-functions-new-fat-concise-syntax-javascript/
• JavaScript ES6 Functions: The Good Parts — https://medium.freecodecamp.org/es6-functions-9f61c72b1e86
• Javascript ES6 — Arrow Functions and Lexical `this` — https://hackernoon.com/javascript-es6-arrow-functions-and-lexical-this-f2a3e2a5e8c4
• JavaScript: Arrow Functions for Beginners — https://codeburst.io/javascript-arrow-functions-for-beginners-926947fc0cdc
• ES6 Arrow functions Sample — https://googlechrome.github.io/samples/arrows-es6/
• Do ES6 Arrow Functions Really Solve “this” In JavaScript? — https://derickbailey.com/2015/09/28/do-es6-arrow-functions-really-solve-this-in-javascript/
• Arrow Functions in JavaScript — https://tylermcginnis.com/arrow-functions/
• Arrow functions — https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/Arrow_functions
• An Introduction to JavaScript ES6 Arrow Functions — https://developer.ibm.com/node/2015/09/21/an-introduction-to-javascript-es6-arrow-functions/
• JavaScript Arrow Functions Introduction — http://wesbos.com/arrow-functions/