16

What does this mean in Javascript ? I found this in react-router examples

var { Route, Redirect, RouteHandler, Link } = Router;

I get the following error when it is run through browserify.

"Uncaught SyntaxError: Unexpected token {"

https://github.com/rackt/react-router/blob/master/examples/dynamic-segments/app.js

Esprima also gives the same error: http://esprima.org/demo/validate.html

Makyen
  • 27,758
  • 11
  • 68
  • 106
Prasanth
  • 593
  • 5
  • 14
  • Where exactly do you see that example (link please)? It clearly isn't legal javascript, but it is probably useful to explain what it is or what it is intended to be used for (or perhaps just a mistake). – jfriend00 Nov 25 '14 at 20:52
  • see the example here: https://github.com/rackt/react-router/blob/master/examples/dynamic-segments/app.js – Prasanth Nov 25 '14 at 20:54
  • That linked example is most definitely not Javascript, so there is clearly some other parser (apparently [JSX](http://jsx.github.io/)) that runs before any JS interpreter sees that code. – jfriend00 Nov 25 '14 at 20:56
  • tl;dr: Yes it is valid JavaScript, but it's not supported by all browsers yet. See http://kangax.github.io/compat-table/es6/#destructuring . – Felix Kling Nov 25 '14 at 21:07
  • I also want to add that you can use ES6 features when using JSX because the JSX transpiler understands them and converts them to ES5. However, you can also use ES6 features today with JSX: https://github.com/esnext/esnext . – Felix Kling Nov 25 '14 at 21:21

3 Answers3

24

Apparently it's called a destructuring assignment.

From another post here:

{x, y} = foo;

is equivalent to

x = foo.x;
y = foo.y;

This is part of ECMAScript 6, and Facebook's JSX transform has an optional flag to enable transpiling select ES6 syntax (including destructuring) to ES5-compatible syntax, which react-router uses.

Here is the original post with answer by Mike Christensen:

What do {curly braces} around javascript variable name mean

Community
  • 1
  • 1
HeadCode
  • 2,642
  • 1
  • 12
  • 24
1

It worked after changing my code to

var Route = Router.Route;
var RouteHandler = Router.RouteHandler;
var Link = Router.Link;

More information about this can be found here: http://facebook.github.io/react/docs/transferring-props.html#transferring-with-...-in-jsx

Prasanth
  • 593
  • 5
  • 14
  • 1
    It's not JSX. It's JavaScript. http://people.mozilla.org/~jorendorff/es6-draft.html#sec-destructuring-assignment – Felix Kling Nov 25 '14 at 21:05
0

That's a JSX file, not JavaScript. It was invented by Facebook as part of React.js. It gets compiled into a JavaScript file before execution. The file had @jsx pragma in the previous commit: https://github.com/rackt/react-router/commit/3abe98444481598beef22d3af2bf01effc556c6b

JSX allows to do things like this:

// Using JSX to express UI components.
var dropdown =
  <Dropdown>
    A dropdown list
    <Menu>
      <MenuItem>Do Something</MenuItem>
      <MenuItem>Do Something Fun!</MenuItem>
      <MenuItem>Do Something Else</MenuItem>
    </Menu>
  </DropDown>;

render(dropdown);

and this

var HelloMessage = React.createClass({
  render: function() {
    return <div>Hello {this.props.name}</div>;
  }
});

React.render(<HelloMessage name="John" />, mountNode);
Ivan Nikitin
  • 2,771
  • 22
  • 31
  • 5
    `var { Route, Redirect, RouteHandler, Link } = Router;` is not JSX. Your answer doesn't seem to address this at all. – Felix Kling Nov 25 '14 at 21:05
  • @FelixKling that's it. Take a look at the last commit comment and render method in the middle of the document topic caster references. – Ivan Nikitin Nov 25 '14 at 21:14
  • @FelixKling I updated my answer with a link to previous commit that contains jsx pragma tag. – Ivan Nikitin Nov 25 '14 at 21:17
  • 4
    Not sure what your point is. Only because `var { Route, Redirect, RouteHandler, Link } = Router;` is used together with JSX doesn't make it JSX. What may be confusing to people is that one can use ES6 features because the JSX compiler understands them and converts them to ES5. – Felix Kling Nov 25 '14 at 21:18
  • 1
    @FelixKling the point is the code file referenced by the post author gets compiled by JSX-compiler into a JavaScript file that can be executed across all browsers, not in FireFox only. JSX syntax is similar to ECMAScript6 in many aspects, but the file referenced uses many other features of JSX and it's incorrectly to say that this is ECMAScript6. It handles html markup as JSX do, not ECMAScript6. Your response is absolutely correct without a link to the source file. – Ivan Nikitin Nov 25 '14 at 21:25
  • 4
    *"JSX syntax is similar to ECMAScript6 in many aspects"* Not all. JSX is just a *syntax extension for JavaScript*, not a language itself. The extension is rather small: http://facebook.github.io/jsx/ . The part the OP is asking about is ECMAScript 6 for all intends and purposes. – Felix Kling Nov 25 '14 at 21:32
  • @FelixKling where do you see a reference to ECMA6 in the question? – Ivan Nikitin Nov 25 '14 at 21:35
  • 4
    Destructuring, `var { Route, Redirect, RouteHandler, Link } = Router;`, is an ES6 feature. It is *not* part of JSX. That's what I mean. – Felix Kling Nov 25 '14 at 21:35