Javascript destructuring in method

Question

Can someone explain what exactly is going on in depth and if doing it this way is best practice for this line:

getAdvertisingChannelHtml({site, adViews, clicks, conversions, conversionRate} = this){

My understanding is that I am destructuring in a method and passing Object Properties in a method and making it equal to the this object?

class AdvertisingChannel {
  constructor(data) {
    Object.assign(this, data);
    this.conversionRate = (this.conversions / this.clicks) * 100;
  }
  getAdvertisingChannelHtml(
    { site, adViews, clicks, conversions, conversionRate } = this
  ) {
    return `
          <div class="site-name"> ${site} </div>
          <div>Views: ${adViews} </div>
          <div>Clicks: ${clicks} </div>
          <div>Conversions: ${conversions} </div>
          <div>Conv. Rate: <span class="highlight"> ${conversionRate} %</span></div> 
      `;
  }
}

Tried looking at documentation and trying to find out more about what exactly is going on but was still confused.

Answer 1

The function will destructure its Object parameter and assign the values to specific variables ( site , adViews , clicks , conversions , conversionRate ). The parameter also got set to this by default if you called the function without passing an argument.

const data = {
  site: 'stackoverflow.com',
  adViews: 10,
  clicks: 1000,
  conversions: 10,
};
const advertisingChannel = new AdvertisingChannel(data);

advertisingChannel.getAdvertisingChannelHtml();

/**
 * site: 'stackoverflow.com'
 * adViews: 10
 * clicks: 1000
 * conversions: 10
 * conversionRate: 1
 */

advertisingChannel.getAdvertisingChannelHtml({
  site: 'example.com',
  adViews: 2,
  clicks: 2000,
  conversions: 20,
});

/**
 * site: 'example.com'
 * adViews: 2
 * clicks: 2000
 * conversions: 20
 * conversionRate: undefined ( because it does not set yet)
 */

Refer: Default parameters