Javascript Gotchas listed to help avoid mistakes

A gotcha in programming is something unexpected although a documented feature of a computer system and not a bug. These gotchas throw beginners off Javascript programming and send some people running and screaming. In my opinion, Javascript is one of the most widespread languages as it is available on all browsers but one of the least learned languages.  Let’s start with basic ones.

1. Floating point arithmetic

This can be a major cause of frustration for people who are new to Javascript and are trying to perform some kind of mathematical computation.

<script>
alert(0.02 / 0.1);  //0.19999999999999998 
alert(1.14 * 100);  //113.99999999999999    ;)
</script>

This is where the Math.round() functions come in handy

2. Plus operator overloading 

The plus operator stands for both arithmetic operations and also string concatenation. This is convenient if used correctly. Lets take a look

<script>
var msg, one="1";
msg = 2 + "1"; // msg = "21"
msg = 2 + one; // msg = "21"
msg = 1 + 1 + 1 + " musketeers"; // msg = "3 musketeers"
msg = "Bond " + 0 + 0 + 7; //msg = "Bond 007"  
</script>

 
The above behaviour is because the operations are performed left to right. If we use parantheses the behaviour will change based on the order of the string or number in it.

3. Semicolon insertion at line feed

Javascript automatically inserts ; at a line feed. Lets see this in action with a simple example:

<script>
function returnSame(a){
   return                 //Inserts semi-colon to convert to return;
   a                      //a becomes a; - Unreachable
}
alert(returnSame(2));  //Output is undefined
</script>

The magical semicolon insertion can get things complicated while creating objects using object literals

4. typeof operator

typeof is a unary operator. The results are not one would normally expect. It suprisingly evaluates null to ”object”. 

<script>
var obj={};  //object created using object literal
var arr=[];  //array created by array literal
alert(typeof(obj));   //object  - Good
alert(typeof(arr));   //object  - Bad
alert(typeof(null));  //object  - Ugly!  ;)
</script>

 
It should only be used to distingush objects from other primitive types.

5. false, null, undefined, NaN, Infinity

They stand for different things although they might look similar or at times look redundant. Javascript uses three primitive datatypes numbers, strings and boolean. In addition it has two trivial datatypes undefined and null. Both null and undefined are equal according to the equality operator (==)

 
<script>
var a;
alert (a);    //undefined
alert (1/0);  //Infinity
alert (0/0);  //NaN
0/0 == 0/0;   //false - a NaN != NaN
alert (b);    //error
</script>

 

6. String replace only replaces first occurence

Unlike PHP or other languages, string replace in Javascript only replaces the first occurence of a string by default.

<script>
var nospace = "I dont need spaces".replace(" ","_");
alert(nospace);    //I_dont need spaces   - Only first occurence
var nospace = "I dont need spaces".replace(/ /g,"_");
alert(nospace);    //I_dont_need_spaces
</script>

 

7. ParseInt function

This is used to convert a string into an integer. The function does accept two arguments and the second argument specifies the radix. The radix here for decimal is10. If no radix argument is passed the parseInt function tries to guess the base and in this case because the string starts with 0, it is parsed as an octal number.

<script>
var str = "017";
var strInt = parseInt(str);      //strInt = 15  ;)
var strInt = parseInt(str,10);   //strInt = 17
</script>

Please share your Javascript Gotcha’s using the form below:
(note use &lt; and &gt; to get past the comment filter for < and >)

Tags: gotchas, javascript