What does this it mean when assigning to a { ... } object in javascript?

Question

I came across this line of code today while learning React:

import React, {Component, PropTypes } from 'react';

class App extends Component {

    static propTypes = {
        transactions: PropTypes.array,
        summary: PropTypes.object,
        gridFields: PropTypes.array,
        actions: PropTypes.object
    };
    componentWillMount() {
        const { transactions, actions } = this.props;
        actions.requestSum(transactions);
    }

    render() {
        const {
          transactions,
          gridFields,
          summary,
          actions
        } = this.props;

        return (
          <div className="viewport">
            <Header addTodo={actions.addTodo} />
            <Grid fields={gridFields} data={transactions}>
              <TransactionForm action={actions.addTransaction}/>
              <TransactionSummary data={summary} fields={gridFields} />
            </Grid>
          </div>
        );
      }
    }

}

But what does const {transactions, actions} = this.props mean? I am used to things like this:

const myVariable = 3;

How does React know what to store in transactions, and actions?

This is [object destructuring](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Destructuring_assignment#Object_destructuring) from ES6. — 4castle, Mar 07 '17 at 01:47

score 1 · Accepted Answer · answered Mar 07 '17 at 01:50

1

This destructuring statement

const {transactions, actions} = this.props;

means similar to below:

const transactions = this.props.transactions,
      actions = this.props.actions;

For more destructuring understanding head over to here: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Destructuring_assignment

answered Mar 07 '17 at 01:50

Rikin

5,351
2
15
22

if you're going to answer a question which has already been asked and answered dozens of times, please try to add some value by providing links to specs, examples, or documentation. But actually voting to close as a duplicate is preferable. – Mar 07 '17 at 01:52
+1 Thanks @Rikin for at least telling me what the name of this things is before closing this question. At least I can google it properly now. Glad there are some people out there who want to be helpful instead of acting all superior. Sheeh. – user3685285 Mar 07 '17 at 02:32

What does this it mean when assigning to a { ... } object in javascript?

1 Answers1