JavaScript

What are arrow functions in JavaScript

One of the best features that modern JavaScript has provided us is the arrow function denoted through “=>”. Also known as “fat arrow” comes with various benefits in programming. It comes with “this” binding and using these makes the code look more organized and shorter.

These functions are the reason why arrow functions are strictly preferred over other types of function declaration. But with these perks also comes some drawbacks as well.

In this article we’ll learn how to write functions using arrow functions in JavaScript, and how to convert your simple functions to arrow functions. But before jumping into that, let’s understand some basic concepts about arrow functions in JavaScript.

Arrow Functions in JavaScript

ES6 provided us with one of the most important and useful features that is an Arrow Function which helps in declaration of functions in a simpler way and reduces the lines of code. The syntax of arrow function is mentioned below:

Syntax:

let functionName= (p1, p2, ...pN) => {
    statement(s)
}

Here,

  • functionName: The name of the function
  • p1, p2,…. pN: These are the parameters of the functions
  • statement(s): The lines of javascript code inside the body of the function.

Using these we can convert our complex code into a more precise and compact version. Following are some of the features it provides:

Implicit Return

Through this the use of any kind of parentheses, functions or the return keywords become optional, allowing the implicit return. Here’s an example:

//arrow function
example.onclick = (x, y, z) => this.doSomething()
 
//equivalent to simple function
example.onclick = function(x, y, z) {
  return this.doSomething();
}.bind(this);

Through the use of arrow functions, it’s simply allowing only a single expression and returning it implicitly.

“this” binding : It automatically binds the keyword “this” to the code surrounded by arrow functions. For example:

var x = this;
example.onclick = function() {
  x.doSomething();
};

to

example.onclick = () => this.doSomething()

Moreover, It provides a shorter, simpler and more compact version of your code.

How To Use Arrow Functions in JavaScript

In JavaScript, we can use arrow functions with single, multiple or even no parameters. They’re useful for one line action, shrinking multiple line code into fewer lines and hence saving space. Let’s understand this with example:

JavaScript Arrow Function with no Parameters

Following syntax is used when the arrow function works with zero parameters.

Syntax:

() => { statement(s) }

Here, the statement is the body of the function containing lines of code.

Example:

let print = () => console.log("hello");
print();

In the above example, we’re simply printing “hello” using the arrow function. As you can see, the arrow functions do not have any name so they are also known as anonymous functions. Ultimately, we can not call or reuse them again when needed as they do not have any name but if we have to call or reuse the arrow functions, we need to assign them to a variable and then call them using that variable name.

Here, we’ve assigned it to the variable “print” and called the variable in the second line.

Output:

JavaScript Arrow Function with single Parameter

In case of a single parameter, following syntax is used:

Syntax:

(p) => { statement(s) }

Or, you can remove the parentheses and rewrite it like:

p => { statement(s) }

Here, the statement is the body of the function containing lines of code and p is the parameter passed.

Example:
In this example arrow function is being used as an argument of the map() method that converts a string array into an array containing string’s length:

let days = ['Monday', 'Tuesday', 'Wednesday'];
let lengths = days.map(days => days.length);

console.log(lengths);


Output:

JavaScript Arrow Function with multiple Parameters

Following syntax is used when passing two or more parameters:

Syntax:

(p1, p2, ..., pn) => statement;

Here, the statement is the body of the function containing lines of code and p is the parameter passed. In this the “=> statement” is equivalent to:

=> { return statement; }

In the below example a sort() method is used without using arrow function, to sort numbers in descending order:

let num = [3,1,5];
num.sort(function(a,b){
    return b - a;
});
console.log(num);

This can be transformed into an arrow function

let num = [3,1,5];
num.sort((a,b) => b - a);
console.log(num);

In the above example, the function has a single expression “b-a” so it simply returns the result of the expression. But in case of block syntax, you have to mention the return keyword.

Output:

In this way, we can transform any function into an arrow function. But, there are two points that need to be kept in mind while working with arrow functions:

  • Arrow function should not be used for the creation of methods inside objects
  • Arrow functions cannot be used as a constructor.

Conclusion

Arrow functions are the easiest way to declare any functions and it reduces the lines of codes, without affecting the functionality of the code. In this article we learned that arrow functions are extremely useful, how they convert a complex syntax and lengthy line of code into more compact and simpler code. Moreover, it’s not necessary to name an arrow function unless you’ve to call or reuse the function.

At first, arrow functions might seem difficult but with time as you understand the concept, they become easier and convenient to implement. Hence, converting your code to fewer lines with simpler logic.

About the author

Shehroz Azam

A Javascript Developer & Linux enthusiast with 4 years of industrial experience and proven know-how to combine creative and usability viewpoints resulting in world-class web applications. I have experience working with Vue, React & Node.js & currently working on article writing and video creation.