Post on 30-Nov-2014
description
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
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