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:

• Voice of a Developer: JavaScript Data Types - Part One
• Voice of a Developer: JavaScript Objects - Part Two
• Voice of a Developer: JavaScript Engines - Part Three

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 // true
"1" == 1 // true
1 == '1' // true
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 // true
"1" === 1 // false
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-

var y = ‘10’;
var x= 1 + y; // will give 110

Use function parseInt in such scenario to rescue you, otherwise you’ll spend time in debugging.

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-

var f = 0.1;
var g = 0.2;
var h= f + g;
(h === 0.3) // false because h is 0.30000000000000004

Floating numbers are saved in 64 bits. Hence, the right way to do is:

var h = (f * 10 + g * 10) / 10; // h is 0/3
(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

var foo = ‘test’;
console.log (foo); // will print test

Scenario 2

foo = ‘test’;
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

function func1(){
var foo = 'test';
console.log (foo); // will print test
}; func1();
console.log (foo);

Scenario 2

function func1(){
foo = ‘test’;
console.log (foo); // will print test
}();
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,



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:



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



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:

• The Future of JavaScript
• The JavaScript Module Pattern Used With jQuery