Breaking Down ES6: Arrow Functions

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.

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.

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

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

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

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.

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.

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

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

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

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

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

RIGHT

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

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
Arrow Functions
JavaScript: Arrow Functions for Beginners

Comments

[Juneau Lim]

I also LOVE using arrow function and it even made me wanted to study a pure functional programming language in the future.

I didn’t know that I can omit () totally.
The “Lexical scope” was really useful when I started to learn React.
Never have thought about recursion part.

Thank you for putting such an effort for this insightful post and additional resources.