To make code easy to read and maintain, we should follow some best practices.
In this article, we’ll look at some best practices we should follow to make everyone’s lives easier.
Don’t use arguments
arguments is a special variable that lets us get the arguments of a function.
We shouldn’t use it since there are better alternatives.
It also doesn’t work with arrow functions.
For instance, instead of writing:
function sum() {
const numbers = Array.prototype.slice.call(arguments);
return numbers.reduce((a, b) => a + b);
}
We write:
function sum(...numbers) {
return numbers.reduce((a, b) => a + b);
}
The rest operator returns the arguments as an array.
Use of delete
delete removes a property from an object.
It mutates the object, so we may not want to use it.
For instance, instead of writing:
delete foo.bar;
We write:
const _ = require('lodash/fp');
const fooWithoutBar = _.omit('bar', foo);
to return a new object without the bar property.
Object.assign() with a Variable as First Argument
If we pass in a variable as the first argument with Object.assign , then we mutate the variable.
This means that it’s better not to set the first argument with a variable.
Instead, we put an object.
For instance, we can write:
const foo = Object.assign({}, a, b);
instead of:
const a = { foo: 1, bar: 2 };
const b = { bar: 3 };
Object.assign(a, b);
Mutating Methods
It’s easy to do accidental mutations, so we shouldn’t use mutating methods too much.
For instance, array methods like push , pop , unshift , etc. mutate arrays, so we may want to consider alternatives that don’t do mutation.
We can use spread instead of push .
For instance, we can write:
const bar = [...arr, 1];
instead of push .
pop can be replaced with slice :
const baz = arr.slice(-1);
unshift can be replaced with spread:
const bar = [1, ...arr];
sort is harder to replace so we may want to keep using it, but we stop using original array.
It returns the sorted array.
Mutating Operators
We should be careful with mutation operators.
Operators like += does assignment to update an existing variable.
This means that we can accidentally modify them easily.
We should also be careful with -= , *= , /= , %= , ++ or -- .
The placement of ++ or -- also matters so we should be careful with that.
It does both assignment and returns a value.
++ coming after a variable returns the original value.
++ coming before a variable returns the new value.
This is the same with -- .
Use of Proxy
Proxies commit side effects, so we may not want to use them.
For instance, instead of writing:
const handler = {
get(target, key) {
return Math.max(target[key], 0);
}
};
const object = new Proxy(variable, handler);
object.a;
We make a function instead:
const negativeProp = (target, key) => {
return Math.min(target[key], 0);
}
negativeProp(object, 'a');
Spacing Between Function Identifiers and their Invocations
We can add spacing between function identifiers and their invocations.
For instance, we should write:
alert('Hello');
instead of:
alert ('Hello');
Extra spaces aren’t very useful.
Function Names should Match the Name of the Variable or Property to which they are Assigned
It’s useless to have a function name if we’re going to assign it to a variable.
But if we have them, at least the names should match.
For instance, if we have:
const foo = function bar() {};
Then we call the function with foo .
Instead, we should write:
const foo = function foo() {};
or:
const foo = function() {};
This is the same with properties.
For instance, instead of writing:
obj['foo'] = function bar() {};
or:
obj['foo'] = function() {};
We write:
obj['foo'] = function foo() {};
or:
obj['foo'] = function() {};
We should remove them or make them match.
Conclusion
Names are redundant if we assign a function to a variable or property.
The arguments object shouldn’t be used.
We should be careful with mutating methods.
Also, we should be careful with mutation operators.
Spacing of function calls are redundant.
