Basic JavaScript Syntax

Question

I have some questions about JavaScript Syntax and looking forward to understand them.

First: I don't understand about this syntax below,

{
    Key: () => function()
}

Example in real project:

// Define URL routes
// See https://github.com/flatiron/director
var routes = {
    '/': () => render(require('./components/pages/Index')),
    '/privacy': () => render(require('./components/pages/Privacy'))
};

it has been used in https://github.com/kriasoft/react-starter-kit/blob/master/src/app.js

What it supposes to do?

Is it the same as { Key: function() {} } ?

Second: About function in JavaScript Object,

{
    function() {}
}

Example in real project:

var HomePage = React.createClass({
    statics: {
        layout: App
    },
    componentWillMount() {
        PageActions.set({title: 'React.js Starter Kit'});
    },
    render() {
        return (.....);
    }
});

it has been used in https://github.com/kriasoft/react-starter-kit/blob/master/src/components/pages/Index.js

I would like to appreciate for your answer to explaining why these are valid or if you could send me to the right information on these syntax for JavaScript object?

Answer 1

It is the new way of writing function in ES6 (the next version of JavaScript). You can find more information here.

ES6 is currently not really supported (see this table) so you will need to compile your ES6 in ES5. (Happening here, with the flag "harmony" in your example) to make it run in your browser.

Basically:

var test = () => {} is the same as var test = function() {}.bind(this)

and

componentWillMount() {} is the same as componentWillMount:function() {}

Answer 2

Is it the same as { Key: function() {} }

Not exactly, but sort of. It's a new function syntax introduced in ECMAScript 6. The behavior is somewhat different though.

Most notably, the value of this in the function will adopt the value of this from the environment where the function was created, so it's not based on how the function is invoked like the old syntax.

The function is still a first class object and creates a closure, so there's no difference in that regard. Also, the return operator can be elided if the function body consists of only a single expression statement.

As @HeadCode pointed out, the new operator is not permitted to be used with this function, so it's not meant for constructing objects. I also want to say that it has proper tail call optimization, but I'm not sure about that.

---

The rest of the syntax is just a typical object except that it uses a new shorthand for method assignment.

Here's the MDN documentation for the fat arrow function syntax: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/Arrow_functions

And here's the MDN docs for the object initializer syntax. See the ECMAScript6 part for the new syntax: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Object_initializer