Categories
JavaScript Best Practices

Maintainable JavaScript — Objects We Don’t Own

Spread the love

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 how to handle objects we don’t own.

Objects We Own

The objects we own are the ones that we create.

The code that creates the object may not be written by us, but the object is created by us.

This means the objects we don’t own our ones like native objects such as Object , Date , etc.

We also don’t own DOM objects, built-in global objects, or library objects.

These are all part of the project’s environment.

These should be treated as read-only.

We shouldn’t override methods to these objects.

And we shouldn’t add or remove existing methods from these objects.

This is because it’s easy for us to do things that no one else expects.

This leads to confusion and waste time tracing unexpected code.

Don’t Override Methods

Overriding methods of objects we don’t own is one of the worst practices in JavaScript.

Within scripts, it’s very easy to override an existing methods.

For instance, we can write:

document.getElementById = () => {
  return null;
}

Then everyone would be confused of why document.getElementById is always returning null .

In a script, there’s nothing preventing us from overwriting DOM methods.

We can also overwrite any other property in any library code.

For instance, someone may write code like:

document._originalGetElementById = document.getElementById;
document.getElementById = (id) => {
  if (id === "window") {
    return window;
  } else {
    return document._originalGetElementById(id);
  }
};

This is also bad since it changes the way that standard library methods work.

This also brings confusion just like anything else.

The new code is called with id is 'window' , but the original is used with anything else.

This is just as bad since getElementById sometimes works as we expect and sometimes does.

Therefore, we should never override any methods so that we always have them work like expect them to.

Don’t Add New Methods

It’s also pretty easy to add new methods to existing objects in JavaScript.

We only need to assign a function onto an existing object to make it a method.

It allows us to modify all kinds of objects.

For instance, we can add methods to document :

document.foo = () => {
  console.log('hello');
};

We can also add methods to the Array ‘s prototytpe :

Array.prototype.foo = () => {
  console.log('hello');
};

They’re both bad.

And there’s nothing stopping us from adding methods to them.

Like with overriding methods, we make a library object behave differently from what we expect.

Also, the method that we added may be added to the standard library.

Then we have 2 methods that do different things and we overwrote it with our version.

Even subtle differences can cause lots of confusion.

Conclusion

We shouldn’t add or override methods of any built-in or library objects.

This is because we’ll be confused on why the code works differently than we expect.

By John Au-Yeung

Web developer specializing in React, Vue, and front end development.

Leave a Reply

Your email address will not be published. Required fields are marked *