JasperValero.com

JavaScript

Why JavaScript ES6 Arrow Functions Will Make You Happy

Posted on .

Why JavaScript ES6 Arrow Functions Will Make You Happy

Introduction

In this post, I’ll be explaining the exciting changes coming to JavaScript with ES6 arrow functions. After reading this post, you will have a solid understanding of ES6 arrow functions. You will be able to write functions using the new syntax. You will be able to explain its new features to your friends and colleagues. The best part is it should only take you a few minutes.

There’s plenty to happy about!

Arrow Function Expression

The first thing you will notice about ES6 arrow functions is the new syntax. The ES6 arrow function expression syntax is shorter than the current function expression. That is great news to any JavaScript engineer. You get to cut down on characters and file size without taking away from code readability.

Note: You may see some people refer to them as fat arrow functions.

Syntax

1, 2, 3 Arrow Function

ES6 Arrow Functions as easy as 1, 2, 3

You may find it helpful to break the process required to create an arrow function up into three steps:

1. Provide the parameters

2. Add in that fat arrow goodness

3. Define the body of the function

Lambdas!

One of the key things to note is that when you only use one argument the function returns the result implicitly. You don’t have to use the return keyword. This is quite handy for lots of scenarios. Other programming languages refer to this style as lambdas.

In the above code, the result of number * number is automatically returned. So you will see 25 in your console. I have some ideas of how you can put this to use in JavaScript. I may write a more detailed post on lambdas at some point in the future. Make sure and let me know in the comments if you’d find that useful.

Lexical this Binding

In earlier versions of JavaScript, the context of this was dynamic. Every new function defined its own this value. In ES6, this is lexically bound. Simply put, it retains a reference to the enclosing context. I’ll give you some examples so you can understand the full benefit of a lexical this. Say you wanted to create a Gamer class to track play time for a game you’re making.

In ES5, you might try writing the following code:

A typical solution for handling the problem in the current version of JavaScript would be to do something like:

With ES6 arrow functions, this refers to the enclosing context. So you can use:

Conclusion

Well, that is a quick overview of ES6 arrow functions. I hope you feel like you’ve leveled up your ES6 knowledge. You should be ready to begin taking on ES6 arrow functions.

You should spend some time practicing what you’ve learned. If you haven’t already, make sure to check out my post, You Need To Know That ES6 Has Arrived. It will get you motivated to start putting your ES6 knowledge to use now.

If you’ve found this post helpful, please make sure and leave a comment. Let me know how I’m doing. It helps me a lot.

profile

Jasper Valero

http://jaspervalero.com

Rockstar engineer working hard to dent the universe.

Navigation