JavaScript Arrow Functions

Arrow Functions (also called fat arrow function) are a way of declaring a function introduced in ES6. Arrow functions are a more concise syntax for writing function expressions. They use a new token =>, that looks like a fat arrow.

Arrow functions differ from traditional functions in a number of ways, including the way their scope is determined and how their syntax is expressed, because of this arrow functions are useful when passing a function as a parameter to a higher-order function, such as when you are looping over an array with built-in iterator methods. They make our code more concise and simplify function scoping and this keyword. They can be written in one line and we can avoid having to type the function keyword and return the keyword.

let’s look at arrow function syntax

//ES5  Normal way to write a function
var phraseSplitterEs5 = function phraseSplitter(phrase) {
  return phrase.split(' ');
};

//ES6 Arrow Function
const phraseSplitterEs6 = phrase => phrase.split(" ");

console.log(phraseSplitterEs6("ES6 Awesomeness"));  
// ["ES6", "Awesomeness"]

As we can see in the above example if we have one parameter we don’t need need to write a function and return keywords making it concise. Parentheses are also optional if we have only one parameter.

No parameters would look like this

//ES5
var docLogEs5 = function docLog() {
    console.log(document);
};

//ES6
var docLogEs6 = () => { console.log(document); };

Multiple parameters, one line would look like this

const sum = (num1, num2) => num1 + num2;

Multiple parameters and multiple like would look like this

const sum = (num1, num2) => {
    return num1 + num2;
}

Note that if we are passing multiple parameters or no parameters we need to have parentheses.

This is Arrow Functions

Arrow functions don’t bind this, meaning the value of this is determined by the surrounding scope. check out the following example.

// Normal function
const student1 = {
    name: 'Hassan',
    age: 24,
    greeting: function () {
        console.log (this);
        return `Hi, I am ${this.name} and I am ${this.age} years old`;
    }
}
 // Output should be 
 //"Hi, I am Hassan and I am 24 years old!"
console.log (student1.greeting ());

Now let’s see what happens with the arrow function

// Arrow function
const student2 = {
    name: 'Hassan',
    age: 24,
    greeting: () => {
        console.log (this);
        return `Hi, I am ${this.name} and I am ${this.age} years old`;
    }
}
 // output will be 
 //"Hi, I am undefined and I am undefined years old"
console.log (student2.greeting ());

It returns undefined because this is not bound by the scope of the arrow function.

Arrow functions are commonly used with higher-order functions like Map, Filter, and Reduce JavaScript array methods, as arrow functions allow you to transform an array in only one line. They are also commonly used with Promises and Callbacks.

Resources:

Arrow Functions: Fat and Concise Syntax in JavaScript

https://www.digitalocean.com/community/tutorials/understanding-arrow-functions-in-javascript