JavaScript Arrow Function (Introduction with Examples)

In the world of JavaScript, developers are constantly looking for ways to write more concise and readable code. One powerful tool that has emerged in recent years is the arrow function. In this introduction guide, we will take a deep dive into the Arrow Function in JavaScript with some examples, its use cases, advantages, and limitations.

Before that, let’s revise the concept of function!

What are the Functions in JavaScript?

A function is a block or collection of statements or code used to implement a particular task. The syntax of writing a function in JavaScript is as follows.

function name_of_function (parameter1, parameter2,....){
    //code to be executed
    //return statement 
}

Let us take the example of printing numbers up to three and four without using a function first.

//printing numbers upto 3
for(let i=1;i<=3;i++){
    console.log(i);
}

//printing numbers upto 4
for(let i=1;i<=4;i++){
    console.log(i);
}

Output:

Now, let us perform and get the same output with the help of a function. We will see that the amount of code has reduced significantly. Instead of using two for-loops, we will get the work done by using a single for-loop in the function and passing parameters.

//declaring and defining a function used to print numbers from 1 to n
function printnumbers(n){
    for(let i=1;i<=n;i++){
        console.log(i);
    }
}

//calling the function
//parameter n=3
printnumbers(3);

//parameter n=4
printnumbers(4);

It is time to look into a concise and compact way of writing functions in JavaScript.

What are the Arrow Functions in JavaScript?

Arrow functions are a concise alternative to traditional function expressions in JavaScript. They are bound by any name or by the keyword function, they are anonymous functions. It makes the code more readable. It is also known by the name of Lambda Functions.

The syntax of the arrow function is as follows.

const functionName=(parameter1, parameter2,...)=>{ //code to be executed }

An example of the it is given below:

//declaring arrow function
const greet=()=>{console.log("Hello, FavTutor!")};

//calling the arrow function
greet()

Output:

Hello, Favtutor!

Examples of Arrow Functions

Let’s discuss three different scenarios of using it:

With No Parameter

There are no parameters given in the brackets. Let’s see how this function performs when executed.

//declaring arrow function with no parameters
const greet=()=>{
    console.log("Hello, FavTutor!")
};

//calling the arrow function
greet()

Output:

Hello World

With Some Parameters

We declare a function by providing parameters a, b, and c. The parameters are specified when we call a function. The function returns an expression after evaluation.

//declaring arrow function with parameters
const solve=(a,b,c)=>{
    return a+b*c;
};

//calling it and printing the Output
console.log(solve(1,2,3));

Output:

With Default Parameters

We declare a function by providing parameters a, b, and c with a default value. The function returns an expression after evaluation.

//declaring arrow function with parameters
const solve=(a=1,b=2,c=3)=>{
    return a+b*c;
};

//calling it and printing the Output
console.log(solve());

Output:

In this example, we have specified the default parameters, a as 1, b as 2, and c as 3. We receive the desired output.

What if we provide the parameters in the function while calling the function, even though the default parameters are already specified? The function will take the final parameters as those that are used while calling the function.

Let us take an example:

//declaring arrow function with parameters
const solve=(a=1,b=2,c=3)=>{
    return a+b*c;
};

//calling it and printing the Output
console.log(solve(4,5,6));

Output:

In this example, we have used default parameters along with providing different parameters when we call the function. As observed, the function takes the final parameters. We obtain the desired result.

Advantages of Arrow Functions

The advantages of using Arrow Functions are discussed below:

Compared to the Regular Functions, the arrow functions provide a compact, concise, and easy-to-understand method of writing functions.
The return statement in the Arrow Function is Implicit when we use a single expression in the function body. Thereafter, the need for curly braces becomes as low as zero.
It is so advanced that it is able to automatically capture the “this” value from the surrounding context. This eliminates the need to bind, call, or apply methods to maintain the correct “this” reference.
It is particularly useful when working with callbacks or event handlers because of their expressive way of defining these functions.

Disadvantages/Limitations

The disadvantages of this unique function are discussed below:

Arrow Functions can not be used with the “new” keyword. Attempting to do so will result in a TypeError.
It can not be used as Constructors.
It does not have its own arguments or object. Instead, they inherit the arguments from the surrounding scope.
In arrow functions, this is lexically bound to the surrounding scope, which means it cannot be dynamically changed. This can be problematic when you need to access different contexts within a function.

Conclusion

Overall, Arrow functions are a powerful addition to JavaScript, providing a more concise and expressive way of writing functions. We dwelled further into various examples of using it in different scenarios.