Most common mistakes of (not only) JavaScript developers

Introduction

JavaScript is a powerful programming language that helps make web pages interactive. However, JavaScript can be tricky to learn and use. After working with this powerful language for some time, I have gathered mistakes I made and some that I have seen people making around me. Most of them apply to JavaScript, but some will make sense no matter what technology you are using.

Not using === or !==

The == and != operators perform type coercion, which can lead to unexpected results. For example, the expression "1" == 1 is true because the string "1" is coerced to the number 1. To avoid type coercion, use the === and !== operators. For example, the following expressions all return true:

'' == '0'           // false
0 == ''             // true
0 == '0'             // true

false == 'false'     // false
false == '0'         // true

'' != 0              // false
'' != '0'             // false

Therefore, it's generally advisable to use the === and !== operators, which check for both value and type equality, as follows:

'' === '0'           // false
0 === ''             // false
0 === '0'             // false

false === 'false'     // false
false === '0'         // false

'' !== 0              // true
'' !== '0'             // true

Incorrect use of the typeof operator to check the null type

The typeof operator returns a string indicating the type of the unevaluated operand. However, it's important to note that:

typeof null === 'object'    // true

Therefore, to test for null you need to use the following:

let myVar = null
myVar === null

Not using a default case in a switch statement

Another common mistake is not using a default case in a switch statement. A default case is used to specify what should happen if none of the other cases are matched. Without a default case, your code might not work as expected and could cause unexpected results.

Here is an example of a switch statement without a default case:

switch (num) {
case 1:
  console.log("One");
  break;
case 2:
  console.log("Two");
  break;
}

In this example, if the value of num is not 1 or 2, nothing will happen. This can lead to bugs in your code if you are not expecting this behavior.

To avoid this, always include a default case in your switch statements:

switch (num) {
case 1:
  console.log("One");
  break;
case 2:
  console.log("Two");
  break;
default:
  console.log("Default");
}

Now, if the value of num is not 1 or 2, the default case will be executed and the message "Default" will be logged to the console.

Modifying built-in objects (monkey patching)

Modifying built-in language or library objects is called monkey-patching. You should avoid modifying objects like Array, String, and Object because it can lead to unexpected results and can break other code that relies on those objects. There are some use cases for monkey patching but most of the time it is better to stay away from it.

Using JavaScript for everything

One of the most common mistakes developers make when working with JavaScript is trying to use it in ways it was not intended to be used. JavaScript is a versatile language, but it is not a silver bullet. It is not always the best tool for the job and trying to force it into places it doesn't belong can lead to frustration and problems down the road.

Not using a linter to check code quality

Linting is a process of checking code for errors and potential problems. It can be done manually by a developer, or it can be done automatically using a linting tool.

Linting tools can be used to check for a variety of different issues, such as syntax errors, style issues, and potential bugs. They can also be used to enforce coding conventions and best practices.

Using a linter can help to improve the quality of your code and make it more consistent. It can also save you time by finding errors before you even run your code.

If you're not already using a linter, I highly recommend that you start. It will make your life as a developer much easier.

Not using var, let, or const to declare variables

When you declare a variable without using keywords, it is automatically global. This can lead to unexpected results and can make your code difficult to debug. Always use keywords to declare variables.

Not using semicolons

In JavaScript, semicolons are used to denote the end of a statement.

You can argue that not using semicolons doesn't break your code but semicolons are the same as punctuation in natural language. You can write without placing dots between sentences but it makes your text hard to read and inelegant.

Use of console.log() in production

While console.log() is a great debugging tool, it should not be left in your code in production. Remove all console.log() calls before you deploy your code. Even better, learn to use a debugger as it will really help you understand the code you are working with.

Summing up

JavaScript might be a tricky and difficult language to learn, but with these tips in mind, you can avoid some common mistakes. Some of them like using linter or avoiding monkey-patching should also be applied when working with other languages. Remember to always look for ways to become a better developer and make your code easier to read and bug-free.