Maintainable JavaScript — Facade, and Object Freezing

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 some design patterns.

Facade Pattern

The facade pattern is a design pattern that lets us create a new interface for existing objects.

Facades are also called wrappers because they wrap existing objects with a different interface.

For instance, we can create a class with methods to manipulate DOM objects.

We can write:

class DOMWrapper {
  constructor(element) {
    this.element = element;
  }

  addClass(className) {
    element.className += ` ${className}`;
  }
}

We have a constructor that takes an element object which is a DOM element.

Then we have an addClass method to let us add the className to the className string property.

Then we can use it by writing:

const wrapper = new DOMWrapper(document.querySelector("div"));
wrapper.addClass("selected");

A wrapper class is useful for extending the functionality of existing objects.

We have complete control over the interface so that we can control the functionality that’s available to the user.

Also, we can add new methods that are simpler to use than existing ones.

Polyfills

Polyfills becomes popular when ES5 + and HTML5 features are being added to browsers.

We can use polyfills to make features available to our apps before they’re added to browsers.

Many methods of built-in objects like forEach , map , filter , etc. of arrays are added after the first version of JavaScript.

This may not be available in older browsers, so we have to add polyfills for ones that don’t.

Once the browsers our app supports implemented the features, then we no longer need the polyfill.

We can easily remove them when we only support browsers with native functionality.

When we pick a polyfill, we should make sure it matches the native version as much as possible.

Preventing Modification

ES5 added some methods to prevent the modification of objects.

They’re supported in almost all modern browsers.

We can prevent the adding properties to an object by using the Object.preventExtensions method.

The Object.seal method has the capabilities of preventExtensions . And it prevents existing properties and methods from being deleted.

The Object.freeze method has the capabilities of seal , and it prevents existing properties and methods from being modified.

So we can write:

const person = {
  name: "james"
};
Object.preventExtensions(person);

Then we can call the Object.isExtensible method to check if the object is frozen or not:

console.log(Object.isExtensible(person));

If it’s false , then it’s frozen.

And if we try to add a property to it:

person.age = 50;

it’ll fail silently unless the code has strict mode enabled.

Likely, we can call Objec.seal() to seal an object.

Then we can write:

const person = {
  name: "james"
};

Object.seal(person);
console.log(Object.isSealed(person));

We sealed the object, so isSealed should return true .

Now if we try to add or remove properties:

person.age = 50;
delete person.name;

they’ll both fail silently unless strict mode is on.

Likewise, we can use the Object.freeze method to freeze an object.

We can write:

const person = {
  name: "james"
};

Object.freeze(person);

Then we can check if we can modify our object by writing:

console.log(Object.isExtensible(person));
console.log(Object.isSealed(person));
console.log(Object.isFrozen(person));

person.name = "mary";
person.age = 25;
delete person.name;

isExtensible should return false and the other 2 should be true .

The object modifying code should fail silently if strict mode is off.

And if strict mode is on, then we should see error messages.

Conclusion

There’re various Object static methods to stop us from changing our objects.

Also, we can create a facade around our existing code to create a new interface for them.