JavaScript is a very forgiving language. It’s easy to write code that runs but has mistakes in it.
In this article, we’ll look at some clumsy or useless expressions that shouldn’t be in our JavaScript code including useless blocks, magic numbers, multiline strings, and spaces, and using new without assigning the returned object.
Unnecessary Nested Blocks
Since ES2015, we can define blocks to segregate our code. They’re denoted by curly braces.
It’s useful for segregating block-scoped variables that are declared with let or const or class declarations or function declarations that are declared in strict mode,
However, we should add blocks unnecessarily. For instance, the following is useless:
{
function foo() {}
}
We should never put function declarations in blocks. It’s not allowed in JavaScript since they’re only allowed at the top-level.
What we should do is put function declarations at the top level as follows:
function foo() {}
We should place variables and constants that are declared with let and const in a block, as follows:
{
let x = 1;
const y = 2;
}
In the code above, we put x and y in blocks. This way, they can only be accessed inside a block.
No Magic Numbers
Magic numbers are numbers that occur multiple times in our code without any explicit meaning. They should be named constants to make them clear what they mean and that we can reference the constant in multiple places.
This way, we only have to change the value once if we need to change it instead of making changes in multiple places.
For instance, instead of writing:
let x = 1;
let y = 1;
let z = 1;
We can move the 1’s into one constant as follows:
const numPerson = 1;
let x = numPerson;
let y = numPerson;
let z = numPerson;
This way, we know that 1 is the number of persons, and we can also reuse it in multiple places and only change it in one place if we need to change it.
No Multiple Spaces
Multiple spaces are confusing and they aren’t very clean. For instance instead of writing:
if(foo === "baz") {}
We should instead write:
if(foo === "baz") {}
However, we can put comments after multiple spaces after the end of the line. For instance, the following:
if(foo === "baz") {} // check if foo is 'baz'
If it makes comments line up better, then it’s OK for comments to come after multiple spaces after a piece of code.
No Multiline Strings
If we want to write strings with multiple lines before we had template strings, we have to write something like the following:
let x = "foo
bar";
In the code above, we put 'bar' on a new line with a “ . It’s an undocumented feature of JavaScript and now that we have template strings, we shouldn’t use this.
Instead, we should use template strings as follows:
let x = `foo
bar`;
or we can write:
let x = 'foonbar'
Template strings preserve all whitespaces so we have to be precise with the spaces,
The n character also creates a new line.
Photo by Don’t Use the new Operator Without Assigning the Returned Object
The new operator is used for creating a new instance of a constructor. Therefore, we should always assign it to something.
Using new without assigning the returned result to anything is dubious because either it achieves nothing, or we’re using it to commit side effects.
Constructors aren’t a good place to commit side effects since most people expect it to return an instance of the constructor.
Therefore, we shouldn’t use the new operator without assigning the returned value to the variable or constant of our choice.
For instance, instead of writing:
new Foo();
We should write:
const foo = new Foo();
Don’t use the Function Constructor
The Function constructor is bad. We pass in strings for specifying the parameters and the function body. The last argument is the body while the arguments before it are the parameters.
They’re hard to debug since they’re all strings. Because they’re all strings, they’re also hard to read.
In addition, if they’re dynamic, then attackers can inject their own code and create their own functions and run malicious code.
Therefore, we should avoid using the Function constructor at all costs. Instead of writing:
const add = new Function("a", "b", "return a + b");
We should write:
const add = (a, b) => a + b;
This way, they’re clean and easy to debug.
Conclusion
Useless blocks, extra spaces, multiline strings that aren’t standard should all be avoided.
Magic numbers should be assigned as constants so they can be understood and reused.
Anything returned with new should be assigned to a variable or constant.
Also, we should never use the Function constructor to make our code easy to read and debug and let us avoid potential security issues.
