How to understand this syntax? var {...} = React;

Question

in react native example: https://github.com/facebook/react-native

var React = require('react-native');
var { ScrollView, TouchableHighlight, Text } = React;

var TouchDemo = React.createClass({
  render: function() {
    return (
      <ScrollView>
        <TouchableHighlight onPress={() => console.log('pressed')}>
          <Text>Proper Touch Handling</Text>
        </TouchableHighlight>
      </ScrollView>
    );
  },
});

what is this syntax mean?

var { ScrollView, TouchableHighlight, Text } = React;

I typed it in nodejs console cause syntax error. Is this special Javascripts syntax only for React Native?

Thanks

I think this is an ES6 feature, but it may be a JSX-specific thing as well https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Destructuring_assignment — Explosion Pills, Apr 22 '15 at 16:46
See destructuring assignment [here](https://www.airpair.com/javascript/posts/using-es6-harmony-with-nodejs#2-2-destructuring-assignment) and [here](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Destructuring_assignment). It's syntax sugar to save typing . — jfriend00, Apr 22 '15 at 17:18

score 4 · Accepted Answer · answered Apr 22 '15 at 16:48

4

That is Destructuring, an ECMAScript 6 feature. As far as I know it is not included in any version of node.js or iojs yet, but there may be a command line flag you can use to enable it.

answered Apr 22 '15 at 16:48

Paul

139,544
27
275
264

Thank you. It is really handy. Like this feature since Python. – kkpoon Apr 23 '15 at 00:14

score 1 · Answer 2 · answered May 02 '15 at 14:21

This document describes the JavaScript environment which is supported by React Native.

ES5

Reserved Words: promise.catch(function() { });

ES6

Arrow function: <C onPress={() => this.setState({pressed: true})}

Call spread: Math.max(...array);

Class: class C extends React.Component { render() { return <View />; } }

Destructuring: var {isActive, style} = this.props;

Iteration: for (var element of array) { }

Computed Properties: var key = 'abc'; var obj = {[key]: 10};

Object Consise Method: var obj = { method() { return 10; } };

Object Short Notation: var name = 'vjeux'; var obj = { name };

Rest Params: function(type, ...args) { }

Template: var who = 'world'; var str = `Hello ${who};`

ES7

Object Spread: var extended = { ...obj, a: 10 };

Function Trailing Comma: function f(a, b, c,) { }

How to understand this syntax? var {...} = React;

2 Answers2