JavaScript Arrow Functions Explained

January 15th, 2021

Hello everyone, I'll continue explaining basic concepts of JavaScript with Arrow Functions today. I don't think that I'll be able to cover all features that comes with arrow functions and I don't think that they are necessary for most cases but if you have any suggestions or improvements to make on that article please drop it on the comments section.

Optional NPM Package

We'll use Node time for this post, so if you like to follow along you need to have it on your local. You can download it here.

If you want to have hot reloading feature in you project like I used along the tutorial you can go ahead and install the code from github and simply run the command "npm install" in the root directory, or if you want to do that manually by hand on the root directory you should run the commands below in order:

npm init -y

npm install -D nodemon

After that you can go ahead and create a new script in your package.json file:

You can now start your node runtime with hot reloading by running the command:

npm run dev

What is Arrow Functions?

Arrow functions, by their nature, pretty similar with Python Lambda functions if you are familiar with that language. Lambda functions are basically anonymous functions with a specific syntax that takes a set of arguments and gives an output accordingly.

Regular syntax for the arrow functions is as it follows:

let ourFunction = (argument1, argument2, argument3, ... ,argumentN) => anexpression

In the scope of JavaScript arrow functions are capable of doing several stuff with several trade offs.

Where not to Use Arrow Functions?

"Does not have its own bindings to this or super, and should not be used as methods. Does not have arguments, or new.target keywords. Not suitable for call, apply and bind methods, which generally rely on establishing a scope. Can not be used as constructors. Can not use yield, within its body. "

Those limitations comes directly from the MDN website, a website that you can find many resources about many technologies.

Out of those 4 above I think the most important 2 are not being able to used as a method and not being able used as constructors.

Here is an example below that demonstrates why we shouldn't use arrow functions as methods.

In this example we created 2 objects with one with a regular function as a method and the other one with new arrow functions. When we check the results below.

As we can see with arrow functions we now can't reach owner object by using "this". If you want to learn about what is "this" in JavaScript for different use cases you can check out this link to figure out.

Now we'll take a look at another example with arrow and normal functions as constructors.

Now we have 2 new functions and we are trying to use both of them as constructors.

The results are as expected, while first constructor gives the desired output the second one fails because arrow functions doesn't support such a thing.

Where to use Arrow Functions?

Arrow functions are suitable for much other cases and I personally only use them when there are no limitations as its explained like above. However there is an obvious better go to use case for arrow functions and most people are often using it, inside of a higher order functions. If you don't know what a higher order function is they are basically functions that either take a function as an argument or returns one as their results. You can go ahead and check them out in depth from here.

Let's take one of the higher order functions that I explained in a post about JavaScript array methods before, the map method. ( You can go ahead and check other posts of mine from the link here.)

As you can see above we created 2 variables with the outputs of 2 different map methods and the one with arrow functions took way less code and space to write.

Conclusion

JS arrow functions are totally super nice and I guess most people are now got used to it. When all the limitations are taken in considered before using it helps us developers to write cleaner and more readable code with less effort.

I hope you enjoyed reading this post. See you in the next time :).