Click here to Skip to main content
13,660,419 members
Click here to Skip to main content
Add your own
alternative version

Stats

5.7K views
2 bookmarked
Posted 30 Nov 2017
Licenced CPOL

ES6: Arrow Function

, 30 Nov 2017
Rate this:
Please Sign up or sign in to vote.
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

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

ES6 

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

Function with Parameter with one Parameter

ES5

function print(name)
{
   return name; 
}

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

ES6 

var print = (name) => name;

Function with Parameter with Multiple Parameters

ES5

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

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

ES6 

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,

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

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

}

Using Arrow function

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

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

Function returning function

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.

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.

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)

Share

About the Author

Aniket Agrawal
Engineer
India India
No Biography provided

You may also be interested in...

Comments and Discussions

 
QuestionRegarding arrow function Pin
Mou_kol10-Dec-17 20:32
memberMou_kol10-Dec-17 20:32 
QuestionYour ES6 example in the "Function with Parameter with Multiple Parameters" section is wrong Pin
Sacha Barber30-Nov-17 22:07
mvpSacha Barber30-Nov-17 22:07 

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Praise Praise    Rant Rant    Admin Admin   

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.

Permalink | Advertise | Privacy | Cookies | Terms of Use | Mobile
Web01-2016 | 2.8.180810.1 | Last Updated 1 Dec 2017
Article Copyright 2017 by Aniket Agrawal
Everything else Copyright © CodeProject, 1999-2018
Layout: fixed | fluid