Arrow Function in JavaScript – Explained in Detail

JavaScript is a versatile and widely used programming language in the 21st century. Over the years, it has undergone many significant enhancements. One of the most notable additions in ECMAScript 6 (ES6) is the arrow function. In this article, we will explore the arrow function in ES6 in depth.

What is the Arrow Function in JavaScript?

The arrow function, added in ES6, is a concise and powerful alternative to regular functions in JavaScript. The arrow function, also known as the fat arrow function, Arrow function provides a shorthand syntax for writing function expressions. This function is very useful for writing shorter function expressions. 

Syntax

Breakdown the ArrowFunctionSyntax

• arrowName: This is the arrow function name.
• arg1, arg2, …argN: Arguments of the arrow function
• statements(s): Body of the function

Example

Let’s add two numbers in javascript.

1. Using the Regular JavaScript function

2. Using the Arrow function

We can also use the arrow function without any parameters. To denote the absence of parameters, you must use empty parentheses ().

Syntax

Program

Output

Arrow function with Parameters

The arrow function can take as many parameters as they want as a regular function.

Syntax

• Single parameter: param => {statements}
• Multiple parameters: (param1, param2,..) => {statements}

Examples:
Single Parameter

Output

Multiple Parameters

Output

Arrow Function in JavaScript with Default Parameters

The JavaScript arrow function also supports default parameters. JavaScript developers must initialise the default parameter when they define it in parenthesis.

Syntax of Arrow Function

The following program demonstrates the default parameters:

Program

Output

Using async with Arrow Function

JavaScript developers can also use the async keyword with the arrow function. This helps the developer make the function asynchronous.

The following program demonstrates the async with Arrow function:

Program

Note: Replace the URL parameter with your API link.

Advantages of JavaScript Arrow Function

• Concise Syntax: The arrow function provides a shorter and more readable way to write a function expression in a JavaScript Program. This reduced boilerplate makes the code cleaner and easier to understand, which is especially beneficial in large codebases.
• Implicit Return: An arrow function with a single expression allows you to omit the ‘return’ keyword and the curly braces in JavaScript, leading to a more compact syntax.
• No Duplicates Parameters Name: The arrow function follows strict rules regarding parameter names and does not allow duplicate parameter names. This prevents bugs and enhances code clarity by enforcing a consistent, error-free parameter.

Disadvantages of JavaScript Arrow Function

JavaScript arrow function offers several benefits, but they also come with certain disadvantages. Let’s discuss all those disadvantages.

• Cannot be used as Constructors: The arrow function cannot be used with the ‘new’ keyword. It means we cannot use the Arrow function as a constructor in JavaScript. This limitation of the arrow function makes them unsuitable for creating instances of objects.
• Hard to debug: The arrow function has concise syntax, but it can sometimes be harder to debug the arrow function in the large code base.
• Not Suitable for All Callbacks: While the arrow function is great for callbacks, there are cases where a traditional function might be more appropriate, especially when a developer callback needs its own ‘this’ context to access the arguments object.

Also read: JavaScript Interview Questions

Difference between Regular Function and Arrow Function

The following table differentiates the Regular function and Arrow function.

this keyword with Arrow Function

Let’s discuss the behaviour of the Arrow function with this keyword.

• The arrow function does not have its own context. Instead, it captures the value of the enclosing scope at the time it is created.
• The arrow function cannot be used as a constructor. If you attempt to use a new keyword with an arrow function. It will throw an error.
• The arrow function uses the lexical binding. That arrow function is a common choice for writing concise functional expressions.

Conclusion

In this article, we learned about the Arrow function in JavaScript. It provides a modern, concise way to write functions, with several advantages, such as shorter syntax. Arrow functions have a concise syntax, make handling ‘this’ easier by inheriting it from their surrounding scope, and are greatest for callbacks and functional programming. They cannot be used as constructors, and they are not suitable for all scenarios. By understanding the Arrow function, JavaScript developers can enhance the code readability and versatility in JavaScript programming.