Introduction

The arrow function is new to writing anonymous function expressions in JavaScript. These were introduced in ES6 (2015) and made our code more readable and cleaner by providing a shorter syntax.

How to write arrow functions

Let's see how we can convert a regular function into an arrow function,

// print hello world
function printHelloWorld(){
    console.log('Hello, World!');
}

// converting it into arrow function
const printHelloWorldArrow = () => {
    console.log('Hello, World!');
}

printHelloWorld();    // Hello, World!
printHelloWorldArrow();    // Hello, World!

There are different implementations of arrow functions,

• A function that does not take any arguments.

• A function that takes arguments.

• A function containing a single line of code.

Our above printHelloWorld function is an example of a function that does not take any arguments. Let's see the implementation for other scenarios,

// function that takes arguments
function add(a, b){
    return a + b;
}

// converting above function into an arrow function
const addArrow = (a, b) => {
    return a + b;
}

let sum = add(1,2);
console.log(sum);    // 3

sum = addArrow(1,2);    
console.log(sum);    // 3

// single line of code
const addSingle = (a,b) => a + b;
sum = addSingle(1,2);
console.log(sum);    // 3

While declaring an arrow function we can put parameters in parentheses after the equals sign.

If there is a single line of code returning a value from an arrow function, then we don't need to write a return statement we can follow the addSingle function implementation. But it only works if the function contains a single line of code.

You can also use rest parameters and can create async arrow functions.

Limitations of arrow functions

Well right now, you must be thinking arrow functions are fantastic. But hold on there are some limitations,

• Arrow functions don't have their bindings to this keyword. So we cannot use arrow functions as methods in objects.

• We cannot use them as constructors in classes.

• We cannot use them to create generator functions.

• Arrow functions do not define their execution context.

Hoisting in arrow functions

Hoisting is a mechanism in which variable and function declarations are moved to the top of their scope before the execution.

fruit = 'mango';
console.log(fruit);    // mango
var fruit;

The fruit variable declaration is moved to the top of the scope, making it possible to access the variable before its declaration. If we don't initialize fruit variable it gets a default initialization that is undefined.

But if we try to do the same this with let or const we get a Reference Error: Cannot access 'fruit' before initialization. But hoisting also works in this case too, let's modify our above code,

console.log(fruit);  // ReferenceError: fruit is not defined

This time we get a different error. It says fruit is not defined, but the previous error said cannot use fruit before initialization. We are getting this error because JavaScript can access this fruit variable before its declaration due to hoisting.

We are getting Reference Error in case of let and const because variables are hoised without default initialization of undefined value whereas in the case of var variables are hoisted with the default initialization value of undefined.

This scenario where JavaScript knows about the variable but cannot access the variable is called Temporal Dead Zone.

And this is the same reason we can only use traditional functions before declarations, not arrow functions.

helloWorld();    // Hello, World!

function helloWorld(){
    console.log('Hello, World!');
}

helloWorldArrow();    // ReferenceError: Cannot access 'helloWorldArrow' before initialization
const helloWorldArrow = () => { console.log('Hello, World!'); }

Conclusion

In this blog, we learned about arrow functions and their different implementations. Additionally, we also talked about the limitations of arrow functions and hoisting in arrow functions.

If you're having any doubts please mention them in the comments below! 😎

References

• Arrow function expressions | MDN

• 5 Differences Between Arrow and Regular functions