In this article, I’ll share 10 of the JavaScript tips, tricks, and best practices that I follow and found useful.
1. Use Numeric Separators
This is one of the most used operators when I have to deal with large numbers. When using a separator (with just an _) in number it looks better than an unseparated number.
For example:
let number = 98234567
to ⬇
let number = 98_234_567
And it works for any other numeric base as well:
const binary = 0b1000_0101;
const hex = 0x12_34_56_78;
Few caveats :
More than one underscore in a row is not allowed let num= 100__00
Can not be used after leading 0 let num= 0_1
Not allowed at the end of numeric literals let num= 100_
2. Always Use Semicolons
The use of semi-colons for line termination is a good practice. You won’t be warned if you forget it, because in most cases it will be inserted by the JavaScript parser but relying on Automatic Semicolon Insertion(ASI) is not encouraged.
This is even included in Google’s, Airbnb’s, and jQuery’s Javascript style guides.
To know about what could happen if we rely too much on ASI, checkout the 4th issue of my newsletter I shared some months back. In the last section, I have explained it with an example.
3. Don’t forget "var"
When you assign a variable’s value for the first time, always make sure you're not doing it to an undeclared variable.
Assignment to an undeclared variable automatically results in a global variable being created. Avoid global variables ❌
Global variables are easily overwritten by other scripts. For example, if two separate parts of an application define global variables with the same name but with different purposes, it can result in unpredicted errors and it will be a horrible experience to debug such a problem.
Generally, you should try to scope your code so that you need as little as possible in the global scope. The more global variables you use in your script, the less is the chance that you can use it alongside another script.
Normally variables in a function should be local so that they go away when you exit the function.
"By reducing your global footprint to a single name, you significantly reduce the chance of bad interactions with other applications, widgets, or libraries." - Douglas Crockford
4. Delete vs Splice
Use splice instead of using delete to remove an item from an array. Using delete will remove the object property, but will not reindex the array or update its length. This makes it appears as if it is undefined.
Delete
> myArray = ['a', 'b', 'c', 'd']
["a", "b", "c", "d"]
> delete myArray[0]
true
> myArray[0]
undefined
Note that it is not in fact set to the value undefined, rather the property is removed from the array, making it appear undefined. The Chrome dev tools make this distinction clear by printing empty when logging the array.
Splice
Splice() actually removes the element, reindexes the array, and changes its length.
> myArray = ['a', 'b', 'c', 'd']
["a", "b", "c", "d"]
> myArray.splice(0, 2)
["a", "b"]
> myArray
["c", "d"]
The delete method should be used to delete an object property.
5. map vs for loop
Although there are various ways to loop through an array, use the map() function method whenever possible.
var squares = [1,2,3,4].map(function (val) {
return val * val;
});
Immutability — The original array will be unaffected. This has potential benefits in cases where the original array is still needed elsewhere. for loops can also be written so as not to update the original array, but it requires more code and updating our new array as part of our loop operation. On the other hand map() keeps this cleaner since you only have to work in one scope to still maintain immutability
Cleaner code — When doing identical things, map can almost always be written with less code than for. It can be clearly written on one line sometimes whereas for requires at least two or generally three with braces included. Also, scope isolation and a reduction in the number of variables you need alongside reduced size all make code objectively cleaner.
6. Rounding numbers
The toFixed() method converts a number rounding to a specified number of decimals.
var pi =3.1415;
pi = pi.toFixed(2);
NOTE : toFixed() returns a string and not a number.
7. Use console.table
You can use console.table to show objects in tabular format:
table=[{state: "Texas"},{state: "New York"},{state: "Chicago"}]
console.table(table)
8. Avoid using try-catch inside a loop
The try-catch construct creates a new variable in the current scope at runtime each time the catch clause is executed where the caught exception object is assigned to a variable.
var object = ['foo', 'bar'], i;
for (i = 0, len = object.length; i <len; i++) {
try {
}
catch (e) {
}
}
to ⬇
var object = ['foo', 'bar'], i;
try {
for (i = 0, len = object.length; i <len; i++) {
}
}
catch (e) {
}
When an error occurs, the first one lets you continue the loop while the second one exits the loop. The first one is suited if an exception thrown by your code is not severe enough to halt your entire program.
9. Multiple condition checking
For multiple value matching, we can put all values in an array and use indexOf() or includes() method.
if (value === 1 || value === 'one' || value === 2 || value === 'two') {
}
to ⬇
indexOf():
if ([1, 'one', 2, 'two'].indexOf(value) >= 0) {
}
includes():
if ([1, 'one', 2, 'two'].includes(value)) {
}
10. Double NOT bitwise operator (~~)
The double NOT bitwise operator is a substitute for Math.floor() method.
const floor = Math.floor(6.8);
to ⬇
const floor = ~~6.8;
The double NOT bitwise operator approach only works for 32-bit integers. So for any number higher than that, it is recommended to use Math.floor()
Conclusion
I know that there are many other tips, tricks, and best practices, so if you have any ones to add or if you have any feedback or corrections to the ones that I have shared, please feel free to add them in a comment below.
Also, You can never learn from just one article. Try Google concepts and read multiple articles, play around with the code by making projects and that's the only way you learn.
Here's my final tip — Don’t use a casual coding style. Enforce a standard
You never know what to expect while reading the code that has a random coding style. The same coding style across the entire team and the application codebase is a requirement. It’s a boost for code readability.
References
https://modernweb.com/45-javascript-tips-tricks-practices/
https://stackoverflow.com/questions/2485423/is-using-var-to-declare-variables-optional
https://stackoverflow.com/questions/32844818/why-i-need-to-avoid-using-try-catch-finally-inside-a-loop
http://rocha.la/JavaScript-bitwise-operators-in-practice
Cover Photo by Juanjo Jaramillo on Unsplash
