Arrow Functions in JavaScript

We all know basics about functions and how to use them in JavaScript. But JavaScript was not yet done with functions. Here we will study about a new way to define functions and while it may feel like a small change where we can use it if we like it - this one is much more nuanced and has varied use cases. This one is called an arrow function. Before getting into the details lets take a look at the general syntax:

function square(n)
{
 return n*n;
}

Above is a normal function. To get that as an arrow function we will do:

const square = (n)=>{
 return n*n;
}

The basic syntax here is parenthesis followed by an equals and greater than sign representing an arrow that enters us in the curly braces block. We can also avoid the curly braces for an implicit return but we will discuss about it a bit later.

In fact if we have a single parameter we can even avoid the parameters enclosing braces like this:

const printName = name => `My name is ${name}`;

Arrow functions can accept multiple parameters too:

const add = (a,b,c) =>{
 return a+b+c;
}

Now the most interesting use case of arrow functions is implicit vs explicit return.

Like here:

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

Here if a and b are passed to add then the expression pointed to by arrows is executed and the evaluation of that expression is returned. That expression can be enclosed in parenthesis for more clarity like:

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

These amount to the same code. This helps us to decrease lines of code for a simple function and is also very readable because the arrow kind of gives an intuitive idea as to what will happen with these variables. This method where we use no curly braces is called an implicit return format because the machine implicitly understands that the expression's evaluation needs to be returned. while if we do use curly braces its called an explicit return. Which means now its our responsibility to tell the machine what to return from this block. In fact using curly braces and not writing a return statement is a habit many developers tend to pick up that causes a lot of bugs.

Arrow Functions vs Normal Functions

Arrow functions are cool and all - but what is the use case. I mean you must wonder how are they that different. Its just a different notation isn't it. Well no. And in this section we will talk exactly about that. So of course in difference saying that the syntax is different is not a thing. So we will start with an interesting one.

Normal functions have access to an object called arguments. This object is like an array but is not exactly an array. Any extra arguments passed to a function are stored here.

function add(a,b){
   console.log(arguments);
   return a+b;
}

const ans = add(10,20,30);

In the above code a and b will be passed as 10 and 20 but the 30 will go as the first element of the arguments object with they key 0. We may choose to handle extra arguments however this is largely succeeded by the rest operator where we explicitly define we may have extra variables so its taken in there.

function add(a,b,...rest)
{
 console.log(rest);
 return a+b;
}
const ans = add(10,20,30);

Now this rest here is a real array. Quite handy to work with.

Also arrow functions don't have their own 'this' binding. 'this' keyword and arrow functions are covered in a lot of depth in my blog on this keyword. Please check that out here : https://js-objects.hashnode.dev/what-s-this-in-javascript. This also makes them incapable of being used by call, apply and bind methods. Since they cannot have their own this they are also unsuitable for being used as constructor functions .

Another obvious difference is that arrow functions cannot possess a name and hence need to be stored in a variable. As such during hoisting they can never be available to us at the top of the scope and must be used only after they have been defined.

All that negativity might make you look at arrow functions with a not so good eye but it has its own uses. For example : they help write one time use functions and can be used to write an Iffie. An iffie is a piece of function that is executed with its declaration itself.

For example:

 const ans = ((a,b)=> a+b ) (10,20);

Here the piece of code will be executed instantly and we will get the output. They are also used to capture this from the surrounding scope like for setTImeOut() type functionalities. Since they can be described in another function and don't have their own arguments they can be used to make use of their parent function's arguments.

They are also very frequently used in arrow functions like map, reduce, filter etc like:

const nameArr = myArr.map(el=>el.name);

As such we conclude our article on arrow functions. And just as with any other concept you will learn it better - advantages and disadvantages and everything as you code. So now that you are armed with knowledge go on - code and you will be able to feel your code than just writing and shipping it.