Javascript Pitfalls and tips

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]
hello
> a['0']
hello

+

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

> 5 + 6
11
> '5' + '6'
'56'
> 5 + '6'
'56'

Equality

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'
true

The === operator leaves the types alone:

> 0 === '0'
false

var

var defines the private variables for a function. For example, put this into the left-hand window of your repl.it 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

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

> 0/0
NaN

NaN is not equal to anything else, including itself:

> NaN === NaN
false
> NaN !== NaN
true

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

> x = NaN
> isNan(x)
true

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

Decimals

Fractional numbers can act funny:

> .1 + .2
0.30000000000000004
> .1 + .2 === .3
false

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
3
> undefined || 3
3

We can use this to get default values:

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