Maintainable JavaScript — Accidental Globals

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 avoiding accidental creation of global variables.

Avoiding Accidental Globals

We should avoid accidental global variables.

If we’re writing JavaScript scripts, then we’ll create global variables by default if we assign a value to variables without using any keyword.

For instance, if we have:

count = 10;

then count is a global variable.

If we have a linter like JSHint or ESLint, then we’ll see a warning if we have something like that.

Also, strict mode will prevent us from creating global variables accidentally.

So if we have:

'use strict';
count = 10;

then we’ll get an error.

If we run the code above, we get ‘Uncaught ReferenceError: count is not defined’.

Strict mode is available in almost all modern browsers so we should use it.

Modules have strict mode on by default, so we’ll always get the error if we try to create new global variables.

Existing global variables should be treated as read-only.

We shouldn’t add any new properties to them to avoid errors.

For instance, if we use global variables like window or document , then we shouldn’t set any properties to them.

If we work with older code, we should update them whenever we can and enable strict mode.

One Global Object

Many libraries provide us with their own global objects that we can use in our code.

jQuery has the $ and jQuery objects.

The latter is added for compatibility with other libraries that use $ .

Vue has the Vue global variable to let us create a new Vue instance.

We create one global object with a unique name so that it’s unlikely that it’ll clash with other libraries in the app.

For instance, we may create our own constructor by writing:

function Person(name) {
  this.name = name;
}

Person.prototype.speak = function(speech) {
  console.log(`${this.name}: ${speech}`)
};

const james = new Person("james");
const mary = new Person("mary");
const jane = new Person("jane");

We create a Person constructor with the speak prototype method.

It takes the name parameter and assigns that to this.name .

Also, it has the speak instance method.

Then we can use it with the new operator.

This creates many global-scoped variables.

Instead of putting them all in the global scope, we put them in an object so that they aren’t global anymore.

For instance, we can write:

const obj = {};

obj.Person = function(name) {
  this.name = name;
}

obj.Person.prototype.speak = function(speech) {
  console.log(`${this.name}: ${speech}`)
};

const james = new obj.Person("james");
const mary = new obj.Person("mary");
const jane = new obj.Person("jane");

We put our Person constructor in the obj object so that the Person constructor isn’t in the global scope.

This way, we won’t be able to accidentally change it or overwrite it.

Conclusion

We put our code in an object so that they can’t be in the global scope.

Also, accidental global variables should be avoided with strict mode.

The post Maintainable JavaScript — Accidental Globals appeared first on The Web Dev.