(JavaScript )=> Arrow functions

This post is meant to summarise some of the things someone new to JavaScript and arrow functions needs to know. I do not go into the advanced JS concepts in this post and its meant to quickly demystify the arrow functions

The Syntax(mostly from MDN)

The general syntax
(param1, param2, …, paramN) => { statements }
If there is only one expression you can leave off the {}
(param1, param2, …, paramN) => expression
If there is no parameters you use only the () and they become compulsory
() => { statements }
If there is only one parameter then the parenthesis are optional
singleParam => { statements }

To visualise this syntax better, lets compare it to the ‘old’ javascript code

var printing = function(values){
  console.log('Print out the values', values);
}
var printing = values => console.log('Print out the values', values);
//remember the parenthesis are optional on single parameters

Return key word

By default arrow functions return the result of the expression hence return keyword is optional — this applies only to single line arrow function.

var multiply = (a,b) => a * b // returns the result
var multiply = (a,b) => {a*b} // returns undefined
var multiply = (a,b) => {return a*b} //returns the result

whenever we introduce the {} in the arrow function its considered as a multi line and we have to explicitly return

Object Literal

What will happen when I call the myFunction below?

var myFunction = () => { age: 23 }

if we intended to return the object {age: 23} this wont work as the arrow function assumes {} marks the beginning and end of the function. So how do we return object literals? Simple, wrap the object around parenthesis :-)

var myFunction = () => ({ age: 23 })

The ‘this’ keyword

The this is as confusing to me up to this moment but I can try explain something different in it when using arrow functions. Consider the example given in MDN

function Person() {
  // The Person() constructor defines `this` as an instance of itself.
  this.age = 0; // age in this case is for that person instance
  setInterval(function growUp() {
    // In non-strict mode, the growUp() function defines `this` 
    // as the global object, which is different from the `this`
    // defined by the Person() constructor.
    this.age++;
  }, 1000);
}

Inside the function Person() we have another function called growUp(), the problem is that inside the growUp() function the this keyword refers to a different object and not the Person() object meaning the age is not same as age defined above in person.

The arrow function does not create its own this hence we can use it to refer to the this of person()

function Person(){
  this.age = 0;

  setInterval(() => {
    this.age++; // |this| properly refers to the person object
  }, 1000);
}

Dont use arrow functions for….

1. constructors

Arrow functions will throw an error if you call new on them

var Foo = () => {};
var foo = new Foo(); // TypeError: Foo is not a constructor

2. prototypes

Arrow functions do not have prototype properties

var Foo = () => {};
console.log(Foo.prototype); // undefined

Where I have used arrow functions

I use arrow functions a lot in ionic and angular applications that we work on at Craft Academy , look at how may arrow functions we have in here:

postComment() {    
  let comment = { body: this.newComment };    
  this.commentsProvider        
  .addComment(this.post.id, comment)
  .subscribe(
    () => this.getComments(),
    (error) => console.log(`there was a problem: ${error}`),
    () => this.newComment = ''        
);
}