Arrow functions in JavaScript ES6

Out of the many wonderful ES6 features arrow functions are one of the most used and also save developers a lot of time since it shortens code so much! So I thought I would write a tutorial regarding arrow functions as well as give examples of its usage in addition to explain the dreaded “this” and how it changes due to the implementation of arrow functions… Ok, here we go!

Valentin Serov painting

The main purpose of arrow functions is to shorten the syntax required when writing a function. Below is an example of a function “pre ES6”.

var myName;
myName =  function(){
return "Alex";
}

This code is 38 characters long, however, if we implement this using an arrow function there will be significantly less code. An example of this is below.

myName = () =>{
return "Alex";
}

Our code is now 32 characters long, although that does not seem like a lot we can shorten the function even more so. Since inside of our function we are only returning a value and not doing anything else within the function we can remove the “return” keyword and just leave “Alex” instead. Our code has decreased from 38 characters to 25!

myName = () =>{
“Alex”
};

However, with a lot of functions you will need to have parameters, luckily for us arrow functions accommodate this, we include parameters inside of the brackets as usual, however, if you only have one parameter required to go into your function you can remove the “()” brackets from the function, otherwise you are required to enter your parameter list in between the brackets. Two examples are below.

myName = (lastName) =>{
return “Alex ” + lastName;
}
myName = lastName =>{
return “Alex “ + lastName;
}

When you are concatenating a string and variable within an arrow function you can also remove the “return” keyword from within the function, let me show you an example below using an arrow function inside of a “map” call.

var favouriteShows = [
  'Breaking Bad',
  'Peep Show',
  'MindHunter',
  'Narcos'
];
favouriteShows.map(element => {
  console.log(element);
});

Above we have an array of my favourite shows and we are doing a simple “map” i.e. iteration over every element in the array and printing them to the console, as you can see I have not written map as:

favouriteShows.map(function(element){
  console.log(element);
});

As I am far too lazy for that and so are a lot of programmers! haha, so within a map as long as we only have one parameter we can remove the brackets from the parameter as well as the word “function” thus dramatically decreasing the amount of code we actually have to write.

The dreaded “this” in JavaScript

Pre ES6 every function call defined it’s own “this” and thus by default is referred to the global object of the DOM, a quick example is below.

function car(){
console.log(this.colour);
}
var colour = 'red';
car();

If you were to run this code then you’d see that the colour printed onto the console is ‘red’, because the ‘this’ keyword is looking in the global object for a variable ‘color’ as the context of where the ‘this’ gets executed from is not defined, however, if we create an object and place the bike method inside of this then we will get a different result since we have defined a “context of execution”.

function car() {
  console.log(this.colour);
}
var colour = "red";
var myObjectOne = { colour: "green", car: car };
var myObjectTwo = { colour: "yellow", car: car };
car();           
myObjectOne.car();      
myObjectTwo.car();

So as you can see the two colours that will be printed out is “red” first because it is using the global context so will look for a variable “colour” within the global context , whereas, the second colour printed out is green because we defined the “colour” inside the “myObjectOne” variable so when we call “myObjectOne.car()” the object of execution is “myObjectOne” so it will look for a “car” property inside of this variable and print the “this.colour” property of the “myObjectOne” variable.

“This” in the context of arrow functions

An arrow function doesn’t define its own “this”, it uses its parents “this” context instead. In ES5 you can use workarounds such as the “.bind” method and defining a variable inside of the function you wish to define its own “this” context like the below.

var that = this;

Below is an example of how a successful arrow function uses “this”

function Myself(){
  this.myAge = 24;

  setInterval(() => {
    this.myAge++; // this refers to the myself object
  }, 1000);
}

var myVariable = new Myself();

In the example above since an arrow function does not bind its own “this” the “this.myAge” value inside of the “setInterval” function is the same as the “this.myAge” value outside of the arrow function.

I hope you have learned something from this article, and as always if you have any criticisms or feedback I am more than happy to listen and learn from them, thank you and have a good day :)