Maintainable JavaScript — Config Data
Tags: javascript, codequality, codenewbie
Published: 2020-10-13 20:13:18

---
title: Maintainable JavaScript — Config Data
published: true
date: 2020-07-29 19:58:52 UTC
tags: javascript,codequality,codenewbie
canonical_url: https://thewebdev.info/2020/07/29/maintainable-javascript%e2%80%8a-%e2%80%8aconfig-data/?utm_source=rss&utm_medium=rss&utm_campaign=maintainable-javascript%25e2%2580%258a-%25e2%2580%258aconfig-data
---

**Check out my books on Amazon at https://www.amazon.com/John-Au-Yeung/e/B08FT5NT62**

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

Creating maintainable JavaScript code is important if want to keep using the code.

In this article, we’ll look at the basics of creating maintainable JavaScript code by looking at ways to externalize config data.

### Good Ways of Detecting Properties

We can use the `in` operator to check if an object property exists in an object.

For instance, we can write:

```js
const object = {
  count: 0,
};

if ("count" in object) {
  // ...
}

```

to check if the `count` property is added to the `object` object.

The expression in the `if` block heading will return `true` so the block will run.

This checks if the `count` property is in the object itself and whether it’s in its prototype chain.

To check if a property is a non-inherited property of an object, we can use the `hasOwnProperty` method.

For instance, we can write:

```js
const object = {
  count: 0,
};

if (object.hasOwnProperty('count')) {
  // ...
}

```

It returns `true` if `'count'` is an own property of `object` and `false` otherwise.

If we aren’t sure whether `hasOwnProperty` exists in `object` , we can write:

```js
if ("hasOwnProperty" in object && object.hasOwnProperty('count')) {
  // ...
}

```

Now we know for sure that `hasOwnProperty` exists before calling it.

### Separate Configuration Data from Code

Configuration data is any hardcoded values in our app.

If we have:

```js
function validate(value) {
  if (!value) {
    console.log("Invalid value");
    location.href = "/errors/invalid";
  }
}

```

then we have 2 pieces of config data in our code.

One is the `'Invalid value'` string.

And the 2nd is the `'/error/invalid'` URL string.

URLs and messages may change, so we may separate them so that we can define one reusable variable for each and then reference that everywhere else.

Data that are configuration data include:

- URLs
- Strings that are displayed in the UI
- Repeated unique values
- Settings
- Any value that may change

We don’t want to modify multiple parts of our source code just to change some config values.

### Externalizing Configuration Data

The first step to separating configuration data from our code is to externalize the config data.

This means getting the data out of the middle of our JavaScript code.

Instead of what we have before, we instead write:

```js
const config = {
  MESSAGE_INVALID_VALUE: "Invalid value",
  URL_INVALID: "/errors/invalid.php",
};

function validate(value) {
  if (!value) {
    console.log(config.MESSAGE_INVALID_VALUE);
    location.href = config.URL_INVALID;
  }
}

```

We created a `config` object which has the config data in its own location,

Then we referenced it in our code.

Each property in `config` is a piece of data.

The property is uppercase so that we can tell them apart from other properties.

The most important part is externalizing the data,.

The rest is up to our own preference.

### Conclusion

Config data is hardcoded data that are used in multiple places.

We should externalize our config data so that we can use them in multiple places without repetition.

This way, we can change it once and don’t have to worry.

The post [Maintainable JavaScript — Config Data](https://thewebdev.info/2020/07/29/maintainable-javascript%e2%80%8a-%e2%80%8aconfig-data/) appeared first on [The Web Dev](https://thewebdev.info).