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:

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:

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:

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:

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:

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 appeared first on The Web Dev.