• JavaScript Video Tutorials

JavaScript - Arrow Functions

Arrow Functions

The arrow functions in JavaScript allow us to create a shorter and anonymous function. Arrow functions are written without "function" keyword. The JavaScript arrow functions are introduced in ES6.

Before ES6, we can define a JavaScript function with function declaration or function expression. The function expressions are used to define anonymous functions. The arrow functions allow us to write the function expressions with shorter syntax.

Let's look at the below syntax to write a function expression −

const varName = function(parameters) {
    // function body
};

The above function expression can be written as an arrow function −

const varName = (parameters) => {
    // function body
};

Here the "function" keyword is removed and after parenthesis we added "=>".

Syntax

The syntax to use the arrow function in JavaScript is as follows.

const varName = (p1, p2, ... pN) => Expression;
OR
const varName = (p1, p2, ...pN) => {
    // function body
};

Here the parameters p1, p2, …, pN are optional. We can use the variable name followed by pair of parentheses to invoke the arrow function.

Arrow Function with Single Statement

When the arrow function contains a single statement, we don't need to write the 'return' keyword and braces (curly brackets).

const add = (x, y) => x +y;

Please note, we can always write an arrow function with return keyword and braces.

const add = (x, y) => {return x + y};

Example

In the example below, the arrow function contains a single statement, so we don't need to use the curly braces or return statement.

<html>
<body>
   <p id = "output"> </p>
   <script>
      const divide = (x, y) => x / y;
      document.getElementById("output").innerHTML = divide(10, 5);
   </script>
</body>
</html>

Output

2

Arrow Function with Multiple Statements

When the function body contains multiple statements, we should always use the 'return' statement to return a value. Also we should use the curly brackets.

Example

In the example below, the arrow function contains multiple statements, so we need to use the braces or return statement.

<html>
<body>
   <p id = "output"> </p>
   <script>
      const divide = (x, y) => {
         let res = x / y;
         return res;
      };
      document.getElementById("output").innerHTML = divide(10, 5);
   </script>
</body>
</html>

Output

2

Note when we use block body using braces, we must use return statement.

Arrow Functions Without Parameters

The parameters p1, p2, …, pN, in the above syntaxes are options. We can write an arrow function without any parameters.

const greet = () => "Hello World!";

We can also write using block body using braces and return keyword −

const greet = () => {return "Hello World!";};

Example

<html>
<body>
   <p id = "output"> </p>
   <script>
      const greet = () => "Hello World!";
      document.getElementById("output").innerHTML = greet();
   </script>
</body>
</html>

Output

Hello World!

Arrow Function with Parameters

Example: Arrow function with a single parameter

The below code demonstrates that when you need to pass a single parameter to the function, you don't need to write parameters in the pair of parenthesis.

<html>
<body>
   <p id = "output"> </p>
   <script>
      const divide = x => 20 / x;
      let res = divide(2);
      document.getElementById("output").innerHTML = 
      "The value returned from the arrow function is: " + res;
   </script>
</body>
</html>

Output

The value returned from the arrow function is: 10

Example: Arrow function with multiple parameters

We pass the multiple parameters to the arrow function expression in the code below. When the body of the arrow function contains multiple statements, we need to write it inside the curly braces and use the return statement to return the value.

<html>
<body>
   <p id = "output"> </p>
   <script>
      const sum = (a, b, c, d) => {
         let sum = a + b + c + d;
            return sum;
      };
      let res = sum(10, 30, 45, 60);
      document.getElementById("output").innerHTML = 
      "The sum of 10, 30, 45, and 60 is: " + res;
   </script>
</body>
</html>

Output

The sum of 10, 30, 45, and 60 is: 145

Arrow Function as an Expression

The arrow function can easily be used as an expression due to its shorter syntax.

Example

In the below code, we use the ternary operator, and based on the boolean value of the 'isMul' variable, we assign the arrow function expression to the 'func' variable.

After that, we use the 'func' variable to call the arrow function stored in that.

<html>
<body>
   <p id="output"> </p>
   <script>
      let isMul = true;
      const func = isMul ? () => {
         let res = 5 * 5;
         document.getElementById("output").innerHTML +=
		 "The multiplication value is: " + res + "<br>";
      } : () => {
         let res = 5 + 5;
         document.getElementById("output").innerHTML +=
         "The sum value is: " + res + "<br>";
      };

      func();
   </script>
</body>
</html>

Output

The multiplication value is: 25

Arrow Function with Default Parameters

Example

The below code explains how programmers can pass the default parameters to the arrow function. It is similar as we pass default parameters to the standard function definition.

<html>
<body>
   <p id = "output"> </p>
   <script>
      const output = document.getElementById("output");
      let isMul = true;
      const mul = (a = 10, b = 15) => a * b;
      output.innerHTML += "mul(5, 8) = " + mul(5, 8) + "<br>";
      output.innerHTML += "mul(6) = " + mul(6) + "<br>";
      output.innerHTML += "mul() = " + mul() + "<br>";
   </script>
</body>
</html>

Output

mul(5, 8) = 40
mul(6) = 90
mul() = 150

Benefits of Using Arrow Functions

Here, we have explained the benefits of using the arrow functions.

  • Shorter syntax − The arrow function decreases the code size to define the function.

  • Implicit return − To return the resultant value of the expression from the arrow function containing only a single statement, developers don't need to use the return keyword.

  • Ease to use as expression − The arrow function can be easily used as an expression.

Limitations of Using Arrow Function

There are some limitations of arrow functions, which we have explained below.

  • No Arguments − The arrow function can't have an arguments object.

  • No prototype − The arrow function can't have a prototype property as it is stored in the variable as an expression.

  • No new keyword − The arrow function can't be used with the new keyword to create its object.

Advertisements