I don’t know about you, but I love the changes made in ES6. I’m currently learning React and ES6 definitely makes life much easier. I’ll talk specifically about Arrow Functions and why using them will help make you coding your components much more fun.

The Olde Way

Let’s take a look at a simple pre-ES6 component.

import React from 'react';

class WhatsUp extends React.Component {
  constructor() {
    super();
    
    this.handleClick = this.handleClick.bind(this);
  }

  handleClick(event) {
    // 'this' is only reachable because of the binding in the constructor above
    // otherwise it would be scoped to handleClick's environment and the log 
    // would be undefined 
    console.log(this.props.message)
  }

  render() {
    return (
      <button onClick={this.handleClick}>Click Me</button>
    )
  }
}

export default WhatsUp

The main takeaway here is the binding of the ‘this’ keyword. Without the binding in the constructor, when we used ‘this’ inside of a function, it would be referring to the functions ‘this’ – not the class.

How the Cool Kids Are Doing It

The cool thing about Arrow Functions is that they don’t bind their own ‘this’. What do the Gods say?

From our friends at Mozilla:

An arrow function expression has a shorter syntax than a function expression and does not bind its own this, arguments, super, or new.target.

Until arrow functions, every new function defined its own this value (a new object in the case of a constructor, undefined in strict mode function calls, the base object if the function is called as an “object method”, etc.). This proved to be annoying with an object-oriented style of programming.

That means we don’t have to worry about binding the function in the constructor. Take a looksie…

import React from 'react';

class WhatsUp extends React.Component {

  handleClick = (event) => {
    // 'this' is not bound to the handleClick function so we can use it freely
    console.log(this.props.message)
  }

  render() {
    return (
      <button onClick={this.handleClick}>Click Me</button>
    )
  }
}

export default WhatsUp

Look at that – we don’t have to use a constructor! Pretty cool. You might think, ‘Eh, no biggie’. But what if we had many more functions that we had to bind ‘this’ to? That’s much more code we have to write and makes our files more bloated. I know if we had to set an initial state, we’d still have to write a constructor. However, we wouldn’t have to bind so many functions.

If you haven’t started using ES6, I strongly recommend it. It will save time and energy in the long run. The Spread Operator is probably what I use second most, after Arrow Functions. Try them out and be amazed! Until next time. Cheers:)

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s