Breaking Down ES6: Arrow Functions
Tags: javascript, beginners, codenewbie, webdev
Published: 2019-07-02 23:29:40

---
title: Breaking Down ES6: Arrow Functions
published: true
description: A quick breakdown of JavaScript arrow functions. 
tags: javascript, beginners, codenewbie, webdev 
series: Breaking Down ES6
---

It’s time for another week of breaking down tools brought to us by the introduction of ES6 four years ago. This week I will breaking down arrow functions for y’all. I personally really like using arrow functions, because, to me, it helps my code look cleaner and easier for others to read and understand. 

Let’s dive in! 

## Arrow Functions 

Arrow functions are one of the most popular features of ES6 amongst JavaScript developers. Arrow functions use what is known as the fat arrow, which looks like this: `=>`. One of the biggest up sides of using arrow functions is that it creates less code, as the syntax is shorter than a normal function declaration. If used properly, this shorter syntax can make for easier to understand code for other developers. There is a variety of syntaxes available for arrow functions when it comes to using parenthesis, blocks `{}`, etc., which I will be focusing on in this post. 

### No Parameters

If you have no need for parameters in your arrow function, you can utilize empty parenthesis in place of the parameters. 

```javascript
const bark = () => “woof woof”
bark() // “woof woof”
```

Although it isn’t proper practice and is not suggested, you could throw out the parenthesis altogether and still get the same results. 

```javascript
const bark = _ => “woof woof”
bark() // “woof woof”
```

### Single Parameter

If you only want to accept one parameter in your arrow function, you can either use parenthesis 

```javascript
const bark = (x) => x
bark(“woof woof”) // “woof woof”
```

or you could go without them and achieve the same results.

```javascript
const bark = x => x
bark(“woof woof”) // “woof woof”
```

### Multiple Parameters

For cases that your arrow function accepts more than one parameter, you **NEED** to use parenthesis. 

```javascript
const add = (num1, num2) => num1 + num2
add(4, 6) // 10
```

If you leave out the parenthesis, you will come across this error: `SyntaxError: Missing initializer in const declaration`. You might think, “hey, that is in regards to using `const`…”, well you are right. So, I experimented with using `var` and `let`, which both resulted in `SyntaxError: Unexpected token =>`. Long story short, if you don’t include parenthesis when using multiple parameters, you’ll end up with a `SyntaxError` of some sort.  

### Arrow Functions with Blocks

Using arrow functions with blocks, `{}`, requires a return statement. If you do not use a return statement, the result of your function will be `undefined`. 

```javascript
const subtract = (num1, num2) => {
  num1 - num2
}
subtract(10, 7) // undefined
```

The next two examples are the correct way to use blocks with arrow functions. 

```javascript
const subtract = (num1, num2) => {
  return num1 - num2
}
subtract(10, 7) // 3
```

```javascript
const isHappy = emotion => {
  if (emotion === “happy”) {
    return true
  } else {
    return false
  }
}
isHappy(“happy”) // true
```

Notice that in the `isHappy()` example, that I did not use parenthesis. I wanted to do this to continue to drive home the idea that if you use one parameter, it is not necessary to use parenthesis. 

### Object Literals

You can also use arrow functions to return object literals. In order to successfully return an object literal, you will need to make use of parenthesis. 

**WRONG**
```javascript
const printObj = () => { apples: 3 }
printObj() // undefined
```

**RIGHT**

```javascript
const printObj = () => ({ apples: 3 })
printObj() // { apples: 3 }
```

### Other Noteworthy Characteristics 

I have not covered every use case or characteristic for arrow functions, but there are two very important aspects of arrow functions that I’d like to cover briefly. I will also be providing links in order to allow you to further your research on the topic. 

#### No Separate `this`

Before ES6 was introduced, functions could not reference `this`. In order to utilize `this` in a function, you used to have to declare a new variable with the value of `this`. With the introduction of ES6, you are now able to access `this` within arrow functions. Lexical scope allows arrow functions to access `this` even though it is outside the function. 

This functionality was a huge win for developers when it was introduced and is one of the driving forces behind why arrow functions are one of the most popular tools introduced by ES6. 

*Further reading - [JavaScript: Arrow Functions for Beginners](https://codeburst.io/javascript-arrow-functions-for-beginners-926947fc0cdc)*

#### No Recursion 

Arrow functions do not allow self-referencing. This means that if at any point you need to use recursion, it will not work. So, if you need to implement recursion, stick to normal function declarations. 

### Final Thoughts 

Throughout creating this post, I learned a lot about arrow functions that I had not previously known. Generally, I really like using arrow functions because my code feels cleaner and easier to read. I now know that there are instances when I should steer away from arrow functions and there are cases when they are definitely the way to go. When it comes to arrow functions, it really depends on the purpose of your function and that will vary for each case. 

If you want to read more about arrow functions, please feel free to look at my sources. Also, if you have anything to add to this discussion, please feel free to do so. 

#### Sources
[When (and why) you should use ES6 arrow functions - and when you shouldn’t](https://www.freecodecamp.org/news/when-and-why-you-should-use-es6-arrow-functions-and-when-you-shouldnt-3d851d7f0b26/)
[Arrow Functions](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/Arrow_functions)
[JavaScript: Arrow Functions for Beginners](https://codeburst.io/javascript-arrow-functions-for-beginners-926947fc0cdc)