Arrow Functions In JavaScript

If you are a developer and you have code in javascript you might have seen functions. So, arrow function in javascript is an alternate method of writing function, this way is compact as compared to writing function using function keyword.

Let'c compare how the normal function is different from arrow function syntactically.

Here's how normal function looks like for squaring a number.

function squaring(number){
    const square = number * number;
    return square;
}

Now see the same code in arrow function.

const squaring = number => number * number

You can clearly see the difference, there is so much of boiler plate code there in normal function whereas arrow function are seems to be light-weight function.

Let's dive deep into the world of arrow function, starting from their syntax.

Syntax

() => {}

This is the basic syntax of arrow functions their are more ways but this is mostly used.

Other syntaxes are

() => expression

parameter => expression

(parameter) => expression

(parameter1, parameter2) => expression

Let's understand when to use which syntax

The first one () => {} in this syntax you have to explicitly write the return statement, when you have a function with multiple line of expression you have to use this syntax.

This syntax parameter => expression , you can use this syntax when there is only one parameter and one line of expression for example, a => a * 2 what this do this will take a argument double it and return it implicitly

This syntax (parameter1, parameter2) => expression , you can use this syntax when you have more than one parameter but the expression is again only of one line here also it will return it implicitly. For example, (a,b) => a + b .

Implicit & Explicit Return

In arrow function, you might get confused in, sometime return statement is there and some time not. For example see this code snippet

const square = (number) => number * number;

const addingNumberThenSquare = (a,b) => {
        const sum = a + b;
        const squareOfSum = sum * sum;
        return squareOfSum;
    }

Here in the first part we don't have any return statement so this is the case of implicit return in implicit return you don't have to write return the function automatically returns the expression.
When to use implicit return ? Whenever there is only one statement in the function expression you can use implicit also for using implicit return, you are not allowed to write the statement in curly braces like this

const square = (number) => {
    number * number    
}

This will return you undefined so if you want to return implicitly remember don't use curly braces.

When to use explicit return ? Whenever there are multiple statements in function expression or body there you cannot use implicit return. For using explicit return you have to write function body inside curly braces {}.

"this" in Arrow functions & Normal functions

Arrow functions don't have their own this but they inherent this from their lexical environment during creation time.

Whereas, Normal function have their own this but they never inherent this from their lexical environment.

let's understand working of "this" in arrow & in normal functions

const countries = {
    IN : "INDIA",
    AU : "AUSTRALIA",
    yourCountry: () => {
        console.log(this.IN);
    },
    friendlyCountry(){
        console.log(this.AU)
    }
}

countries.yourCountry();
countries.friendlyCountry();

---------------------------------------------------------------------
OUTPUT:
undefined
AUSTRALIA

Now Let's understand what happened here

• In Global Execution Context, first a function yourCountry (arrow) was created.

• During this creation time this arrow fn sees that there is this in it's body.

• It then inherent the this from the outer scope. The outer scope here was global scope.

• So now, this inside arrow this is pointing to global object ({} for nodeJS).

• When we call yourCountry function. It searches "IN" property in the global object but it didn't found any, so returned "undefined".

Let's understand for normal function.

• When we call normal function, see how we call it countries.friendlyCountry(); this is causing implicit binding of this.

• So for friendlyCountry this points to countries object.

• When we call friendlyCountry it just search AU property inside countries object and printed "AUSTRALIA".

The difference is that, Arrow function don't have their own this but they inherent this from outer scope whereas, Normal functions have their own this but they never inherent "this" from outer scope.

Converting Normal Function to Arrow Function

This part will make your understanding of arrow function increase. First see the code then convert the normal function to arrow function by yourself then check it from this blog.

function addingNumberNormal(a,b){
    return a + b;
}

const addingNumber = (a,b) => a + b;

Example no. 2

function isEvenNormal(number){
    if(number % 2 === 0){
        return true;
    }else{
        return false
    }
}

const isEven = (number) => number%2 === 0 ? true : false

---

Real life examples where we use arrow functions

Arrow functions are used in multiple places but we use them a lot in HOF (higher order function) passing them as parameter.

Some examples are .map(), .filter()

const numbers = [2,3,4,5,6]
const double = numbers.map((number) => number * 2)

---------------------------------------------------------------------
OUTPUT:
[ 4, 6, 8, 10, 12 ]

---

Conclusion

Arrow functions give us a shorter and cleaner way to write functions in JavaScript. They are especially useful for small functions and callbacks. One important thing to remember is that arrow functions handle this differently from normal functions. Once you understand this difference, arrow functions become a very helpful tool in writing modern JavaScript code.