So You Think You Know

JavaScript?

Guy Royse, ConsultantPillar Technologygroyse@pillartechnology.com@guyroyse

Clean CodeTDD

JavaScriptPeople

Crufty CodeWorking Alone

COBOLMean People

DislikesLikes

Who is This Guy?

I ThoughtThat

I KnewJavaScript

A Word About Scope

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

So You Think YouKnow JavaScript?

Show JavaScript Problem

Someone Tries toSolve It

Are TheyCorrect?

Dispense Candy

YESAnymore

Problems?

YES

Game Over

NO

Try Again

NO

Rule #1

The first personto answer correctly

winsa candy bar.

You may not win more than one candy bar.

So let others play the game too.

Rule #2

If you break Rule #2,I will give the candy bar to the skinniest person

in the room.

Rule #3

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

Rule #4

In the event of any rules dispute it is important

to remember,I am always right.

Rule #5

Let’sGet

Started!

a) undefined -- the code will throw an exceptionb) [undefined, 'foo', 'bar']c) ['foo', 'bar', 'baz']d) [null, 'foo', 'bar‘]

a) undefined -- the code will throw an exceptionb) [undefined, 'foo', 'bar']c) ['foo', 'bar', 'baz']d) [null, 'foo', 'bar‘]

var echoEchoEcho = function(value) { var returnValue = echoEchoEcho.lastValue; echoEchoEcho.lastValue = value; return returnValue; }

var results = []; results.push(echoEchoEcho('foo')); results.push(echoEchoEcho('bar')); results.push(echoEchoEcho('baz'));

Problem #1

{}Many UnexpectedThings are Objects

new String('foo')new Number(42)new Boolean(true)function()

Objects or Not?'foo'

42true and false

['foo', 42, false]

var foo = new Object();

{}DefiningObjects

{}DefiningObjects

var foo = {};

{}DefiningObjects

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

{}ModifyingObjects

var foo = { value : 42 };

foo.value = 23; // updatefoo.otherValue = true; // createdelete foo.value; // delete

{}AccessingObjects

var foo = { value : 42 };

var x = foo.value;var y = foo['value'];

var val = 'value';var z = foo[val];

{}

[]

Where are the classes?

a) undefined -- the code will throw an exceptionb) nullc) 100d) 600

a) undefined -- the code will throw an exceptionb) nullc) 100d) 600

var Policy = function() { this.premium = 600; this.term = 6; this.calculateMonthlyAmount = function() { return this.premium / this.term; }; };

var myPolicy = Policy(); var myMonthlyAmount = myPolicy.calculateMonthlyAmount();

Problem #2

By defaultthis points to the global namespace

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);

Classes in JavaScript are

a fiction

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

var policy = new Policy();

{}DefiningClasses

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

{}DefiningClasses

{}Safer ConstructorFunction

var Foo = function() { if (!this instanceof Foo) { return new Foo(); }

this.bar = 42; this.baz = 'Hello, World!'};

a) undefined -- the code will throw an exceptionb) 100c) 500d) 300

a) undefined -- the code will throw an exceptionb) 100c) 500d) 300

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();

Problem #3

function echo(value) { return value;}

{}DefiningFunctions

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

{}DefiningFunctions

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

var repeat = echo;

{}DefiningFunctions

()

{}InvokingFunctions

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

echo('Hola, mundo!');

{}InvokingFunctions

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

var array = [object.echo];array[0]('Hola, mundo!');

{}ImmediateFunctions

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

a) undefined -- the code will throw an exceptionb) ['Marco!', 'Polo!', 'Polo!']c) ['Marco!', 'Polo!', 'Marco!]d) ['Polo!', 'Marco!', 'Polo!]

a) undefined -- the code will throw an exceptionb) ['Marco!', 'Polo!', 'Polo!']c) ['Marco!', 'Polo!', 'Marco!]d) ['Polo!', 'Marco!', 'Polo!]

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

var results = []; results.push(foo()); results.push(foo()); results.push(foo());

Problem #4

This is aself-defining

function

{}Self-DefiningFunctions

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

var bar = foo;bar();

{}Functions asArguments

var foo = [1,2,3];var bar = [];

foo.forEach(function(item) { bar.push(item * 10);});

// bar == [10, 20, 30]

{}ArrayFunctions

[].forEach(fn)[].filter(fn)

[].every(fn)

[].some(fn)

[].sort(fn)

iterates every itemcreates new array of items

where true is returnediterates items

until false is returnediterates items

until true is returnedcomparator function

a) undefined -- the code will throw an exceptionb) ['foo','bar','baz']c) ['bar','baz','qux']d) ['qux','baz','bar']

a) undefined -- the code will throw an exceptionb) ['foo','bar','baz']c) ['bar','baz','qux']d) ['qux','baz','bar']

var foo = (function() { var count = 0; var values = ['foo', 'bar', 'baz', 'qux']; return function() { count++; return values[count]; }; })();

var results = [foo(), foo(), foo()];

Problem #5

This isa closure

{}PrivateVariables

var createPolicy = function(number) { var policyNumber = number; return { getPolicyNumber: function() { return policyNumber; } };};

{}RevealingModule

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

ThanksFor

Playing!

{}FurtherReading

JavaScript: The Good PartsDouglas Crockford

JavaScript PatternsStoyan Stefanov