Today, we are going to talk about overview Of ES6 Arrow Functions.

ES6 Arrow Functions are undoubtedly one of the most popular features of ES6. And they introduced a new way of writing concise functions. They have two major benefits that most people will use them for.

First, ES6 Arrow Functions provide a shorthand syntax for declaring functions and cutting down the overall amount of code that we need to write for a function.

Next, they simplify the behavior of this keyword in JavaScript by keeping its context in the same scope as the function using it.

Let’s understand the above-mentioned things in detail by looking at a simple function and re-implement it as an arrow function. 

function sayHi(name){  
   return "Hi, "+ name;  
}  
  
sayHi(Joey);  

Here, we’ve written a function called “sayHi” which returns “Hi, Joey” if we pass a value like “Joey” for the name parameter. We just saw an example of a simple function.

Now, let’s create another function using the arrow style called “sayHi”.

const sayHi = (name) => {  
   return "Hi, "+ name;  
};  

First, we’ll have to declare a variable to hold it, and we’ll use const instead of let since we don’t expect that this function will change while it’s in scope.

Arrow functions are sometimes called fat arrow functions or lambda functions, but the official ES6 term is arrow function.

You may notice that it doesn’t look like we’ve shortened things much versus a regular function declaration. But if our function is a one-liner then we can omit the curly braces and the return keyword.

const sayHiMiniVersion = name => "Hi, "+ name;  
const timesThree = number => number*3;  
const multiply = (x, y) => x*y;  

A pivotal thing about arrow functions is how they work with the JavaScript keyword.

In traditional-style JavaScript functions, the keyword “this” references depend on how we’ve called the function. Sometimes keyword “this” references the containing function, sometimes “this” references the global namespace, sometimes “this” references the ajax call, and sometimes “this” references something else altogether. It’s difficult to know in advanced because it all depends on how the calling code was implemented.

Arrow functions are different because this always refers to the containing code. The fancy term for this is lexical binding.

Let’s try to understand with an example 

let Student = function(name, age) {    
this.name = name;    
this.age = age;    
this.detail = function() {    
  
   // logs Student name and age  
   console.log(this.name + "  "+this.age);    
  
   setTimeout(function() {    
      // here this!=Student    
      console.log(this.name + " is " + this.age +    
      " years old");    
      }, 4000);   
   }    
}    
  
let studentJoey = new Student('Joey', 26);    
studentJoey.detail();   

The output would be like below.

Joey 26

undefined is undefined years old

The reason that we get undefined outputs instead of the proper because of the setTimeout function. As it is defined like a normal function which means that its context is set to the global context. In other words, the value of keyword “this” is set to the window object. As every regular, non-arrow function defines its own keyword “this” or context depending on their invocation.

It had returned the correct value if it would have inherited the context from the detail() function which is part of “Student” object.  

Well, that is precisely what arrow functions do. They retain the value of keyword this from their enclosing context. 

let Student = function(name, age) {      
this.name = name;      
this.age = age;      
this.detail = function() {      
   // logs Student  name and age    
   console.log(this.name + " "+this.age);      
   setTimeout(() => {      
      // arrow function to make lexical "this" binding      
      // here this=Student. "this" has been inherited from "this.detail"      
      document.write(this.name + " is " + this.age      
      + " years old");      
      }, 4000);      
    }      
}      
let studentJoey = new Student('Joey', 26);      
      
studentJoey.detail();     

The output would be,

Joey 26

Joey is 26 years old

One more thing to keep in mind while using ES6 arrow functions 

In ES6 there’s not a built-in arguments object available inside an arrow function like there is in a regular function. 

const testArguments = function() {  
  console.log(arguments[0] === 1);  
  console.log(arguments[1] === 2);  
  console.log(arguments.length === 3);  
}  
  
testArguments (1, 2, 3);  

If we need to iterate over the arguments passed to an arrow function we’ll have to use an ES6 REST parameter. We’ll talk about other ES6 features like rest and spread operators in other articles.

If you enjoyed this post, I’d be very grateful if you’d help it spread by emailing it to a friend or sharing it on Twitter, LinkedIn, or Facebook. Thank you!

LEAVE A REPLY

Please enter your comment!
Please enter your name here