4

In the React native website, there is the following line of code:

var React = require('react-native');
var { TabBarIOS, NavigatorIOS } = React;

In the second line of the example, what is the meaning of the brackets around the TabBarIOS and NavigatorIOS variables?

Benjamin Malley
  • 233
  • 4
  • 13
nosman
  • 95
  • 7
  • MDN Documentation: [Operators - Destructuring assignment](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Destructuring_assignment) – epascarello Jul 15 '15 at 03:14

1 Answers1

8

This is called a destructuring assignment. It's a newer feature being brought in the ECMAScript 6 spec.

Here is an example object:

var test = {
  "hello": 1,
  "world": 2
}

If we deconstruct it like this:

var {hello, world} = test;

This is the equivalent to doing:

var hello = test.hello,
    world = test.world;

But, there is more fun stuff you can do with destructuring assignments...

Lets say we have this object:

var bucket = {
  ExampleObject: function(input){
    this.input = input.trim();
    return this.input;
  },

  TestingObject: function(example){
    this.example = example || {};
    console.log(this.example.input);
  }
}

Just for the record, I've given the members annoying names... So when destructuring, we can rename them like this:

var {ExampleObject: Example, TestingObject: Test} = bucket;

The binding pattern follows a syntax like so:

{ObjectMemberName}
// Or
{ObjectMemberName: VariableName}

For more information, you can look at the ECMAScript 6 specification draft or the MDN documentation

  • 1
    Also, I noticed you're a newer user... If this post solved your question, you can check the green checkmark if you'd like. –  Jul 15 '15 at 03:12