Steve Rydz

why i’d advise against arrow function expressions in javascript

It’s an exciting time to be a JavaScript developer. ES6 is bringing all kinds of goodness to the language. For the most part I really like the new features, such as modules and template strings to name just two, but there is one in particular that I’m not so fond of: arrow function expressions.

what are arrow function expressions?

Arrow function expressions (also known as fat arrows) are anonymous function expressions which lexically bind the this value, all with a shorter syntax. Take a look at the following examples, which both do the exact same thing.

// A typical anonymous function expression
var myAwesomeFunctionOldWay = function (argument) {
  return argument;
}.bind(this);
// An arrow function expression
var myAwesomeFunctionNewWay = argument => argument;

There is no denying that the syntax for the second example is more concise, but is it the best way to achieve this? On the surface it sounds great, but it comes at the cost of being less clear. This isn’t a good thing and I’m not the only one who thinks so either. Take a look at this recent post by Kyle Simpson, where he reiterates that clear code always trumps clever code.

a more complex example

Let’s look at a more complex example that we’re more likely to use in the real world. The following code will throw an error because the this.methodTwo call on line 12 has a different scope:

var myObj = {
  methodOne: function (callback) {
    callback():
  },

  methodTwo: function (argument) {
    console.log(argument);
  },

  render: function () {
    this.methodOne(function () {
      return this.methodTwo('Hello world!');
    });
  }
};

This can be fixed by calling the bind method at the end of the this.methodOne call on line 13:

var myObj = {
  methodOne: function (callback) {
    callback():
  },

  methodTwo: function (argument) {
    console.log(argument);
  },

  render: function () {
    this.methodOne(function () {
      return this.methodTwo('Hello world!');
    }.bind(this));
  }
};

Now let’s look at this same example using arrow function expressions:

var myObj = {
  methodOne: function (callback) {
    callback();
  },

  methodTwo: function (argument) {
    console.log(argument);
  },

  render: function () {
    this.methodOne(() => this.methodTwo('Hello world'));
  }
};

You can see that line 11 is equivalent to lines 11 – 13 in the previous example. Again, there is no doubt that this is more concise, but it is not as clear (at least to me) when scanning the code.

conclusion

To summarise, I think this serves as a good example as to why we should strive to write clear code over clever code. The clever way often requires the next developer to work harder to understand what is going on, which is time that could be spent solving problems.

If you enjoyed the read, drop us a comment below or share the article, follow us on Twitter or subscribe to our #MetaBeers newsletter. Before you go, grab a PDF of the article, and let us know if it’s time we worked together.

blog comments powered by Disqus