Like any kind of apps, JavaScript apps also have to be written well.
Otherwise, we run into all kinds of issues later on.
In this article, we’ll look at some tips we should follow to write JavaScript code faster and better.
Polluting Global Scope
We should never define global variables to declare the global scope.
To avoid this, we use let and const to declare variables.
For instance, we write:
ler x = 1;
or:
const y = 2;
We shouldn’t declare variables with var or without a keyword before it.
They both declare global variables, which we don’t want.
Likewise, we should not use function declarations.
Instead, we should use function expressions.
So instead of writing:
function foo() {}
We write:
const foo = () => {}
We can also enclose our variables within IIFEs to keep them private:
(() => {
let = 1;
})()
Now they are not accessible outside the function.
Use Strict Mode
We should use strict mode to disallow some bad constructs in our code.
For instance, we can’t assign things to reserved keywords like:
undefined = 1;
Also, we can’t accidentally define global variables by assigning to variables without declaring them.
So we can’t create global variables like:
foo = 1;
foo is a global variable since we declared it without a keyword.
Strict Equality
We shoild use the === or !== operators to compare values since data type conversions aren’t done before comparison with them.
For instance, instead of writing:
a == b
We write:
a === b
It’s much safer than the == operator.
Likewise, for inequality, we should use the !== operator.
So we can write:
a !== b
instead of:
a != b
Use && or || to Conditionally Evaluate Expressions
We should use the || operator to return the right operand if the left operand is falsy.
For instance, we can write:
const str = '' || 'foo';
to return 'foo' since empty string is falsy.
Similarly, we can use the && operator to evaluate the right expression if the left expression is truthy.
So we can write:
const baz = obj.foo && obj.foo.baz;
This way, obj.foo.baz is only returns only if obj.foo is truthy.
This can avoid lots of undefined errors when accessing nested properties.
Convert Value Types
We can convert strings to numbers by using the + operator.
For instance, we can write:
const foo = +'100'
to get 100 as the value of foo .
Also, we can use the !! operators to convert anything to a boolean.
For example, we can write:
!!0
to convert it to false since it’s falsy.
Follow Style Guides
There are many good style guides that we can follow to write good JavaScript code.
For instance, we can following the Google JavaScript Style Guide, airbnb/javascript guide, and others so that we can follow some good practices when writing JavaScript.
To automate the process of checking for bad good, we can use ESLint co check for them.
Creating Immutable Objects in JavaScript
We can create immutable objects in JavaScript with the Object.seal method.
For instance, we can write:
Object.seal(foo);
to make foo immutable.
It makes the object immutable and doesn’t return anything.
It prevents the modification of property descriptors.
There’s also the Object.preventExtensions for preventing adding properties to an object.
For instance, we can write:
Object.`preventExtensions`(foo);
Also, we can write:
`Object.freeze(`foo`);`
Then we can do all the things that seal and prevenExtensions does.
Creating Hash Maps without Side Effects
We can create a pure object without a prototype by using Object.create with the null argument.
For instance, we can write:
const map = Object.create(null);
Then the map object won’t have a prototype.
We can use it as a dictionary safely.
Cloning Immutable Objects
We can use the clone package to clone an object.
For instance, we can write:
const clone = require('clone');
const a = { foo: { bar: 1 } };
const b = clone(a);
Now we can clone a and make the clone a value of b so that we can us manipulate b without affecting a .
Conclusion
We can prevent objects from being modified with some Object methods.
Also, we can use the clone property to clone objects.
In addition, we can use && or || to do things other than creating boolean expressions.
