All you need to know about arrow functions in Javascript

Arrow functions are one of the very exciting features that ES6 has introduced to the wild. We will cover all you need to know about arrow functions to have a good understanding of what they are and how they could be used.

Explain it with an example

This is a normal function that returns the parameter name:

function sayName(name){
    return(name);
}

This function has only one parameter and returns a value. To convert it to an arrow function, a few rules should be considered:

  • In arrow functions , there is no name for the function and the functions are anonymous.
  • The parameter should be wrapped in parentheses ( for one parameter we can omit this)
  • we do the implicit return meaning there is no need to return keyword anymore.

So we will write the above function again and its arrow function equivalent:

function sayName(name){
    return(name.length);
}
//Arrow function equivalent:

const sayName = name => name.length

I used a constant variable to define a name and assign he arrow function to it as they do not have a name. It is not part of the arrow function itself. To call the function above you can simply log it to console:

console.log(sayName(‘Azadeh’));

In the example above we had one parameter so we didn’t need to wrap in inside parentheses. In this example we have to though:

var doc = function docLog() {  
  console.log(document);  
};
//Arrow function equivalent
var doc = () => { 
  console.log(document); 
};  
doc(); // #document… 

Wen there is no parameter, it is compulsory to use parentheses before the arrow for function to work.

Important note: “this” does not exist in Arrow function

That is right. As we know, each function have its own”this” that it refers to which could be confusing and making problems in our applicaitions depends on the situation. In arrow functions this problem is solved as they do not create “this” or they do not have any at all.So they are best to be used inside objects as they can refer to the object’s this implicitly. Take a look at this example:

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() {  
    this.age++;  
  }, 1000);  
}

The person constructor defines “this” as an instance of itself. In non-strict mode, the growUp function creates its own this which is a global object and it is different from the Person object “this”. To solve this problem arrow functions are the best:

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

Here, “this” inside arrow function in the setInterval function(replacement for growUp function), refers to “this” of the Person object.

Last note

One more thing about arrow functions is that they cannot be use as a constructor as you cannot call new on them. It will throw an error:

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

And they do not have prototype properties:

var Foo = () => {};  

Thank you 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.