What are Arrow functions?

• An arrow function expression is a compact alternative to a traditional function expression, but is limited and can't be used in all situations.
  • Does not have its own bindings to this or super, and should not be used as methods.
  • Does not have arguments, or new.target keywords.
  • Not suitable for call, apply and bind methods, which generally rely on establishing a scope.
  • Can not be used as constructors.
  • Can not use yield, within its body.
• Arrow Functions are a new way of making functions in JavaScript.
• Arrow Function has a cleaner syntax than a function expression
• We omit the function keyword from traditional function in making arrow function

Examples of Arrow Functions

//ES5 Version
var getCurrentDate = function () {
 return new Date();
};

//ES6 Version
const getCurrentDate = () => new Date();

//ES5 Version
function greet(name) {
 return "Hello " + name + "!";
}

//ES6 Version
const greet = (name) => `Hello ${name}`;

Comparing traditional functions to arrow functions

// Traditional Function
function (a) {
 return a + 100;
}

// Arrow Function Break Down

// 1. Remove the word "function" and place arrow between the argument and opening body bracket
(a) => {
 return a + 100;
}

// 2. Remove the body brackets and word "return" -- the return is implied.
(a) => a + 100;

// 3. Remove the argument parentheses
a => a + 100;

• As shown in this code, the { brackets }, ( parentheses ) and "return" are optional, but may be required.

• If you have multiple arguments or no arguments, you'll need to re-introduce parentheses around the arguments
  

// Traditional Function
function (a, b){
 return a + b + 100;
}

// Arrow Function
(a, b) => a + b + 100;

// Traditional Function (no arguments)

let a = 4;
let b = 2;
function (){
 return a + b + 100;
}

// Arrow Function (no arguments)
let a = 4;
let b = 2;
() => a + b + 100;

• Arrow Functions do not magically guess what or when you want to "return".
• If the body requires additional lines of processing, you'll need to re-introduce brackets PLUS the "return"

// Traditional Function
function (a, b){
 let chuck = 42;
 return a + b + chuck;
}
// Arrow Function
(a, b) => {
 let chuck = 42;
 return a + b + chuck;
}

• For named functions, arrow expressions like variables are treated like variables

// Traditional Function
function bob (a){
 return a + 100;
}
// Arrow Function
let bob = a => a + 100;

const data = {
 result: 0,
 nums: [1, 2, 3, 4, 5],
 computeResult() {
   // "this" here refers to the "data" object
   const addAll = () => {
     // arrow functions "copies" the "this" value of the lexical enclosing function
     return this.nums.reduce((total, cur) => total + cur, 0)
   };
   this.result = addAll();
 }
};

• Arrow functions don't have their own this value.
• It captures or gets the this value of lexically enclosing function,
• The function addAll() copies the this value of the computeResult() and if we declare an arrow function in the global scope the value of this would be the window object.

Also, to be notified about my new articles and stories:

Subscribe to my YouTube Channel

Follow me on Medium, Github, and Twitter.

You can find me on LinkedIn as well.

I am quite active on Dev Community as well and write small topics over there.

If you are Instagram person, follow me here