Stop Doing These In JavaScript
A Few Tips To Become A Better Developer
In the beginning of my career, every time I worked with JavaScript I’ve always been skeptical about if the way I write my code was right. Because, in any programming language there’s no one right way of getting things to work. Nevertheless, one must always remember the things that are not supposed to be done. So, here’s a curated list of things that should not be done in JavaScript that I would like to share.
1. Avoid using var
Always use let
or const
when you’re trying to declare a variable. If you have a variable that does not require a change then it’s always best to use const
. You can ask, why should we not use var
? It’s because ES6 has given us let
that provides us with block scope that would avoid a lot of problems that would occur when using var
— which is function scoped. Being function scoped, it is very prone to getting overwritten.
Consider the following example where we’re trying to print a two dimensional matrix. Note the difference in declaring the looping variable i:
Using var:
function printMatrix (matrix) {
for (var i = 0; i < matrix.length; i++) {
var line = matrix[i];
for (var i = 0; i < line.length; i++) {
var element = line[i];
console.log(element);
}
}
}var two_dimensional_matrix = [['a', 'b', 'c'], ['d', 'e', 'f'], ['g', 'h', 'i']];printMatrix(two_dimensional_matrix);
Using let and const:
function printMatrix (matrix) {
for (let i = 0; i < matrix.length; i++) {
let line = matrix[i];
for (let i = 0; i < line.length; i++) {
let element = line[i];
console.log(element);
}
}
}const two_dimensional_matrix = [['a', 'b', 'c'], ['d', 'e', 'f'],['g', 'h', 'i']];printMatrix(two_dimensional_matrix);
To understand how const, let and var works check my article here.
2. Stop Using ==
It’s always best to use strong type checks ===
instead of the weak type checks ==
. Consider the following example:
1 == true // true
1 === true // false
1 == “1” // true
1 === “1” // false
3. Do not have meaningless variable names
This is a strict rule that’s applicable for any programming language. Always having meaningful names for the variables help us write better and clean code. It would also be helpful for other developers to understand the code easily. Do not add unnecessary words to the variable names and keep then short and ensure it represents the context.
4. Don’t crowd a function with more than one functionality
Always remember to modularize — one function should only do one task at a time. Also, name the function to match that task. This is not just applicable to JavaScript, it’s common to all programming languages. Writing one function to do only one job helps us follow DRY(Don’t repeat yourself) too. That is, reusability of the method increases when it does not do too many complex functions and simply performs one task only. No function should be able to do a lot for the sake of readability and also efficiency.
Example:
/** DONT DO THIS **/
function table (columns, rows, item){
//creates table and searches it for the passed item
}
/** BETTER WAY **/function createTable (columns, rows){
//creates table
}function searchTable (table, item) {
//searches table for the passed item
}
5. Avoid heavy nesting
Nesting code explains its logic and makes it much easier to read. However, nesting it too far can also make it hard to follow what you are trying to do. Readers of your code shouldn’t have to scroll horizontally, or suffer confusion when their code editors wrap long lines.
The other problem of nesting is variable names and loops. As you normally start your first loop with i
as the iterator variable, you’ll go on with j
, k
, l
and so on. This can become messy quite quickly. So it’s always better to avoid these use cases.
Conclusion
Follow these strict Don’ts in JavaScript to become a great developer. I hope these helped you understand a few of the good practices in JavaScript. If you know a few more don’ts in JavaScript, feel free to share them as a comment.
Thank you for reading!