Arrow functions in JavaScript

5 min readMar 29, 2022

Functions existed long before arrow functions were introduced to JavaScript. So, why did we really need another way to define functions? Do we enjoy learning new things and introduce new things for the sake of it? Well, the reality is development can be time consuming, especially if you’re working on a complex product. Arrow functions can save you a lot of time but is it the only difference between arrow functions and normal functions? Well, let’s dive deeper into functions and arrow functions.

Functions

The general rule of thumb is, if you’re repeating the same code more than once you probably need to refactor your code and put it inside a function. Do you remember what I said earlier? Development can be time consuming so you need to save yourself some time wherever you can. If you’re writing the same code more than once there’s a chance you’re doing something wrong. This isn’t true for every case but it’s usually true. So, if I’m recommending you to write a function, I probably need to give you an example too, right? Let’s do that. A simple sum function looks like this:

I won’t go into too much detail on this, this article assumes you have at least basic knowledge on how functions work. However, this isn’t the only way you could declare a function. You could write the same function like this as well:

But we can STILL save ourselves some time, right? So let’s talk about arrow functions.

Arrow functions

Arrow functions can be explained as a shorter way to write our functions but that’s not the entirety of it. There are some differences between a function and an arrow function. Let’s use the same sum function example to write the basic syntax for our arrow functions.

You probably noticed it but the function keyword is gone. Instead, we’re using an arrow. We can even refactor this code to be even shorter. You see, we’re simply returning 1 thing and that’s a console.log statement. That means I can write the same code like this:

If you’re performing a single operation or returning a single value, you don’t need the curly brackets at all! Let’s declare an array of integers and sort them in ascending order using arrow functions.

Okay, this arrow function can be a bit overwhelming to look at if you aren’t used to arrow functions. We declare an arrow function called sortAsc, it accepts a single parameter called numArr and this is going to be array we declared. It sorts the array using the sort function and returns it. Remember what I said earlier, since we’re doing a single operation and returning a single value, we don’t need the curly brackets. We can even refactor the function inside our sort function to be an arrow function since it returns a single value like so:

And you know what? I don’t even need the parenthesis for our function parameters. We’re only accepting a single value so let’s get rid of that as well.

You only really need the parenthesis for when you have more than one parameter like the arrow function within the sort function. As you can see, it’s short and neat. You can also use default parameters like so:

You can use rest parameters.

Okay, then what is the problem? Well, let’s try to use the this keyword using arrow functions.

The first function returns the window object, the second function returns the object as can be seen here:

Arrow functions don’t have their own this. Arrow functions’ this is based on the scope in which they were declared. The reason why this returns the window object in our case is because our arrow function is declared in the window(global) scope. Sounds simple enough. That’s not the only difference though. If you need to code a constructor, you simply cannot use an arrow function. Let’s see what happens if I try to use an arrow function for a constructor.