JavaScript is an easy to learn programming language. It’s easy to write programs that run and does something. However, it’s hard to account for all the uses cases and write robust JavaScript code.
In this article, we’ll look at the best ways to work with variables and comparisons.
No Unused Variables
Unused variables are useless, so we shouldn’t include them.
For instance, if we have:
let x = 1;
but x isn’t used anywhere, then we should remove x .
Hoisting
var variables are hoisted and that tricks people and causes problems.
var Declarations are Hoisted to the Top, but their Value Isn’t
var declarations are hoisted but their value isn’t.
For instance, if we have:
console.log(x);
var x = 1;
then x is undefined .
But if we have:
var x = 1;
console.log(x);
Then x is 1.
This is a common source of confusion.
Therefore, it’s one reason that we shouldn’t use var to declare variables.
Use let or const instead to declare them.
Anonymous Function Expressions Hoist their Variable Name but Not Function Assignment
Like var variables, functions that are assigned to a var variable have the variable hoisted, but the function can only be used after it’s been assigned to the variable.
For instance, if we have:
foo();
var foo = () => {}
Then we get ‘Uncaught TypeError: foo is not a function’ since foo is undefined .
On the other hand, if we write:
var foo = () => {}
foo();
We can call foo .
Named Function Expressions Hoist the Variable but Bot the Function Name or Function Body
Likewise, if we have named functions the function itself isn’t hoisted, but the variable name is.
For instance, if we have:
foo();
var foo = function bar() {
//...
}
Then we get the ‘Uncaught TypeError: foo is not a function’ error since foo is undefined .
But we can call foo by writing:
var foo = function bar() {
//...
}
foo();
Function Declarations Hoist Their Name and Function Body
A function declaration is a named traditional function that isn’t assigned to a variable.
For instance, the following is a function declaration:
function foo() {
//...
}
They can be called anywhere in the script, so:
foo();
function foo() {
//...
}
and:
function foo() {
//...
}
foo();
both call foo .
Comparison Operators & Equality
We should be careful when we use JavaScript operators, especially with the data type conversion that it does.
Use === and !== Over == and !=
We should use === or !== for equality or inequality comparison respectively since they don’t do any data type coercion before doing the comparisons.
For instance, instead of writing:
1 == '1'
We write:
1 === '1'
Likewise, instead of writing:
1 != '1'
We write:
1 !== '1'
This way, both operands have to have the same type and content for them to be considered equal.
Conditional Statements Like if Statements Evaluate their Expressions Using Coercion
Anything expression that we put between the parentheses is coerced into a boolean before evaluation.
Objects evaluate to true .
undefined and null evaluate to false .
Booleans evaluate to the value of the boolean.
Numbers evaluate to false if it’s +0, -0, NaN . Otherwise, it’s evaluated to true .
String evaluate to false if it’s an empty string and true otherwise.
We should keep these rules in mind when we have expressions in if .
For instance, if we have:
if ({ foo: 1 }){
//...
}
Then { foo: 1 } will be coerced to true .
Use Shortcuts to Booleans but Explicit Comparison for Strings and Numbers
We don’t need to write things like:
if (valid === true){
//...
}
Instead, we write:
if (valid){
//...
}
But for strings or numbers, we do need to compare explicitly.
For example, we write:
if (value === 1){
//...
}
Conclusion
If we have unused variables, we should remove them.
If we’re doing comparisons, we should use === or !== as much as possible.
When we compare with booleans, we don’t need to explicitly compare values with booleans.
Finally, we should be careful of function expressions and declarations which may trick us.
