Arrow functions: a walkthrough and gotchas

In this blog post I show how to transform a traditional function into a so-called 'arrow function'. I start with functions with two arguments, then cover no arguments and finally, one argument.
NOTE: I initially planned to cover also the gotchas but realized that this would make this blog post "about everything and nothing". Before I write another blog on the gotchas, check the last section of the blog to learn about the two main gotchas. Also, I just created a mini-quiz where you get prompts for transforming functions — check it out after this blog :)

Two arguments

1. This is our function we want to transform:

   function sum(num1, num2){
       return num1 + num2
   }
   

2. Arrow functions are anonymous so in order to preserve the name, we need a variable:

   const sum
   

3. Now, put an = between the name and the arguments, and a => between the arguments and the curly brackets

   const sum = (num1, num2) => {
     return num1 + num2
   }
   

4. This already works! However, since the body of the function has only line, we can write it like this:

   const sum = (num1, num2) => { return num1 + num2 }
   

5. And now, since this is only one line, we can simplify it:

   const sum = (num1, num2) => num1 + num2
   

   WHAT?! NO RETURN?! Yes. Putting it simply, you need a return statement as soon as there are {} in the picture — and you need {} as soon as you have more than 1 line of function body.
   

NOTE: DarkWiiPlayer provides a more detailed explanation that I thought fits this blog's purpose:

You need {} when the function body is not just one expression, that is, when you need additional statements before the return value. You can easily write something like:


const sum = (array) => array
   .reduce( (a,b) => a+b)

but you can't do


const sumPlusOne = (a, b) => a+=1; a+b

---

No arguments

If you have no arguments, here's how you can go about it. This is the function we want to be transformed:


function helloWorld(){
 console.log("Hi")
}

you can make it into:


const helloWorld = () => console.log("Hi") 

or:


const helloWorld = _ => console.log("Hi")  

NOTE: the difference is that (_) marks to your developer colleagues that there might be some default argument and () says there will be no defaults you care about — but it’s a niche thing and practically no one uses it. For more information, check this comment by Kyle Roach.

---

One argument

When it comes to just one argument:


function myName(name){
 console.log(`Hi, my name is ${name}`)
}

can be:


const myName = name => console.log(`Hi, my name is ${name}`)

since it’s just one argument, it doesn’t need parenthesis.

---

Gotchas

When it comes to arrow functions, suffice it to say for now that there are, really, two main gotchas:

1. arrow functions saved to a variable are function expression and as such cannot be hoisted;
2. arrow functions do not have their own binding of this and this represents an object in which the arrow function has that defined it.

---

I just created a mini-quiz where you get prompts for transforming functions — check it out after this blog :)

---

Cover picture by Pexels