Voice of a Developer: Common Mistakes - Part Four

Guest User

10 Comments

Join the conversation! Your thoughts help the community grow.

Mohit Sharma10y ago
Nice
Amit Dave10y ago
Nice article!
Guest User10y ago
Thanks everybody
Sunny Sharma10y ago
Floating numbers are saved in 64 bits... nice share!
Debasis Saha10y ago
Nice One..
Vignesh Mani10y ago
Nice one
Guest User10y ago
Thanks guys! please let me know what you would like to read more on JS.
Nitin10y ago
thanks for sharing
Gowtham Rajamanickam10y ago
good one
Nishant Mittal10y ago
Well Said Common Mistakes..still sometimes we use to do ...good one

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 // 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 a 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 the 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 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

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

Scenario 2

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

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 the 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 the comment box if you know some other mistake patterns.

Read more articles on JavaScript