Arrow functions: a walkthrough and gotchas
Tags: javascript, beginners, tutorial, webdev
Published: 2020-07-08 18:54:33

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](#two-arguments), then cover [no arguments](#no-arguments) and finally, [one argument](#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](#gotchas) to learn about the two main gotchas. Also, I just created a [mini-quiz](https://dev.to/sylwiavargas/transforming-functions-into-arrow-functions-practice-quiz-3ggc) where you get prompts for transforming functions — check it out after this blog :)

***

### Two arguments
<ol>
<li> This is our function we want to transform:
```js
function sum(num1, num2){
    return num1 + num2
}
```
</li>
<li> Arrow functions are anonymous so in order to preserve the name, we need a variable:
```js
const sum
```
</li>
<li> Now, put an `=` between the name and the arguments, and a `=>` between the arguments and the curly brackets
```js
const sum = (num1, num2) => {
  return num1 + num2
}
```
</li>
<li>This already works! However,  since the body of the function has only line, we can write it like this:
```js
const sum = (num1, num2) => { return num1 + num2 }
```</li>
<li> And now, since this is only one line, we can simplify it:
```js
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. 
</li>

**NOTE**: [DarkWiiPlayer](https://dev.to/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:
```js
const sum = (array) => array
   .reduce( (a,b) => a+b)
```
but you can't do
```js
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:
```js
function helloWorld(){
 console.log("Hi")
}
```
you can make it into:
```js
const helloWorld = () => console.log("Hi") 
```
or:
```js
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](https://dev.to/iroachie/comment/11mfp).

***
### One argument

When it comes to just **one argument**:
```js
function myName(name){
 console.log(`Hi, my name is ${name}`)
}
```
can be:
```js
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](https://dev.to/sylwiavargas/transforming-functions-into-arrow-functions-practice-quiz-3ggc) where you get prompts for transforming functions — check it out after this blog :)

***
Cover picture by [Pexels](pexels.com)