One of the most important feature that came with ES6 update is an arrow function. In this guide, we will learn how to use an arrow function, compare it with a regular function, and also discuss the advantages of an arrow function over a regular one.

First of all we will create a regular function "multiply" that will return the product of two numbers. Next we will convert it to an arrow function.

function multiply (x , y) {
  return x * y
}

In this function, X and Y are arguments. When calling the function, we must pass these arguments to the function, which will return the calculated result. Let's remake this function as an arrow function.

const multiply = (x, y) => {
  return x * y 
}

A good practice is to declare an arrow function with const , but it can also be declared with let, This will give the same result.

let multiply = (x, y) => {
  return x * y 
}

As you can see in the body of the function we have only one line of code - return x * y - in this case we can simply remove the curly braces, return keyword, and write our function in one line:

const multiply = (x, y) => x * y

As you can see, the readability of our code has improved. So one of the benefits of using an arrow function is improved readability and fewer lines of code, which are important when another programmer is reading or maintaining our code. Let's look at one example of how we can use the ternary operator using an regular and then an arrow function. The function is self-explanatory.

Example of a regular function:

function ageCheck (age) {
  return (age>=21 ? 'Alcohol allowed' : 'Only Juice');
}

Using the arrow function and the turnery operator above function will look like this:

const ageCheck = (age) => {
  return (age>=21 ? 'Alcohol allowed' : 'Only Juice');
}

Since we're only using one line of code in the body of the function, we can get rid of the return keyword and put everything in one line.

const ageCheck = (age) => (age>=21 ? 'Alcohol allowed' : 'Only Juice' );

Further, since we use only one argument - age, we can get rid of the parentheses of the argument, as well as the parentheses of the returned expression.

const ageCheck = age => age>=21 ? 'Alcohol allowed' : 'Only Juice' ;

Also, if desired, we can get rid of the semicolon at the end of the expression. JavaScript will insert it automatically when interpreted (although I personally prefer to put it).

In my opinion, what makes using the arrow function the preferable approach is not only an improved readability, but also how this function is used with this keyword. Compared to a regular function, an arrow function uses this in a slightly different way. Unlike regular functions, arrow functions do not have their own 'this'. One of the limitations of an arrow function is that it can only be called and can not be used as constructors.

In the following example, we will create an object with both an internal function and an arrow function and see the difference. By the way we are using a backticks ES6 syntax here that allows us to write a string and make a reference to our data.

const  car = {
"make" : "Ford",
"year" : "2010",
"price" :  15700,

"getDescription" : function () {
  return `The make is ${this.make}, year is ${this.year}, price is ${this.price}`
},
"getDescriptionArrow" : () => {
`The make is ${this.make}, year is ${this.year}, price is ${this.price}`
}

}

car.getDescription();
car.getDescriptionArrow();

After executing this you will get:

'The make is Ford, year is 2010, price is 15700'

undefined

Now try to execute the command

console.log(this)

I am doing it in my browser's developer console window and it will return this object:

Window {0: global, window: Window, self: Window, document: document, name: '', location: Location, …}

In the above example using an arrow function will yield an undefined result. The arrow function binds 'this' to the nearest outer object (window). However, the target could be any other object. And when we are trying to access "this.make" or "this.year" through the getDescription() function we are basically accessing window.make, or window.year. Because window doesn't have properties like make or year we are getting an undefined result. To be continued....