So you think you know JavaScript

So you think you know
JavaScript?
1
Matt Apperson
Founder / Owner

© 2013 Apperson Labs
Matt Apperson
matt@appersonlabs.com
http://appersonlabs.com
twitter: @appersonlabs

3
JavaScript is a great language!

But do a quick Google search and you see that many
have no clue how to use it correctly to build apps
WHY?

Ask any developer who has ever touched a website,
and he will say he knows JavaScript...
WRONG?

Seen this page much?

Go here!
http://goo.gl/cQgzw

DEATH TO CoffeeScript!!
And all frameworks...

10
• JS has been around for a while, but it has been
the red headed step child

11
• Most JS examples and tutorials are legacy, hacks,
and based on use in web pages

12
• Most JS examples and tutorials are legacy, hacks,
and based on use in web pages
• JS is NOT strongly typed, so it’s easy to turn it
into spaghetti code

“Where are we going thunder?” - Brian Regan
•How JavaScript works (from 10,000 feet)
•Common mistakes
•Titanium gotchas (aka “the dark corners”)

Object usage and properties
false.toString(); // 'false'
[1, 2, 3].toString(); // '1,2,3'
function Foo(){}
Foo.bar = 1;
Foo.bar; // 1

2.toString(); // raises SyntaxError
2..toString(); // the second point is correctly recognized
2 .toString(); // note the space left to the dot
(2).toString(); // 2 is evaluated first

var obj = {
bar: 1,
foo: 2,
baz: 3
};
obj.bar = undefined;
obj.foo = null;
delete obj.baz;
for(var i in obj) {
if (obj.hasOwnProperty(i)) {
console.log(i, '' + obj[i]);
}
}

Bar.prototype = Foo.prototype;
JS Prototype (incorrect):
String.prototype.yell() = function() {
return this + 'yay!!!!';
}
Not inheriting correctly...
Prototyping native objects...

Functions

Function declaration:
// Example 1
var test = function() {
return "yay!";
}
// Example 2
function TestTwo() {
return "yay also!";
}
console.log(test); // "yay"
console.log(TestTwo); // "yay also!""

Function declaration:
// Example 1
console.log(test); // Error
var test = function() {
return "yay!";
};
// Example 2
console.log(TestTwo); // “yay also!”
function TestTwo() {
return "yay also!";
}

Closures
function Counter(start) {
var count = start;
return {
increment: function() {
count++;
},
get: function() {
return count;
}
}
}
var foo = Counter(4);
foo.increment();
foo.get(); // 5

Closures (the reference issue)
for(var i = 0; i < 10; i++) {
setTimeout(function() {
console.log(i);
}, 1000);
}

Closures (the reference issue)
for(var i = 0; i < 10; i++) {
(function(e) {
setTimeout(function() {
console.log(e);
}, 1000);
})(i);
}

Constructors
function Foo() {
this.bla = 1;
}
Foo.prototype.test = function() {
console.log(this.bla);
};
var test = new Foo();
function Blob() {
return false;
}
new Blob(); // an empty object, not what’s expected
function Test() {
this.value = 2;
return {
fun: 1
};
}
new Test(); // the returned object

Constructors (factories)
function Bar() {
var value = 1;
return {
method: function() {
return value;
}
}
}
Bar.prototype = {
foo: function() {}
};
new Bar();
Bar();

Constructors (dropping “new”)
function Foo() {
var obj = {};
obj.value = 'blub';
var private = 2;
obj.someMethod = function(value) {
this.value = value;
}
obj.getPrivate = function() {
return private;
}
return obj;
}

Constructors (dropping “new”)
•It uses more memory since the created objects do not
share the methods on a prototype.
•In order to inherit, the factory needs to copy all the
methods from another object or put that object on the
prototype of the new object.
•Dropping the prototype chain just because of a left out
`new` keyword is contrary to the spirit of the language.

Common
Mistakes

setTimeout();
var timer = setTimeout(function() {
// more code here
}, 100);
This might not do what you think...
•It is expensive as it creates a new context
•The timer is not accurate as JS engines only have a
single thread, forcing asynchronous events to queue
waiting for execution.

USING_CAPS_FOR_CONSTANTS
var DELAY = 20; // This is a constant, don’€šÃ„Ã´t change
For a long time we had to do this...
That is messy and dangerous... we have better
options now!
const DELAY = 20; // This is a real constant

parseInt();
var testONE = parseInt('20'); // This returns 20

parseInt();
var testTWO = parseInt('08'); // This returns 0

parseInt();
var testTWO = parseInt('08'); // This returns 0
var testTHREE = parseInt('08', 10); // This returns 08

Global Variables
var bar = 'JavaScript can be fun!';
function foo() {
bar = 'with a few exceptions';
return bar;
}
console.log(foo()); // 'with a few exceptions'
console.log(bar); // 'with a few exceptions'

Global Variables
function foo() {
var bar = 'with a few exceptions';
return bar;
}
console.log(foo()); // 'with a few exceptions'
console.log(bar); // 'JavaScript can be fun!'

Global Variables
function foo() {
var cat = bar
cat = cat + ' yay!';
return bar;
}
console.log(foo()); // 'Javascript can be fun! yay!'
console.log(bar); // 'Javascript can be fun!'

Not using hasOwnProperty();
function Cat() {
// some code
}
Cat.prototype.stomach = [ ];
Cat.prototype.eat = function(food) {
for( var i in food ) {
this.stomach.push(food[i]);
}
};

Not using hasOwnProperty();
function Cat() {
// some code
}
Cat.prototype.stomach = [ ];
Cat.prototype.eat = function(food) {
for( var i in food ) {
if(food.hasOwnProperty(i)) {
this.stomach.push(food[i]);
}
}
};

Using fake getters and setters...
function Foo(){
var _value;
this.getValue = function(){
return _value;
};
this.setValue = function(val){
_value = val;
};
}
console.log('The value is:' + this.value); // nope
console.log('The value is:' + this.getValue()); // OK...
}

True getter and setters!
function Foo(){
var _value;
Object.defineProperty(this, "value", {
get : function(){ return _value; },
set : function(newValue){
_value = newValue;
},
enumerable : true
});
}
console.log('The value is:' + this.value); // Yep!
}
Reference - https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/defineProperty

Not returning `this` on non-getters
function test() { }
test.prototype.run = function() {
console.log('Doing something...');
};
test.prototype.sayHi = function() {
console.log('Doing something else...');
};
var bar = new test();
bar.run();
bar.sayHi();

Not returning `this` on non-getters
function test() { }
test.prototype.run = function() {
console.log('Doing something...');
return this;
};
test.prototype.sayHi = function() {
console.log('Doing something else...');
return this;
};
var bar = new test().run().sayHi();

Try / Catch - A good idea?
function test() {
try {
// do stuff here
} catch(e) {
//this will blow up sometimes and I don’t know why...
}
}

Try / Catch...
function test() {
try {
// do stuff here
} catch() {
// this might work, and it might blow up.
// I have no idea why it blows up sometimes
}
}

Try / Catch...
function test() {
try {
// do stuff here
} catch(e) {
// this works
console.log(e);
}
}
// There is a performance hit, yet it is responsible. So weigh the choice to use it
carefully

Titanium gotchas...
Reference - http://developer.appcelerator.com/blog/2012/02/what-is-a-titanium-proxy-object.html
•Objects returned by the Titanium API are not true JS
objects
[TIMOB-5818]
•Common JS does not work the same on both platforms
[TIMOB-8082]
•Multiple JS engines to consider

So you think you know JavaScript

Recommended

Recommended

More Related Content

What's hot

What's hot (20)

Viewers also liked

Viewers also liked (7)

Similar to So you think you know JavaScript

Similar to So you think you know JavaScript (20)

Recently uploaded

Recently uploaded (20)

So you think you know JavaScript

Editor's Notes