JavaScript ES6 Arrow Functions

JavaScript ES6 arrow functions are syntactically shorter and an alternative to the traditional JavaScript function. However, still many developers are confused by this new feature but no worries, we’re going to explain that here for you.

What are JavaScript Arrow Functions?

 

Basically, ES6 provides a new way to create functions using the => operator. Thus, when you see this => operator, which obviously looks like an arrow, that’s why it is called “arrow functions”. This new method or way of creating a method gives you the ability to have a shorter syntax, and the arrow functions are anonymous functions. Lastly, if you are familiar with lambda expressions you can easily grasp this idea.

 

Arrow Function Syntax

 

I have a good idea, let’s first make a traditional function in JavaScript and then let’s try to convert it into an arrow function. Sounds like a good idea to you? Ok, let’s get started then.

 

Now, consider the example below. 

var getProductOfTwoNumbers = function (num1, num2){
  return num1 * num2;
}

Let's convert this into an arrow function. 

const getProductOfTwoNumbers = (num1, num2) => {
  return num1 * num2;
};

Let's see the usage in action. 

let result = getProductOfTwoNumbers(2,2);
console.log(result); // output equals 4

If an arrow function contains just one statement, then we can ignore the usage of the curly brakets {} to wrap the code. See the example below.

const getProductOfTwoNumbers = (num1,num2)=> num1 * num2;
let result = getProductOfTwoNumbers(2,2);
console.log(result); // output equals 4

Just remember that when {} brackets are not used then the value of the statement in the body is automatically returned. 

 

If an arrow function only contains a single argument, we can ignore the parenthesis around. See the examples below. 

//regular JavaScript function having a single argument
var getFirstElement = function(myArrayList){
  return myArrayList[0];
}
//let's convert this into arrow function
const getFirstElement = (myArrayList) => myArrayList[0];
let result  = getFirstElement([1,2,3]); //output equals 1
//let's remove the parenthesis from (myArrayListray) to myArrayList
const getFirstElement = myArrayList => myArrayList[0];
let result  = getFirstElement([1,2,3]); //output equals 1

Some points to remember between the arrow and traditional functions

 

First, If you are a fan of JavaScript object constructors, it is sad to say that the arrow functions cannot be used that way because the new operator cannot be applied to it. See the example below. 

const Customer = (firstname, lastname, country) => {
  this.firstname = firstname;
  this.lastname= lastname;
  this.country = country;
};

let myCustomer = new Customer("jin", "necesario", "PHP");

Output

 

 

Second, I would like to point out that the value of this in an arrow function is different from the traditional ones. Let us see an example below.

let myObject = {
    myFunc1: ()=>
    {
       console.log(this);

       let myFunc2 = ()=> { console.log(this); }

       myFunc2();

       setTimeout(myFunc2, 500);
    }
};

myObject.myFunc1();

The example above will behave this way, this inside the myFunc1 copies the this value of the global scope, as myFunc1 lies in global scope. Now, this inside myFunc2 copies the this value of myFunc1, as myFunc2 lies in the myFunc1 scope. 

 

Output

 

 

 

Lastly, between the arrow and traditional functions, almost everything is the same except the new operator and this value. Therefore; both of these functions are instances of the Function constructor. 

const customer= (name) => "Your name is " + name;

console.log(customer instanceof Function); //output true

Summary

 

In this blog post, we have discussed the usage of arrow functions. I hope you have enjoyed this blog post, as I have enjoyed writing and coding the examples. Until next time, happy programming.