Maintainable JavaScript — Accidental Globals
Tags: javascript, webdev, beginners, codequality
Published: 2020-10-19 00:55:13

---
title: Maintainable JavaScript — Accidental Globals
published: true
date: 2020-07-29 19:57:01 UTC
tags: javascript,webdev,beginner,codequality
canonical_url: https://thewebdev.info/2020/07/29/maintainable-javascript%e2%80%8a-%e2%80%8aaccidental-globals/?utm_source=rss&utm_medium=rss&utm_campaign=maintainable-javascript%25e2%2580%258a-%25e2%2580%258aaccidental-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](https://thewebdev.info/2020/07/29/maintainable-javascript%e2%80%8a-%e2%80%8aaccidental-globals/) appeared first on [The Web Dev](https://thewebdev.info).