JavaScript Arrow Function

JavaScript Arrow function or arrow function expression is a shorter alternative to the regular JavaScript function definition syntax. It was introduced in ECMAScript2016 and it makes defining a function just like writing a simple expression.

An arrow function can have optional parameters and a return statement along with the function defintion enclosed within curly braces { }. Arrow function expressions provide a compact syntax but this can make the code less readable. Also as they are less a function and more of an expression, they are not very well suited for using for defining methods. And they cannot be used as constructors.

JavaScript Arrow Function: Syntax

The arrow function expression supports multiple different syntaxes and we will see a few of them.

(param1, param2, …, paramN) => { statements } 

/* or for a single parameter */

(param1) => { statements } 

/* in case of no parameter */

() => { statements }

In case we have a single parameter, using the parethesis () is optional, we can also define the arrow function expression like this:

param1 => { statements }

And if we have a single expression to return some output, we can even skip the curly braces {} like this:

param1 => { return expression; }
/* can be written as*/
param1 => expression

The above syntax also works with multiple parameters.

Line Breaks:

An arrow function cannot have a line break between its parameters and its arrow but we can have a line break after the arrow. For example:

var someFunc = (a, b, c)
  => 1;
// SyntaxError: expected expression, got '=>'

var someFunc = (a, b, c) => 
  1;
// No Sytax Error

var someFunc = (a, b, c) => (
  1
);
// No Sytax Error

Lets have a look at some code examples.

JavaScript Arrow Function Example:

To see the difference between the normal JavaScript function and the arrow function expression. Let's start by creating a regular function and then we will define it's arrow function as well.

// Example of a regular function
let add = function(a,b) {
    return a+b;
}

let sum = add(10,20);
console.log(sum);

30

Now let's change the above function into arrow function expression:

// Arrow function
let add = (a,b) => { return a+b; }

let sum = add(10,20);

console.log(sum);

30

As we discussed in the syntax above, we can further break down the above arrow function expression, removing the curly braces too, as this one has a single statement code.

// Arrow function
let add = (a,b) => a+b;

let sum = add(10,20);

console.log(sum);

Now, let's take a few more examples covering different scenarios.

JavaScript Arrow Function without Parameter:

Just like a regular function, arrow function can be non-parameterized too. Let's take an example to see how we can implement it.

// Arrow function - without parameter
show = () => { return "Hello from arrow function"; }

// Calling function
let msg = show();

console.log(msg);

Hello from arrow function

Again, in this example too, we can even remove the curly braces {} and the return keyword, like we did in the example above this one.

JavaScript Arrow Function with Default Parameters:

In JavaScript arrow functions we can also specify the default values for the parameters while defining the arrow function expression. Let's take an example to understand this concept.

// Arrow function - with default parameters

let sum = (a,b=1) => a+b;

// Calling function
let result = sum(10);
console.log(result);

11

Remember, you can not provide default value for the first parameter only, and not provide default value for the second one. Either provide default value for both or provide default value for just the second one.

JavaScript Arrow Function without Parenthesis:

In case, you have single parameter in your function then you can omit the parenthesis around the parameter. Let's take an example:

// Arrow function without parenthesis
let show = a => "You entered: " + a

console.log(show(10));

You entered: 10

JavaScript Arrow Function: Live Example

Well, now lets have a live example to understand arrow functions. Do feel free to modify the code and change the arrow functions defined below to practice.

So in this tutorial we learned how we can use the arrow function expression in JavaScript to write functions in a shorthand format which is simple to define and use but at times this can lead to your code becoming confusing for others to understand.