5 Ways to Catch Common Javascript Bugs

Javascript is a God-send if you are trying to get things done - quickly. It can run back-end servers, is invaluable for the front-end, and you will never thank enough when you on the way to complete a project that could have taken 10x the time/effort back in the day.

All that comes at a cost. Types seem to be the most blamed for errors, but they could range from anything from bracket mismatches to just ‘typing’ issues.

Here are five easy ways that you would want to incorporate in your development life cycle and reach the next level programmer.

Baahh.. just kidding - here are five different ways in which you should be able to catch more bugs at compile time rather than tear your hair later.

Before you begin - this is a bonus free tip. Use VS Code.

Seriously the tooling that VS Code provides to avoid mistakes is unparalleled and I never cease to be amazed by what it can do. Use auto-complete for objects and methods, compile and quickly test blocks of code (QuokkaJS/Nodemon, anyone?), and keep track of your changes to avoid stacking up screw-ups. VS Code can do it all - in fact I just open VS Code for everything including reading my morning news.

1. Use Prettier

I just talked about Prettier being an invaluable VS Code extension just the other day. People who know me better accuse me of falling in love with the beautiful thing that is prettier and even saying its name a few times in my sleep.

Well, Prettier is darn fine. Configure it in VS Code to apply formatting on each save, and then you are off to the races.

When you type some gibberish and hit ‘save’, Prettier does a good job formatting everything. Unless, of course, you have -

  • mismatched brackets, quotes, and the like in statements and functions
  • poor syntax (e.g. a JSON containing = instead of :)
  • unescaped special characters
  • etc. etc. etc.

This is a good indication of something being screwed up in the typing process - which is all the time.

For example: hitting save on the below will not format the file -

const hello = {entity = 'world'};
console.log('Can I say hello too");

In fact this has gone to ridiculous proportions in my flow - I intentionally do not use tabs, spaces, semi-colons so that Prettier formatting (or the lack thereof) can tell me if I have done anything wrong.

2. Use F12, F3 and friends - often

Spelling mistakes and typos of variables used to cost me time.

For e.g.:

const HelloWorld = "the statement that everyone makes";
console.log(helloWorld);

I use multiple tools to the table to solve this one.

  • Place cursor on suspicious variables, and use F12 key to find out if indeed they are defined. F12 takes cursor to the definition. Alternatively, use Alt + F12 to know where the variable is coming from
  • Place cursor on variable. Start hitting F3 to cycle through the definition and all instances where the specific variable is used
  • Use break-points to check on variables during runtime
3. use strict and const / let instead of var

While no one in their right mind commit scope issues, it is hard to catch them when you have a complex hierarchy of needs.. er.., loops and blocks.

I tend to introduce use strict; feverishly and combine that with let and const to keep the scoping and programming logic in control.

4. Cheat using Typescript

I have been trying to use Typescript in my code, but that is not always possible. So, even more than that, I love my libraries to be written in Typescript!

Methods and method arguments are easily exposed by such libraries, and I love the fact that I commit fewer mistakes while typing them. I also love the fact that I don’t have to run to the docs each and every time.

5. Ditch ==, embrace the additional =

Wrong types may result in mistakes. Use === instead of ==.

if (myTxt === "hello world") {
  console.log("well, hello");
}
comments powered by Disqus