Subscribe to my email list now at http://jauyeung.net/subscribe/

Follow me on Twitter at https://twitter.com/AuMayeung

Many more articles at https://medium.com/@hohanga

Even more articles at http://thewebdev.info/

Cleaning up our JavaScript code is easy with default parameters and property shorthands.

In this article, we’ll look at how we can use them to make our code easier to read and write.

ES6 Default Parameters

We can use default parameters syntax to set the default values of parameters.

If the argument is omitted or undefined, then the default parameter value will be set as the value of the parameter.

For instance, we can use it as follows:

const add = (a, b = 2) => a + b;

Then when we call add as follows:

const result = add(1);

result is 3 since b is 2 and a is 1.

This is much better than writing:

const add = (a, b) => {
  b = b || 2;
  return a + b;
}

Since we don’t have to change the value of b and write 2 lines instead of 1.

ES6 Property Shorthands

Property shorthands are great because they let us add properties to our code JavaScript in a shorter way.

For instance, if we have:

const a = 1,
  b = 'foo',
  c = 3;

Instead of writing:

const obj = {
  a: a,
  b: b,
  c: c
}

We write:

const obj = {
  a,
  b,
  c
}

Both mean the same thing. It’s just that the shorthand is much shorter than the original version.

Now obj.a is 1, obj.b is 'foo' and obj.c is 3.

Singletons

A singleton is an object that can be the only instance of a class.

We can use that to manage anything global like app-wide state.

With ES6 or newer, we can just create a constant and then prevent the object from changing with Object.freeze .

For instance, we can write the following:

const data = [];
const Store = {
  add: item => data.push(item),
  getById: id => data.find(d => d.id === id)
}

Object.freeze(Store);

In the code above, we have the Store object with the add and getById methods.

The add method adds a new item to the end of the array, and getById finds the item by ID.

Then we call Object.freeze with the Store object to freeze the object in place.

We can also encapsulate data by putting it in a class as follows:

class Store {
  constructor() {
    this.data = [];
  }

  add(item) {
    this.data.push(item);
  }

  getById(id) {
    return this.data.find(d => d.id === id);
  }
}

const store = new Store();
Object.freeze(store);

In the code above, we have the Store class, which has the same methods as the Store object in the previous example.

Then we create a new store and then freeze it in place.

Now we have an immutable instance, but we can still create more than one instance of Store .

Therefore, we’ve to make that the constructor always returns the same instance.

To do that, we write:

class Store {
  constructor() {
    if (!Store.instance) {
      this.data = [];
      Store.instance = this;
    }
    return Store.instance;
  }

  add(item) {
    this.data.push(item);
  }

  getById(id) {
    return this.data.find(d => d.id === id);
  }
}

const store = new Store()
Object.freeze(store);

We have the following constructor:

constructor() {
  if (!Store.instance) {
    this.data = [];
    Store.instance = this;
  }
  return Store.instance;
}

We can return whatever we want when we instantiate a JavaScript class, so we can make sure that we always return the same instance by setting this to Store.instance .

Store.instance is static so it’s shared by all instances of the class.

Therefore, we can return it if it’s defined.

Conclusion

Default parameters are great for shortening our code so that we don’t have to set the parameter’s value with the || operator.

Instead, we just set the default value in the function signature.

The property shorthand is great because we don’t have to write out the colon all the time, we just list the parameter names and the values will be set if a variable or constant in the scope and has the same name as the property.

With the singleton pattern, we can always return the same instance of an object.

We just create an object and freeze it or we create a class that always returns the same instance of an object.

The post JavaScript Clean Code — Default Parameters, Properties, and Singletons appeared first on The Web Dev.