JavaScript lets us do a lot of things. It’s sometimes too forgiving in its syntax.
In this article, we’ll look at some antipatterns that we should avoid when we write JavaScript code, including the avoidance of global variables.
Writing Maintainable Code
We got to write maintainable code to save us time when changing code.
Messy code is impossible to read and work with.
Even if we can do something with them, we’ll create bugs easily.
Minimizing Globals
We got to minimize the use of global variables.
This means that we shouldn’t create any global variables ourselves and we just use the ones that are built into the browser.
To avoid creating global variables, we should have strict mode on.
Strict mode is on for modules by default. And we can use the 'use strict' directive to turn it on for scripts.
We can put that anywhere in scripts, but we should put that at the top so that it applies to the whole script.
With strict mode on, we can’t write things like:
x = 1;
to create the global variable x .
However, even with a strict mode on, we can still attach properties to the window property to create global variables.
To avoid that, we just don’t write things like:
window.x = 1;
We just don’t want to deal with them as they can be changed anywhere so it’s hard to trace.
Also, their names can easily conflict.
The Problem with Globals
Global variables are shared by all scripts.
They live in the global namespace and are used not only by our own scripts but also 3rd party libraries, ads scripts, analytics scripts, etc.
To avoid creating global variables, we should use the let or const keywords.
Variables and constants created with them are block-scoped so that they’re only available within a block.
So we can write:
let x = 1;
const y = 2;
and we won’t create global variables.
We also don’t want to write things like:
let x = y = 1;
since y would be a global variable while x is block-scoped.
The assignment is always evaluated right to left.
Side Effects When Forgetting let or const
If we forgot let or const , we’ll create global variables.
Access to the Global Object
The global object can be accessed with the window object in the browser.
However, we can create a function to access the global object in any context by writing:
const global = (function () { return this; }());
At the top level, this is the global object.
So when we run that, global will be assigned to the window object in the browser.
This is because we didn’t invoke the function with the new keyword. Rather, we just called it directly.
Single let or const Pattern
let or const can be used to declare multiple variables and constants as follows:
let x = 1,
y = 2,
z = 3;
or we can write:
const x = 1,
y = 2,
z = 3;
They’ll all be let or const , so it’s different from chain assignments that we saw before.
It’s also great for assigning a property from the previous item to another variable.
For instance, we can write:
const el = document.querySelector("body"),
style = el.style;
We have the body DOM object assigned to el and then el.style is assigned to style all in one line.
Hoisting
We only have to worry about hosting when we use var to declare variables.
Hoisting is where the variable is available before it’s assigned.
Only the variable is available, but its value isn’t.
That’s just confusing, so it’s one reason that we shouldn’t use var .
Conclusion
There’re a few ways to write maintainable JavaScript code.
We should avoid global variables as much as possible.
Also, we should use let or const to declare variables and constants respectively.
If we really need global variables, we can access it safely by using a function.
We can also a property of a variable or constant that’s been assigned to the variable after if we use a comma to write multiple assignments.
