JavaScript Clean Code — Default Parameters, Properties, and Singletons
Tags: javascript, webdev, codequality, codenewbie
Published: 2020-07-25 19:52:10

---
title: JavaScript Clean Code — Default Parameters, Properties, and Singletons
published: true
date: 2020-07-21 00:59:40 UTC
tags: javascript,webdev,codequality,codenewbie
canonical_url: https://thewebdev.info/2020/07/21/javascript-clean-code%e2%80%8a-%e2%80%8adefault-parameters-properties-and-singletons/?utm_source=rss&utm_medium=rss&utm_campaign=javascript-clean-code%25e2%2580%258a-%25e2%2580%258adefault-parameters-properties-and-singletons
---

**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](https://thewebdev.info/2020/07/21/javascript-clean-code%e2%80%8a-%e2%80%8adefault-parameters-properties-and-singletons/) appeared first on [The Web Dev](https://thewebdev.info).