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?

Pierrickouw · Accepted Answer · 2015-01-31 00:02:26Z

5

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() {}

answered Jan 31, 2015 at 0:02

Pierrickouw

4,7341 gold badge34 silver badges29 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Lye Fish · Accepted Answer · 2015-01-31 00:17:15Z

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

edited Jan 31, 2015 at 0:17

answered Jan 30, 2015 at 23:52

Lye Fish

2,57818 silver badges25 bronze badges

9 Comments

HeadCode Over a year ago

There is a difference in that using the new operator with a fat arrow function will result in a TypeError. robcee.net/2013/fat-arrow-functions-in-javascript

Barmar Over a year ago

What about componentWillMount() in the second part of the question? Is that equivalent to componentWillMount: function()?

Barmar Over a year ago

Could you add references to the appropriate sections of the ECMAScript 6 spec?

Lye Fish Over a year ago

@Barmar: That threw me off. At first it looked like the ECMAScript 5 getter syntax for object initializers, but now I see it doesn't have the get. I think it's a shorthand method assignment syntax that is complementary to the new class stuff, but I don't know all the details.

Lye Fish Over a year ago

@Barmar: Added MDN refs for fat arrow functions and for object initializer syntax.

|

Collectives™ on Stack Overflow

Basic JavaScript Syntax

2 Answers 2

Comments

9 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

9 Comments

Your Answer

Sign up or log in

Post as a guest

Related