Post
Ask Question

Voice of a Developer: Common Mistakes - Part Four

Introduction

 
JavaScript is the 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's 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 a pattern which programmers do, and I’ll try to save your debugging time, so you don’t waste time as I did in the 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 the same type. To demonstrate or test you could try the following statements and see the 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 a 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 the 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 the 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 between two approaches?

 
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. };  
  5. func1();  
  6. 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 the 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 the comment box if you know some other mistake patterns.
 
Read more articles on JavaScript


Similar Articles