Sarrus25 Sarrus25 - 2 years ago 188
Javascript Question

How to supply default values to ES6 class properties?

I have a JavaScript class I would like to supply with default values using an object. I only want the default values to be part of the class if user input is not otherwise supplied for some of the values. However, I am not sure how to implement this. Here is my class:

// Class definition, properties, and methods
class iTunesClient {
constructor(options) {
this.term = options.terms;
this.country = options.country;
this.media = options.media;
this.entity = options.entity;
this.attribute = options.attribute;
this.callback = options.callback;
this.limit = options.limit;
this.lang = options.lang;
this.version = options.version;
this.explicit = options.explicit;
this.url = options.url;
}
}


Here are my default values:

// Default values defined according to iTunes API
const defaults = {
terms: 'default',
country: 'US',
media: 'all',
entity: '',
attribute: '',
callback: '',
limit: 50,
lang: 'en-us',
version: 2,
explicit: 'yes',
url: '',
};


I realize this is possible through default parameters for functions, but I would rather supply an object containing the default values.

Answer Source

A typical way to do this is to use Object.assign() to merge passed-in values with default values:

// Class definition, properties, and methods
class iTunesClient {
  constructor(options) {

    // Default values defined according to iTunes API
    const defaults = {
      terms: 'default',
      country: 'US',
      media: 'all',
      entity: '',
      attribute: '',
      callback: '',
      limit: 50,
      lang: 'en-us',
      version: 2,
      explicit: 'yes',
      url: '',
    };      

    let opts = Object.assign({}, defaults, options);
    this.term = opts.terms;
    this.country = opts.country;
    this.media = opts.media;
    this.entity = opts.entity;
    this.attribute = opts.attribute;
    this.callback = opts.callback;
    this.limit = opts.limit;
    this.lang = opts.lang;
    this.version = opts.version;
    this.explicit = opts.explicit;
    this.url = opts.url;
  }
}

To explain how Object.assign() works here:

  1. It starts with {} as a target (an empty object)
  2. Then it copies all the defaults into the empty object
  3. Then it copies all the passed in properties into that same target
  4. Then it returns the target object which you use for initializing all your instance data

Of course, if your instance property names are the same as the ones in your options object, you could do this in a more DRY fashion like this:

// Class definition, properties, and methods
class iTunesClient {
  constructor(options) {

    // Default values defined according to iTunes API
    const defaults = {
      terms: 'default',
      country: 'US',
      media: 'all',
      entity: '',
      attribute: '',
      callback: '',
      limit: 50,
      lang: 'en-us',
      version: 2,
      explicit: 'yes',
      url: '',
    };      

    let opts = Object.assign({}, defaults, options);

    // assign options to instance data (using only property names contained
    //  in defaults object to avoid copying properties we don't want)
    Object.keys(defaults).forEach(prop => {
        this[prop] = opts[prop];
    });
  }
}
Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download