Click here to Skip to main content
65,938 articles
CodeProject is changing. Read more.
Articles / Languages / ES6

ES6: Arrow Function

4.50/5 (3 votes)
30 Nov 2017CPOL1 min read 17K  
Discusses about the usage of arrow function

Introduction

ES6 provides various features to make the developer's life easier. Arrow function is one of the extensively used features provided in ES6 or ECMAScript 2015.

Arrow function is the new ES6 syntax for defining a JavaScript function. It saves few keystrokes and also makes code look cleaner compared to ES5 syntax. It is often referred as ‘Fat Arrow Function’, and syntax is similar to C# anonymous function.

It uses => token referred as ‘maps to or goes to’ symbol to define the function.

The keywords function and return keywords are avoided when using arrow function. When the definition contains multi-line, then {  } curly braces are mandatory.

Let's see some of the examples to understand better.

Function Usage

Parameterless Function

ES5

JavaScript
function print()
{
   return 'Hello World'; // Output: 'Hello World'
}

ES6 

JavaScript
var print = () => 'Hello World';

Function with Parameter with one Parameter

ES5

JavaScript
function print(name)
{
   return name; 
}

print('Hello World!'); // Output: 'Hello World'

ES6 

JavaScript
var print = (name) => name;

Function with Parameter with Multiple Parameters

ES5

JavaScript
function getProduct(a, b)
{
   return a * b; 
}

getProduct(5,6); // Output: 30

ES6 

JavaScript
var print = (name) => name;

Object Literals

Arrow function can be used to return object literals containing variables and functions. But there are some differences in which this keyboard is processed. Arrow function uses lexical scoping(inner functions contain the scope of parent functions even if the parent function has returned) to determine the value of  ‘this’ keyword.

When using ES5, syntax, this keyword returns the current context but in case of arrow function, it returns the global context.

Let’s take an example,

JavaScript
var calculate = {
	var multiplier: 10;
	getProduct: function(){
	console.log(this);
}

calculate.getProduct(); //  Object { multiplier: 10}

}

Using Arrow function

JavaScript
var calculate = {
	var multiplier: 10;
	getProduct: () => console.log(this);
}

calculate.getProduct(); //  Window{}
}

Function returning function

JavaScript
Var calculate = {
	Var multiplier: 10;
	getProduct: function(){
		return () => console.log(this.multiplier);
}
}

calculate.getProduct()(); // 10

It returns 10 because getProduct is the function here and that’s the context we are working with.

Bind, Call and Apply methods don’t operate with arrow function, it ignores updating the object without claiming any error.

JavaScript
var calculate = {
	var multiplier: 10;
	getProduct: function(){
		return () => console.log(this.multiplier);
}
}

var newObject = {
	multiplier: 20
}

calculate.getProduct().bind(newObject); //   10

Dealing with Event Handler

In ES5, when dealing with an event handler, the calling object passes the current element’s context to the callee, which makes it difficult to access the global this.

JavaScript
document.addEventListerner('click', function(){
	    console.log(this); // #document
    }
)

document.addEventListener('click', () => console.log(this)); // Window{ }

 

License

This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)