Easy JavaScript Part 6 : Arrow functions in JavaScript

The JavaScript arrow function is a shorter way of writing a function expression that was introduced in ECMAScript 6. Usually in JavaScript, you can create a function in two ways:

1. Function as statement
2. Function as expression

A function statement can be created as shown below:

function add(num1, num2) {
 
    var res = num1 + num2;
    return res;
}
 
var sum = add(7, 2);
console.log(sum);

The same function can be created as a function expression as shown below:

var add = function (num1, num2) {
 
    var res = num1 + num2;
    return res;
}
 
var sum = add(7, 2);
console.log(sum);

ECMA 2015 (or ECMA Script 6) introduced shorter syntax to write a function expression called the arrow function. Using the arrow function, you can write the function expression above as seen here:

var add = (num1, num2) => { return num1 + num2; }; 

As you see, writing a function expression using the arrow function is shorter. 

Basic syntax rules for arrow functions

 First, parameters should be passed in the small parentheses. You can create an arrow function with two parameters as shown below:

var add = (num1, num2) => { return num1 + num2; }; 

If there is only one parameter to be passed, then the parenthesis are optional and you can choose to omit them. You can create an arrow function with one parameter as seen below:

var add = num => { return num * 10; }; 

If there are no parameters, then you must have an empty parenthesis – it can’t be written without them. So you can write a function without a parameter using the arrow function as seen here:

var add = () => { console.log("hey foo") }; 

If there is a single expression or statement in the function:

1. Using parenthesis in the body is optional
2. Using a return statement is optional

You can rewrite the add function as seen below without using parenthesis in the function body and the return statement:

var add = (num1, num2) => num1 + num2;

You can also write a function without a parameter with a console statement as seen below:

var add = () => console.log("hey");  

Returning Object Literals

 The JavaScript arrow function can return an object literal as well. The only requirement is that you need to enclose a return object in small brackets, as shown below:

var foo = (name, age) => ({
 
    name: name,
    age: age
 
})
 
var r = foo("my cat", 22);
console.log(r);

As you see, the object to be returned is enclosed in small brackets; if you don’t do this, JavaScript won’t be able to differentiate between the object literal and the function body.

 

Arrow function supports rest parameter

 The JavaScript arrow function supports another ES6 feature: rest parameters. Learn more about rest parameters here. You can use the rest parameter with the arrow function as shown in the code listing below:

var add = (num1, num2, ...restparam) => {
    console.log(restparam.length);
    var result = num1 + num2;
    return result;
}
 
var r = add(67, 8, 90, 23);
console.log(r);

 

In the example seen here, when you use the rest parameter with the arrow function, you’ll get an output of 2 and 75 because the number of extra parameters passed are 2 and the summation of num1 and num2 is 75. 

The arrow function supports the default parameter

 Additionally, the JavaScript arrow function supports another ES6 feature: default parameters. We covered default parameters in detail here. You can use a default parameter with the arrow function as shown in the listing below:

var add = (num1 = 9, num2 = 8) => {
 
    var result = num1 + num2;
    return result;
}
 
var r = add();
console.log(r);

In the listing above, we are using default parameters with the arrow function. We are not passing any value while calling the function, and due to the default parameters, the output would be 17. 

How does “this” work in arrow function?

 The arrow function does not have its own this value. The value of this inside an arrow function is always inherited from the enclosing scope. In JavaScript, each function has its own this value, and that depends on how the function is being called. Let us consider the code listed below:

var Cat = {
 
    name: 'mew',
    canRun: function () {
 
        console.log(this)
        var foo = () => { console.log(this) }
        foo();
 
    }
};

Here, cat is an object literal that consists of:

1. The Property name
2. The method canRun

 In the canRun method, we created an arrow function foo, giving the value of this. Since the arrow function does not have its own value for this, it will take the value from the surrounding function and you’ll get: 

As you see, this value is the same in the canRun method and the arrow function foo. The arrow function gets the value of this from the inherited scope. If you’re unclear, keep in mind the following two rules:

1. Use the object.method to get a meaningful object as the value of this in the method.
2. For any other requirement, use the arrow function so the function won’t have its own value of this and it will inherit the value of this from the enclosing scope. 

Restrictions with the arrow function

 

There are few restrictions that apply with arrow functions to be aware of:

1. The arrow function does not have an arguments object
2. The arrow function cannot be used with the new operator so it can’t work as a constructor.
3. The arrow function does not have the prototype property.

 

If you try to use the arrow function as a constructor, you will get an exception. Consider the code listed below:

var foo = (name, age) => { name = name, age = age };
 
var f1 = new foo("cat", 6); 

Here, you’re trying to create object f1 by using the arrow function foo as a constructor, and JavaScript will throw you the following exception:

And when you try to print the prototype value of the arrow function, you will get undefined as your output:

var foo = (name, age) => { name = name, age = age };
 
console.log(foo.prototype);

This happens because the arrow function does not have a prototype property. Just remember: while the arrow function gives you shorter ways of writing function expressions, it does not have its own this value and cannot be used as a constructor.

In the next post of this "Easy JavaScript" series, you will learn about more important concepts in JavaScript, so stay tuned. Also, do not forget to check out Ignite UI for JavaScript/HTML5 and ASP.NET MVC, which you can use with HTML5, Angular, React, and ASP.NET MVC to create rich Internet applications. You can download a trial of all our JavaScript controls for free!