Arrow Functions

JavaScript Arrow Function

An Arrow Function in javascript is basically Function Expression, with less code and some limitations. Arrow Functions are primarily used as callback functions in javascript or function Expressions with less code.

Arrow Functions are basically Anonymous Functions used in variables or as callbacks. Arrow Function use Fat Arrows, i.e => to defined a function.

Arrow Function Example

    
    const sayHi = ()=>"hello";
        

sayHi is variable name with value as arrow function. () are for parameters and "hello" is return value.

How to create arrow functions?

Arrow functions can be create using single line or multiple lines.

Single line arrow functions

Arrow functions can be written in single line without parenthesis {}. The return value is written directly without using return keyword.

const sayHi = (x)=>`hello ${x}`;
const sayBye = x=>`bye bye ${x}`;
const sum = (x,y)=>x+y;

Multiple line arrow functions

Multi line arrow function is recommended with multiple statements and then return value. Both parenthesis {} and return keyword are required.

const sayHi = ()=>{
    return "hello";
};

Arrow function with single parameter

    
    const sayHi = x=>{
        return `hello ${x}`;
    };
    

Arrow function with multiple parameters

    
    const sum = (x,y) =>{
        return x+y;
    };
    

Use Cases

Arrow Functions are best recommended for following cases.

1. Function Expressions
2. Callback functions
3. Events

Drawbacks

There are some cases where Arrow Functions are not recommended.

1. where this keyword is required
2. where arguments object is required
3. where we need to create instance (constructor) of function
4. Where prototype property is required

Arrow Function Vs Regular Functions

Here is the difference between Arrow function and Regular functions.

Arrow functions in Events

Arrow functions can be used in event listeners as callback where this is not required. However we can use event.target where event is parameter of arrow function.

document.querySelector("button").addEventListener("click",(e)=>{
    document.querySelector("span").innerHTML="Clicked";
});
    

Arrow functions in Arrays

Arrow functions are always recommended in arrays as callback for sort, filter other methods. There this keyword in not required.

    const data=[1,2,3,4,5,6];
    const even=data.filter(i=>i%2==0);

    console.log(data);
    console.log(even);