What does :: (double colon) mean in JavaScript?

Question

I have got some JSX code in a react app like this:

...
 _renderSignOutLink() {
    if (!this.props.currentUser) {
      return false;
    }

    return (
      <a href="#" onClick={::this._handleSignOutClick}><i className="fa fa-sign-out"/> Sign out</a>
    );
...

What does the double colon, ::, mean before calling the function?

http://stackoverflow.com/questions/31220078/javascript-double-colon-es7-proposal — dmoo, Aug 16 '16 at 15:00
Would this not create a new function instance everytime render is called (which could be a lot of times depending on your state changes?) — flexicious.com, Oct 24 '16 at 16:16

score 53 · Accepted Answer · answered Aug 16 '16 at 15:00

53

The :: is a proposed binding operator that desugars into a bound function:

::foo.bar
// becomes
foo.bar.bind(foo)

This is useful in React (and any other event handlers) because it means this will have the expected value (instance of the class) when the event handler is later invoked.

answered Aug 16 '16 at 15:00

ssube

41,733
6
90
131

7

Just some food for thought. It's not considered good practice to use bind for function calls on components in our render methods, as it can hit at performance. Here are some alternatives https://daveceddia.com/avoid-bind-when-passing-props/ – Justin Jan 26 '17 at 15:55
Cory House used to say it [doesn't matter much](https://medium.freecodecamp.org/react-binding-patterns-5-approaches-for-handling-this-92c651b5af56) for most apps, but now he's [changed his mind](https://medium.freecodecamp.org/why-arrow-functions-and-bind-in-reacts-render-are-problematic-f1c08b060e36). – Jeff Lowery May 03 '18 at 22:42

What does :: (double colon) mean in JavaScript?

1 Answers1