This lesson's interactive features are locked, please to keep using them

Destructuring

It's admittedly annoying to have to get the return values from an object by using the . operator. The destructuring assignment lets us unpack object properties easily.

So, instead of this:

const apple = {
  radius: 2,
  color: "red",
};

const radius = apple.radius;
const color = apple.color;

We can do this:

const apple = {
  radius: 2,
  color: "red",
};

const { radius, color } = apple;

I use it all the time to unpack function return values:

function getApple() {
  const apple = {
    radius: 2,
    color: "red",
  };
  return apple;
}

const { radius, color } = getApple();
console.log(radius); // 2
console.log(color); // red

Destructuring also works in function parameters, which means that if you write a function that takes an object as an argument, you can unpack the object's properties in function definition.

So, instead of this:

function eatApple(apple) {
  console.log(`ate a ${apple.color} apple with a radius of ${apple.radius}`);
}

We can do this:

function eatApple({ radius, color }) {
  console.log(`ate a ${color} apple with a radius of ${radius}`);
}

Assignment

Now that you've fixed the output of calculateCampaignMetrics, use destructuring to assign openRate, clickRate and conversionRate from the given call on line 14.