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