What is the reverse assignment (destructuring assignment) in ES6 javascript?

Question

export const startAddExpense = () => {
  return (dispatch) => {
    const {
      description = '',
      note = '',
      amount = 0,
      createdAt = 0
    } = expenseData;
    const expense = { description, note, amount, createdAt };

    database.ref('expenses').push(expense).then((ref) => {
      dispatch(addExpense(ref.key, ...expense));
    })
  }
}

export class AddExpensePage extends React.Component {
  onSubmit = (expense) => {
    this.props.startAddExpense(expense);
    this.props.history.push('/');
  };
  render() {
    return (
      <div>
        <h1>Add Expense</h1>
        <ExpenseForm
          onSubmit={this.onSubmit}
        />
      </div>
    );
  }
}

I don't know what expenseData is. Why is the equal sign on the right?

What does the code say?

Answer 1

This is called destructuring assignment syntax which was introduced in es6. It is a way to pluck values from an existing variable

const foo = { bar: 0, baz: 1 } 
const { bar } = foo
console.log(bar) // 0

the older way to write this would be

var foo = { bar: 0, baz: 1 } 
var bar = foo.bar
console.log(bar) // 0