JavaScript wtfs

some of the most fun pitfalls

Andy Balaam

Contents

• Global object
• Equality and inequality
• Syntax
• Reserved words
• typeof
• Arithmetic
• parseInt
• Arrays

Before we start

Honestly, JavaScript is great

Global object - leakage

>>> var x = 3;
undefined

>>> function myfn() { x = 10; }
undefined

>>> x;
3

>>> myfn();
undefined

>>> x;
10

>>> wtf
ReferenceError: wtf is not defined

Global object - "var"

>>> var x = 3;
undefined

>>> x;
3

>>> function myfn2() { var x = 20; }
undefined

>>> myfn2();
undefined

>>> x;
3

>>> wtf
ReferenceError: wtf is not defined

Equality and inequality - false

>>> false == 'false';
false

>>> false == '0';
true

>>> '' == '0';
false

>>> 0 == '';
true

>>> 0 == '0';
true

>>> wtf
ReferenceError: wtf is not defined

Equality and inequality - null etc.

>>> false == undefined;
false

>>> false == null;
false

>>> null == undefined;
true

>>> ' \r\n ' == 0;
true

>>> wtf
ReferenceError: wtf is not defined

Equality and inequality - objects

>>> var obj1 = {};
undefined

>>> var obj2 = {};
undefined

>>> obj1 == obj2;
false

>>> obj1 == null;
false

>>> doh.assertEqual( obj1, obj2 );
true

Syntax - Scope

>>> function myfn() {
        console.log( x );
        if( true ) {
             var x = 4;
        }
        console.log( x );
    }
undefined

>>> myfn()
undefined
4
undefined

>>> wtf
ReferenceError: wtf is not defined

Syntax - Scope (2)

>>> function myfn() {
        console.log( x );
        if( false ) {
             var x = 4;
        }
        console.log( x );
    }
undefined

>>> myfn()
undefined
undefined
undefined

>>> wtf
ReferenceError: wtf is not defined

Syntax - Invocation patterns

>>> this.id = 'global';
"global"

>>> var obj = {
        id: 'my obj',
        myMeth: function() { return this.id; }
    };
undefined

>>> obj.myMeth();
"my obj"

>>> var theMethod = obj.myMeth;
undefined

>>> theMethod();
'global'

Syntax - Semi-colon insertion

>>> function myfn3() {
        return {
            a: 3
        };
    };
undefined

>>> myfn3();
Object { a=3 }

Syntax - Semi-colon insertion (2)

>>> function myfn4() {
        return
        {
            a: 3
        };
    };
undefined

>>> myfn4();
undefined

>>> wtf
ReferenceError: wtf is not defined

Reserved words

>>> var extends = 3;
SyntaxError: extends is a reserved identifier

>>> wtf
ReferenceError: wtf is not defined

typeof - numbers

>>> typeof 3;
"number"

>>> typeof 1.4;
"number"

>>> typeof NaN;
"number"

>>> wtf
ReferenceError: wtf is not defined

typeof - objects

>>> typeof {};
"object"

>>> typeof [];
"object"

>>> typeof undefined;
"undefined"

>>> typeof myvarthatisntdefined;
"undefined"

>>> typeof null;
"object"

>>> wtf
ReferenceError: wtf is not defined

Arithmetic

>>> 0.1 + 0.2;
0.30000000000000004

parseInt

>>> parseInt( '15' );
15

>>> parseInt( '15 and a half' );
15

>>> parseInt( 'twice 32' );
NaN

>>> parseInt( '015' );
13

>>> parseInt( '015', 10 );
15

Arrays - Looping

>>> for( var i in [ 21, 22, 23 ] ) { console.log( i ); };
0
1
2

>>> wtf
ReferenceError: wtf is not defined

Arrays - Adding properties

>>> var myarr = [ 21, 22, 23 ];
undefined

>>> myarr;
[21, 22, 23]

>>> myarr.foo = 3;
3

>>> myarr;
[21, 22, 23]

>>> myarr.foo;
3

Arrays - Length

>>> myarr.length = 5;
5

>>> myarr;
[21, 22, 23, undefined, undefined]

>>> myarr.length = 'baz';
RangeError: invalid array length

Arrays - Sorting

>>> var arr = [3, 2, 1, 33, 22, 11];
undefined

>>> arr;
[3, 2, 1, 33, 22, 11]

>>> arr.sort();
[1, 11, 2, 22, 3, 33]

>>> typeof arr[0];
"number"

>>> 11 < 2;
false

>>> wtf
ReferenceError: wtf is not defined

Discussion