Some arrow function benefits with examples explained

We have talked about arrow functions in this article before and in this article we will take a look at arrow function benefits as we use them.

Shorter syntax

Obviously they are really short and neat and one you have them in your code it looks a lot shorter and cleaner. These are the general syntax:

// No parameters
() => { statements }
// single parameter
(param) => { statements }
param => { statements } 
// multiple parameters
(param1,param2,....paramN) => { statements }
// Returning objects
// enclose objects by parenthesis so they can be treated as objects
(param1,param2) => ( { id: 1 , key: value });

Which if we want to shorten it actually they look like this:

parameters => expression
// is equivalent to:
function (parameters){
  return expression;

A simple example

In your browser console type this in and see the result for yourself:

var double = num => num * 2<br/>double(2);<br/>// 4<br/>double(3);<br/>// 6

The great thing is with ES6 you get to skip function keyword and return keyword as well some parenthesis, braces and semicolons. This is another example:

var imgUrlArray = [
//ES5 (img){
     return img;
//ES6 => img);

Also this is an example with the map method in both versions:

// Expressions
// ES5
var plusOne = [1,2,3,4,5].map(function(num){ return num + 1 });
// ES6
var plusOne = [1,2,3,4,5].map(num => num + 1);  // implicit return

No “this” binding with arrow functions

Another important thing about arrow function benefits is that there is no binding to “this” keyword in them. It does not bind “this” like a regular function:

An arrow function does not newly define its own this when it’s being executed.The value of this is always inherited from the enclosing scope:

<em>// ES5</em>
function Counter(){
   this.seconds = 0;
   window.setInterval(function() {<br/>    this.seconds++;<br/>  }.bind(this), 1000);<br/>}
function Counter(){
this.seconds =0;
window.setInterval( () => this.seconds++,1000 );

You clearly see the difference and no binding of “this” in arrow functions. ES6 arrow functions don’t bind their own arguments either:

const funct = () => {
       console.log(arguments); <em>// This will throw reference error</em>
<em>// undefined</em>

Which is interesting and it is not something that we might be facing in code all the time.

How about constructors

Although we can use arrow functions in most cases but we need to be careful around constructors. Arrow functions cannot be used as constructors:

var Person= (param) => { = param;
var Boy = new Person('Ram');
<em>// Throws error that Person is not a constructor</em>

Therefor if we create a constructor with them it will throw an error like above.

And the new keyword

And they certainly cannot be used with new keyword aswell:

var func = () => { console.log("Hello"); };
var func1 = new func();
<em>// Uncaught TypeError: func is not a constructor</em>

These are main arrow function benefits and awarenesses that could be useful once coding around them. Thanks for reading.

© 2020
Azadeh Faramarzi

This site is created and maintined by Azadeh Faramarzi , A passionate developer, sport and code lover who loves to share and write when she has some time.