Javascript Pitfalls and Tips

Type coercion

Javascript likes to be helpful. That means it wants to put bugs in your code for you. One example is automatic type coercion: converting values, if needed, to other types of objects. There are several examples:


The [] operator (to access properties of an object) coerces strings:

> var a = ['hello', 'how', 'are', 'you']
> a[0]
> a['0']


The + operator can add two numbers or concatenate two strings. It depends on the types of the objects:

> 5 + 6
> '5' + '6'
> 5 + '6'


Javascript has two kinds of equality operators: == and ===. The first kind, ==, does some really weird stuff related to coercion, so it’s best to avoid it entirely. Always use === and, for testing non-equality, !== (rather than !=). Read on for more details of why this is good advice.

The == operator is bad because it coerces the values on either side if they are of different types. For example, it might try to interpret a string as an integer:

> 0 == '0'

The === operator leaves the types alone:

> 0 === '0'


var defines the private variables for a function. For example, put this into the left-hand window of your editor, then click the Run button:

x = "hello";
y = "goodbye";
var testA = function(j)
    var x = j;
    y = j;
    console.log("hello, x is ", x);
    console.log("hello, y is ", y);

var testB = function()
    console.log("hi, x is ", x);
    console.log("hi, y is ", y);

Now, in the right-hand console, run the two functions and think about the results:

> testA(5)
hello, x is  5
hello, y is  5
> testB()
hi, x is  hello
hi, y is  5

What happened? Because they were declared outside of a function definition, x and y are global variables. But when we use var x inside of testA, x is a local variable for testA.

The lesson is to always declare all of your variables at the top of the function.


NaN (Not a Number) is a value that results from some invalid computation. For example:

> 0/0

NaN is not equal to anything else, including itself:

> NaN === NaN
> NaN !== NaN

You can check if something is Nan with isNan():

> x = NaN
> isNan(x)

Truth and falseness

All values evaluate to true except for a few “falsy” ones. These are:

  • false
  • null
  • undefined
  • '' (the empty string)
  • 0 (the number zero)
  • NaN


Fractional numbers can act funny:

> .1 + .2
> .1 + .2 === .3

Default values

You can use the logical or (||) operator to get default values out of objects. This works because Javascript returns undefined when you ask for a property that doesn’t exist, and because undefined is a “falsy” value. Therefore:

> 3 || undefined
> undefined || 3

We can use this to get default values:

> options = {size: 'small', color: 'blue'}
> var size = options.size || 'medium'
> size
> var material = options.material || 'metal'
> material