Lesson

Destructuring

A visitor in Colonia is a labeled bag of values. Each label is a key. Each value sits behind that key.

const visitor = { name: "Ada", lot: "forum-east" };

Read one label at a time with a dot:

visitor.name  // "Ada"
visitor.lot   // "forum-east"

Destructuring unpacks several labels in one line. The names inside the curly braces must match the keys on the object.

const { name, lot } = visitor;
// name is "Ada"
// lot is "forum-east"

These two blocks do the same work:

const name = visitor.name;
const lot = visitor.lot;

const { name, lot } = visitor;

You will use this constantly in React. A house card's props is just an object: function House({ tag }) { ... } is the same unpack.

I'm ready — try the exercise →