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 comparisons and eval.
Boolean Comparisons
Boolean comparisons with == and != also do things we don’t expect.
This is because any operands are converted to true or false before comparison is done.
For instance, if we have:
console.log(1 == true);
then we get true because 1 is converted to true .
On the other hand, if we have:
console.log(0 == false);
we also long true since 0 is falsy and it’s converted to false .
Object Comparisons
If objects are compared then, it’s converted to a primitive value with the valueOf method.
If valueOf isn’t present, then toString is called instead.
Then the comparison continues like the other kinds of comparisons.
For if we have:
const object = {
toString() {
return "0xFF";
}
};
console.log(object == 255);
Then console log logs true since object is converted to a string with the toString method.
Then the Number function converts that to a decimal number.
The null and undefined Values
Also, type coercion occurs between null and undefined is also done.
They’re deemed equivalent by the == operator.
For instance, if we have:
console.log(null == undefined);
then that logs true .
=== and !==
Type coercion is done with == and != , so we shouldn’t use them for comparisons.
The coercion rules are too complex.
Instead, we should use the === and !== operators, which don’t do any type coercion.
So if we have:
console.log(5 === "5");
we log false .
And:
console.log(25 === "0x19");
also logs false .
And also if we have:
const object = {
toString() {
return "0xFF";
}
};
console.log(object == 255);
that also logs false because there’s no type coercion done.
Using === and !== is recommended by Doug Crockford’s style guide, Google style guide, etc.
This is almost a universal recommendation between all style guides.
Linters like ESLint and JSHint all warn us about the use of the == and != operators.
eval()
eval is a function that takes a string of JavaScript code and runs it.
For instance, we can write:
eval("console.log('hello')");
to log 'hello' in the console log.
The eval function isn’t the only function that runs JavaScript code from a string.
The setTimeout and setInterval functions also takes a function and runs that code.
The Function also takes strings with parameters and code and returns a function.
Running code from a JavaScript string is universally considered to be a bad practice because of the security issues from running code that can potentially be run from any source.
Also, JavaScript code inside a string can’t be optimized for performance with JavaScript engines.
Therefore, we shouldn’t use the eval functuon or Function constructor.
Also, we should use setTimeout and setInterval with actual code instead of a string.
For instance, we use it properly by writing:
setTimeout(() => {
document.body.style.background = 'red';
}, 50);
setInterval(() => {
document.title = `the tiome is ${new Date()}`;
}, 1000);
We run our code in a callback instead of running code from a string.
Conclusion
We should use === and !== for comparisons.
Also, we shouldn’t run code from a string.
