Voice of a Developer: Common Mistakes - Part Four

JavaScript is language of the Web. This series of articles will talk about my observations, learned during my decade of software development experience with JavaScript. What mistakes developers generally make and what differences they should be aware of.

Part 4 will focus in detail on JavaScript common mistakes. Before moving further let us look at the previous articles of the series:

As a developer, sometimes I face issues because of my silly programming mistakes and I have learned from these. So, I found pattern which programmers do, and I’ll try to save your debugging time, so you don’t wast time like I did in past.

Mistake 1: Equality checks

We check variables for certain values but there are two types of operators we could use. I suggest using strict operators over type converting.

Type converting operator like == converts operands if they are not of same type. To demonstrate or test you could try the following statements and see output.
  1. 1 == 1 // true  
  2. "1" == 1 // true  
  3. 1 == '1' // true  
  4. 0 == false // true  
So, the mistake of using == operator results in TRUE value for 1==”1”, which could be wrong in a real scenario. Therefore, it is always advisable to use type strict operators.

Strict operators like === don’t convert operands and returns true if the operands are strictly equal.
  1. 1 === 1 // true  
  2. "1" === 1 // false  
  3. 0 === false // true  
Mistake 2: Concatenation

Javascript uses + operator for concatenation & addition. Now, another common mistake is to use mix number & string operands. For ex-
  1. var y = ‘10’;  
  2. var x= 1 + y; // will give 110  
Use function parseInt in such scenario to rescue you, otherwise you’ll spend time in debugging.
  1. var x= 1 + parseInt(y); // will give 11  
Mistake 3: Float point numbers

Programming languages are not always correct to match floating point numbers. And, let’s see right way to match floating point numbers. For ex-
  1. var f = 0.1;  
  2. var g = 0.2;  
  3. var h= f + g;  
  4. (h === 0.3) // false because h is 0.30000000000000004  
Floating numbers are saved in 64 bits. Hence, the right way to do is:
  1. var h = (f * 10 + g * 10) / 10; // h is 0/3  
  2. (h === 0.3) // true  
Mistake 4: Not using var to declare variables

It’s a common mistake to not use var keyword and declare variables. Javascript will not give an error if you skip var keyword but the scope will be different of variables.

Scenario 1
  1. var foo = ‘test’;  
  2. console.log (foo); // will print test  
Scenario 2
  1. foo = ‘test’;  
  2. console.log (foo); // will print test  
Q: What is the difference in two approaches?

Ans: It depends upon the scope where you declare the variable. Let me revise the code as below:

Scenario 1
  1. function func1(){  
  2. var foo = 'test';  
  3. console.log (foo); // will print test  
  4. }; func1();  
  5. console.log (foo);  
console

Scenario 2
  1. function func1(){  
  2. foo = ‘test’;  
  3. console.log (foo); // will print test  
  4. }();  
  5. console.log (foo); // will print test  
The reason why Scenario 2 worked because foo gets created in global scope, i.e., in WINDOW object of Javascript,

object

In bigger projects, if you add more variables in global scope then it will consume allocated memory and not free up, which could potentially result in memory leaks issue.

Mistake 5: Usage of undefined as a variable

Often we use undefined as a variable. Let’s take a scenario below:

scenario

The correct way is to use typeof when checking for undefined:

scenario

I hope you’ll find it useful and you can give your suggestions in comment box, if you know some other mistake pattern.

Read more articles on JavaScript: