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 wrapper types and loose coupling.
Primitive Wrapper Types
Primitive wrapper types are instances of the String , Boolean , and Number constructors.
They’re little known and often misunderstood pars of the JavaScript language.
They all exist as constructors in the global scope and each represents the object form of the respective primitive type.
They make primitive values act like objects.
For instance, we can write:
const name = 'james'.toUpperCase()
to return 'james' in upper case form.
What it’s done in this line is that 'james' is converted into an object with the String constructor.
Then we called the toUpperCase method in the string instance.
This is what JavaScript engines do under the surface.
After the result is returned, it’s destroyed automatically.
Another one will be created when it’s needed.
It’s possible to use these constructors in our own code.
For instance, we can write:
let name = new String("james");
const author = new Boolean(true);
const count = new Number(10);
We used the primitive wrapper constructors to create wrapper objects.
However, they make the code longer and more confusing, so we should avoid them.
The Google and Airbnb style guides all flag them.
And linters like ESLint and JSHint will all warn us if they exist.
Loose Coupling of UI Layers
JavaScript is often used for creating web app UIs.
We create them with the HTML is used to define the semantics of the page.
CSS is used for styling and layout of the page.
And JavaScript adds dynamic behavior to our page to make it more interactive.
CSS and JavaScript act like siblings.
It doesn’t have a dependency on CSS, but we can use it to do the styling
We can have a page with just HTML and CSS.
And it’s possible to have a page with just HTML and JavaScript.
To make web UI code maintainable, need to make the coupling of each part loose.
Tight coupling means that one component has direct knowledge of the other and if one changes, then the other would also change.
For instance, if the alert CSS class is used everywhere in our HTML, then when we need to change the alert class to something else, then we need to change it somewhere else.
Loose coupling is achieved when we can make changes to a single component without affecting the others.
We want to make code changes easy, so we need components to be loosely coupled.
However, there’s no way that 2 components have no coupling.
They’ll have to interact with each other somehow.
A loosely coupled web UI is easier to debug.
We can look at HTML to check the text or structure.
When styling issues arise, we know it’s probably in the CSS.
And if there’re any behavior issues, then we can look at the JavaScript.
Conclusion
We should keep our code loosely coupled and avoid using primitive wrapper constructors in our code.
