Understanding Arrow Functions in JavaScript
Tags: Arrow Functions, Function, Javascript Development, Javascript Tips, JavaScript

Understanding Arrow Functions in JavaScript

A dive into what arrow functions are, how they are different from regular functions, as well as the lexical scope and their shorthands. Taran Follow Nov 29, 2020 · 6 min read

ES2015 (or ES6) has added arrow function expressions to JavaScript. These functions have shorter syntax than their predecessor (this being the function expressions) and they are roughly the equivalent of lambda functions in Python or blocks in Ruby. Arrow functions are anonymous functions with a special syntax that accept arguments and operate in the context of their enclosing scope. They provide two main benefits over regular functions; first, their syntax is more concise, and second, managing this in arrow functions is easier.

In this article, I will discuss the differences between the syntax of function expressions, function declarations and arrow functions, lexical scope, arrow functions as object methods, and some shorthands for using them.

Syntax

Before delving into the arrow function syntax, let’s start with regular functions.

Regular Function Syntax (Function Declaration)

A regular function declaration begins with the function keyword, followed by the name of the function. It is then followed by a set of parenthesis which is used for optional parameters. The code of the function is contained in curly brackets. The function in the example below adds two numbers and returns their sum as a result:

Before any code is executed, function declarations are loaded into the execution context. This is known as hoisting, meaning that you call the function before its declaration.

Running the above code outputs the following:

Function Expression Syntax

Unlike the function declaration, function expressions are not loaded into the execution context. The function usually has no name and is assigned to a variable. Let’s take a look at the example below, where we have assigned an anonymous function to the add constant:

Function expressions are not hoisted, meaning that (if we call the function before its declaration) it will throw an error:

The code in the example above will throw the following error:

These are also known as anonymous functions because they do not have a named identifier. For example:

This will output the following:

Arrow Function Syntax

As with function expressions, arrow functions are not hoisted (meaning that we aren’t able to call them before the declaration). The syntax of arrow functions starts with a named variable. After the name comes an = operator, then open parentheses () inside of which optional parameters are declared. After the parentheses, => operator is declared followed by curly brackets containing the code of the function. For example:

Lexical this

Inside arrow functions, the value of this is determined by the surrounding scope. Before looking into how arrow functions handle this , let’s first take a look at how traditional functions handle this .

Traditional Function (this)

In the following person object, there are two properties; name and hobbies along with two methods printName() and printHobbies() .

Executing student.printName() will return ‘Max’ because, in the printName() function, we have returned this.name . Here, the value of the this keyword is the student object. That is why this.name returns the name property.

However, in the student.student.printHobbies() , we have mapped the hobbies property which is an array of strings. printHobbies() method prints the hobbies of the student object. However, upon executing student.printHobbies() we do no get the output that we expect.

this.name did not print the value of the name, which indicates that this (within the anonymous function passed into the map method) does not refer to the student object.

Arrow Function (this)

The value of this in the arrow function is determined based on the lexical scope. The inner function that called in the map method can now access the properties of the outer object, which is in this example the student object:

This will give the following output:

Arrow functions are not as effective as the object method

The way that arrow functions use the lexical scoping for this is not as effective as methods defined inside the objects. Let’s take a look at the example below where the printName method is declared using the arrow function.

Inside the printName method, this should refer to the student object. However, as we have defined the method using the arrow function and because the object does not create a new lexical scope, arrow function will look beyond the value of this .

Calling the printName method will give the following output:

The arrow function will look for this in the outer scope because objects do not create a lexical scope. So this will refer to the window in this example. As the firstName property does not exist on the window object, it will return as undefined.

Arrow Function Shorthand's

Omitting Curly Brackets

First, let’s declare a simple arrow function that returns the sum of two numbers:

The body of the regular function is contained within a block using curly {} brackets. But arrow functions are introduced as an implicit return which allows us to omit the curly brackets and the return keyword:

Please note: In the example above, we have a one-line return statement after the arrow function. If you aren’t able to return a one-line return statement then you will have to use the normal block body syntax.

Returning an Object using one-line syntax

In case you need to return an object, the same syntax will require that you wrap the object in parenthesis, as follows:

Omitting Parentheses Around a Single Parameter

If there is only one parameter passed to the arrow function then you can remove the parenthesis from a single parameter. In the following example the function takes a single parameter and returns the parameter divided by two:

Please note: If a function does not take any parameters then the parenthesis will be required.

Conclusion

In this article, you have reviewed the arrow function syntax, the difference between the arrow function and regular functions, lexical scope in arrow functions, and some shorthand for using the arrow functions. I hope that you have found this article helpful, thanks for reading!