JavaScript lets us do a lot of things. It’s sometimes too forgiving in its syntax.
In this article, we’ll look at some best practices when developing in JavaScript, including bundling, linting, and object creation.
Minify in Production
Before releasing our code to production, we got to minify it so that users won’t have to spend too much time downloading our JS app.
Frameworks have built-in programs to bundle and minify our code.
Also, we can create our own bundler with packages like Grunt and some plugins.
Webpack and Parcel are also popular module bundlers.
Bundling strips white spaces, newlines, and comments.
They also rename variables to shorter names when it’s safe to do so.
Minifiers can only rename local variables, so that’s another reason we shouldn’t use global variables.
We should let the minifier do the minification.
Our code should have the descriptive names and let the minifiers strip characters as they see fit.
Run ESLint
ESLint checks for syntax errors and bad practices and either tell us to correct it or it can correct some of them automatically.
For instance, it’ll detect unreachable code, any old syntax that can be replaced with better new syntax, etc.
It’ll also detect bad constructs like eval , with , and void , which should never use.
Improperly escaped characters in regexes will also be detected to prevent potential security issues.
It’s available as a Node package and frameworks tools probably already have them included.
Therefore, we should use them to catch anything that we shouldn’t have.
Object Literal
Object literals are a simple way to define objects in JavaScript.
We can define objects in a one-off manner.
They contain key-value pairs, where the value may also be an object.
For instance, we can define an object literal as follows:
const cat = {};
cat.name = "joe";
or we can write:
const cat = {
name: "joe"
};
We can also add methods to an object as follows:
const cat = {
name: "joe",
getName() {
return cat.name;
}
};
We can use the delete operator to remove a property.
For instance, we can write:
delete cat.name;
An object literal will have inherited properties from the Object prototype.
Therefore, even an empty object isn’t actually empty.
To write an object literal, we start with curly braces and delimit each property with commas.
Property names and values should be separated with a colon.
Objects from a Constructor
We can also create objects from a constructor.
Constructors are functions that have their own instance variables and prototype.
For instance, we can create a new Date instance by writing:
const date = new Date();
We used the new operator on the constructor to make it return a new Date instance.
Object Constructor
The Object constructor isn’t very useful for us.
It’s just a long way to create an object.
Also, we can pass in whatever value we want to create an object of our choice, which is confusing.
If we pass in a string, we get a string returned. So if we have:
const str = new Object("foo");
we get that str is a string.
It has access to all the string methods, but the type according to typeof is 'object' .
That’s no good since it’s confusing.
Therefore, we should just stick to literals as much as possible.
Otherwise, we’ll be confused about the type and the content.
Custom Constructor Functions and Classes
We can define a constructor function as follows:
function Person(name) {
this.name = name;
}
Person.prototype.greet = function() {
return `hi ${this.name}`;
}
Then we can write using the new operator to invoke it to create a new Person instance as follows:
const person = new Person('joe');
person.greet();
When we use the new operator, an empty object is created and referenced by this inheriting the prototype of the constructor.
Properties and methods are added to the empty object.
The created object referenced by this is returned.
We can also rewrite that with the class syntax by writing:
class Person {
constructor(name) {
this.name = name;
}
greet() {
return `hi ${this.name}`;
}
}
Both are exactly the same. Just that the members are in different places.
Conclusion
Minifying is a must in production so that users won’t have to download as much data.
Also, linting helps us catch syntax errors and bad practices.
Finally, classes and constructors are the same in JavaScript.
