Easy as () => {}

JavaScript arrow functions and when to use them

William Dana
Jul 30, 2017 · 3 min read

Looking over all of the JavaScript I’ve written in the last two weeks, one thing sticks out as an overarching theme in all of my code: it’s nearly unreadable. I’ve spent so much time just trying to get my early JavaScript efforts to just work that I neglected making them comprehensible to other programmers. So going forward in JavaScript, I’d like to turn over a new leaf. I’d like to make my code more readable so that others may understand my intentions, but also so I can look at what I wrote yesterday and understand what in the world I was trying to do (because right now I generally can’t). I decided a good plan of attack in my refactoring efforts would be to take note of any recurrent patterns of confusion in my code and to figure out just where I went wrong. In doing so, I realized that I have no idea what’s going on with arrow functions in ES6.

(stuff) => { alert(stuff) }

Arrow functions, new to ES6, are pretty sweet. They’re a lot like regular functions, but with a few key differences:

  1. They are anonymous. You cannot name an arrow function directly as you can with a regular function, but rather, you must set a variable = to an arrow function in order to call it again. This probably isn’t the best use of arrow functions, if you ask me.
    const ohNo = () => { alert('Watch out for that boat!') }
  2. They do not work with the new operator.
  3. Most crucially, arrow functions do not set their own context for the this variable. Rather, they retain the context in which they were defined. This is a boon to object-oriented JavaScript programming, which I will focus on below.

Before arrow functions, object orientation could be kind of hard. If you wanted to retain the proper scope for this, you really had to pin it down:

function Boat() {
var that = this;
that.dirtyness = 0;
function addBarnacles() {
that.dirtyness++;
}
};

As you can see, we actually have to pass the proper context for this into our addBarnacles function in the form of the variable that. Otherwise, the scope for addBarnacles() will be global. But with arrow functions:

function Boat() {
this.dirtyness = 0;
addBarnacles(() => {
this.dirtyness++;
}
};

We don’t need to do that! The anonymous arrow function simply retains the scope in which it was defined as this. Pretty intuitive, huh?

So, when do we use arrow functions? That’s broadly open for debate, but one strong argument for their frequent use, where applicable, is that they make regular functions (function() {};) stand out more, which makes it very easy to quickly establish scope for a particular function in a large body of code.

JavaScript is tricky, and I’m hopeful that the careful use of arrow functions will make my code that much more readable in the near future. If you disagree with my use of arrow functions, or believe I’ve completely misinterpreted them and are angry about it, I’d (seriously) love to hear about it, so please do let me know.

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade