Many folks think they know JavaScript. They know the syntax and can manipulate the DOM. Maybe they have even used jQuery. But do they really know it? I thought I did until I started digging and discovered that JavaScript is more than just a toy language for web pages. It's a full-fledged functional programming language chock full of richness. In this session, targeted at beginners, you will be introduced to some of this richness in an exciting game show format -- complete with prizes. You will learn about functions, objects, closures, and revealing modules. And you'll leave a more informed JavaScript programmer (unless, of course, you already knew JavaScript in which case you'll just leave with a prize).

2. Guy Royse, Consultant
Pillar Technology
groyse@pillartechnology.com
@guyroyse
Clean Code
TDD
JavaScript
People
Crufty Code
Working Alone
COBOL
Mean People

4. Source: http://xkcd.com/101/

6. Show
JavaScript
Problem
Someone
Tries to
Solve It
YES
Are They
Correct?
Dispense
Candy
Anymore
Problems?
NO
NO
Try Again
YES
Game Over

7. Rule #1
The first person
to answer correctly
wins
a candy bar.

8. Rule #2
You may not win more
than one candy bar.
So let others play the
game too.

9. Rule #3
If you break Rule #2,
I will give the candy bar
to the skinniest person
in the room.

10. Rule #4
If you break Rule #2
and are the skinniest
person in the room, I
will eat the candy bar.

11. Rule #5
In the event of any rules
dispute it is important
to remember,
I am always right.

13. Problem #1
varechoEchoEcho = function(value) {
varreturnValue = echoEchoEcho.lastValue;
echoEchoEcho.lastValue = value;
return returnValue;
}
var results = [];
results.push(echoEchoEcho('foo'));
results.push(echoEchoEcho('bar'));
results.push(echoEchoEcho('baz'));
a)
b)
c)
d)
undefined -- the code will throw an exception
[undefined, 'foo', 'bar']
['foo', 'bar', 'baz']
[null, 'foo', 'bar‘]

14. {}
new String('foo')
new Number(42)
new Boolean(true)
function()
'foo'
42
true and false
['foo', 42, false]

15. {}
var foo = new Object();

16. {}
var foo = {};

17. {}
var foo = {
bool : true,
num : 42,
text : 'some text',
func : function() { return 2 + 2 },
obj : { foo : 1, bar : 2 }
};

18. {}
var foo = { value : 42 };
foo.value = 23;
foo.otherValue = true;
delete foo.value;
// update
// create
// delete

19. {}
varfoo = { value : 42 };
varx = foo.value;
vary = foo['value'];
varval = 'value';
varz = foo[val];

20. {}
[]

22. Problem #2
var Policy = function() {
this.premium = 600;
this.term = 6;
this.calculateMonthlyAmount = function() {
return this.premium / this.term;
};
};
varmyPolicy = Policy();
varmyMonthlyAmount = myPolicy.calculateMonthlyAmount();
a)
b)
c)
d)
undefined -- the code will throw an exception
null
100
600

24. var balance = 200.00;
var Account = function(acctBalance) {
this.balance = acctBalance;
this.deposit = function(amount) {
this.balance += amount;
}
};
var myAcct = Account(500.00);
var myAcct = Account(0.0);

26. {}
var Policy = function(policyNumber) {
this.policyNumber = policyNumber;
this.compressPolicyNumber = function() {
return this.policyNumber.replace(' ', '');
};
};
var policy = new Policy();

27. {}
var createPolicy = function(policyNumber) {
this = {};
this.policyNumber = policyNumber;
this.compressPolicyNumber = function() {
return this.policyNumber.replace(' ', '');
};
return this;
};

28. {}
var Foo = function() {
if (!this instanceof Foo) {
return new Foo();
}
this.bar = 42;
this.baz = 'Hello, World!'
};

29. Problem #3
var principal = 5000;
var calculate = function() {
return this.principal * 0.10;
};
var account = { principal : 1000, interest : calculate };
var loan = { principal : 2000, charge : calculate };
var amount = account.interest() + loan.charge();
a)
b)
c)
d)
undefined -- the code will throw an exception
100
500
300

30. {}
function echo(value) {
return value;
}

31. {}
var echo = function(value) {
return value;
};

32. {}
var echo = function(value) {
return value;
};
var repeat = echo;

33. ()

34. {}
var echo = function(value) {
return value;
};
echo('Hola, mundo!');

35. {}
var object = {
echo: function(value) { return value; }
};
object['echo']('Hola, mundo!');
var array = [object.echo];
array[0]('Hola, mundo!');

36. {}
var value = (function(value) {
return value;
})('Hello, World!');

37. Problem #4
varfoo = function() {
foo = function() {
return 'Polo!';
};
return 'Marco!';
};
var results = [];
results.push(foo());
results.push(foo());
results.push(foo());
a)
b)
c)
d)
undefined -- the code will throw an exception
['Marco!', 'Polo!', 'Polo!']
['Marco!', 'Polo!', 'Marco!]
['Polo!', 'Marco!', 'Polo!]

39. {}
var foo = function() {
foo = function() { return 'Polo!'; };
return 'Marco!';
};
var bar = foo;
bar();

40. {}
var foo = [1,2,3];
var bar = [];
foo.forEach(function(item) {
bar.push(item * 10);
});
// bar == [10, 20, 30]

41. {}
[].forEach(fn)
[].filter(fn)
[].every(fn)
[].some(fn)
[].sort(fn)
iterates every item
creates new array of items
where true is returned
iterates items
until false is returned
iterates items
until true is returned
comparator function

42. Problem #5
varfoo = (function() {
var count = 0;
var values = ['foo', 'bar', 'baz', 'qux'];
return function() {
count++;
return values[count];
};
})();
var results = [foo(), foo(), foo()];
a)
b)
c)
d)
undefined -- the code will throw an exception
['foo','bar','baz']
['bar','baz','qux']
['qux','baz','bar']

44. {}
varcreatePolicy = function(number) {
varpolicyNumber = number;
return {
getPolicyNumber: function() {
return policyNumber;
}
};
};

45. {}
var policy = (function() {
var policyNumber = '1234567890';
return {
getPolicyNumber: function() {
return policyNumber;
}
};
})();

47. {}
JavaScript: The Good Parts
Douglas Crockford
JavaScript Patterns
Stoyan Stefanov