Destructuring Assignment

Makes it possible to unpack stuff from arrays or objects, into distinct variables.

Assume we have an object defined as follows:

const product = {
    id: 1074,
    label: "Earbuds",
    code: "p-1074-earbuds"
}

Here's the usual way to access properties of the object:

const id = product.id;
const label = product.label;
const code = product.code;

Here's a convenient way to pull out the properties using the destructuring assignment syntax. This has the same effect as the syntax above.

const { id, label, code } = product;

In Report Builder, property functions take a single argument named context. So a function could be defined like this:

(context) => context.props.countryLabel + ": " + context.props.productLabel

But you may often see this written more concisely using function parameter destructuring.

({ props }) => props.countryLabel + ": " + props.productLabel

Technically you could destructure the individual props too, and here's a search link if you're interested.

Arrays can be destructured too. See tutorial below.

Here's a great W3 Schools tutorial. If you want to find additional articles and videos, here's a search link.