tatham oddie, readify @tathamoddie
TRANSCRIPT
![Page 1: Tatham Oddie, Readify @tathamoddie](https://reader036.vdocuments.mx/reader036/viewer/2022062320/56649d825503460f94a6733f/html5/thumbnails/1.jpg)
![Page 2: Tatham Oddie, Readify @tathamoddie](https://reader036.vdocuments.mx/reader036/viewer/2022062320/56649d825503460f94a6733f/html5/thumbnails/2.jpg)
JavaScript for C# DevelopersTatham Oddie, Readify@tathamoddie
WPD401
![Page 3: Tatham Oddie, Readify @tathamoddie](https://reader036.vdocuments.mx/reader036/viewer/2022062320/56649d825503460f94a6733f/html5/thumbnails/3.jpg)
JavaScript is not C#Scripting language, not compiledSame: Case sensitivity wrapped in squiggly bracesDifferent: Dynamic types, scope rules, this is not that
![Page 4: Tatham Oddie, Readify @tathamoddie](https://reader036.vdocuments.mx/reader036/viewer/2022062320/56649d825503460f94a6733f/html5/thumbnails/4.jpg)
https://flic.kr/p/ebk8iJ
![Page 5: Tatham Oddie, Readify @tathamoddie](https://reader036.vdocuments.mx/reader036/viewer/2022062320/56649d825503460f94a6733f/html5/thumbnails/5.jpg)
http://l.tath.am/duckscript
![Page 6: Tatham Oddie, Readify @tathamoddie](https://reader036.vdocuments.mx/reader036/viewer/2022062320/56649d825503460f94a6733f/html5/thumbnails/6.jpg)
Objects in JavaScript are like C# dictionaries, not C# objectsobject.property is really object['property']
![Page 7: Tatham Oddie, Readify @tathamoddie](https://reader036.vdocuments.mx/reader036/viewer/2022062320/56649d825503460f94a6733f/html5/thumbnails/7.jpg)
Functions are ‘first class objects’, not methods on an objectMethods are properties of an object that simply reference a function
![Page 8: Tatham Oddie, Readify @tathamoddie](https://reader036.vdocuments.mx/reader036/viewer/2022062320/56649d825503460f94a6733f/html5/thumbnails/8.jpg)
this is the calling context, not the class a function is defined inRemember: functions are objects, not methods. They don’t have a parent object they belong to, unlike C#.
![Page 9: Tatham Oddie, Readify @tathamoddie](https://reader036.vdocuments.mx/reader036/viewer/2022062320/56649d825503460f94a6733f/html5/thumbnails/9.jpg)
Closures and confusionA closure is a function/method enclosed in a parent, and has access to the parents variables
![Page 10: Tatham Oddie, Readify @tathamoddie](https://reader036.vdocuments.mx/reader036/viewer/2022062320/56649d825503460f94a6733f/html5/thumbnails/10.jpg)
Closures and confusion
var z = { i: 0, Fn: function () { var a = function () { this.i = 42; }; a(); console.log(this.i); }};z.Fn();
A closure is a function/method enclosed in a parent, and has access to the parents variables.
Not using method syntax, so this will be the global object
![Page 11: Tatham Oddie, Readify @tathamoddie](https://reader036.vdocuments.mx/reader036/viewer/2022062320/56649d825503460f94a6733f/html5/thumbnails/11.jpg)
this’n’that
var z2 = { i: 0, Fn: function () { var that = this; var a = function () { that.i = 42; }; a(); console.log(this.i); }};z2.Fn();
Common pattern: use that.
![Page 12: Tatham Oddie, Readify @tathamoddie](https://reader036.vdocuments.mx/reader036/viewer/2022062320/56649d825503460f94a6733f/html5/thumbnails/12.jpg)
How about this?
var z3 = { i: 0, Fn: function () { var that = this; var a = function () { this.i = 42; }; that.a(); console.log(this.i); }};z3.Fn();
Common pattern: use that.
![Page 13: Tatham Oddie, Readify @tathamoddie](https://reader036.vdocuments.mx/reader036/viewer/2022062320/56649d825503460f94a6733f/html5/thumbnails/13.jpg)
FunctionsCan optionally have a nameNo name? Anonymous function
![Page 14: Tatham Oddie, Readify @tathamoddie](https://reader036.vdocuments.mx/reader036/viewer/2022062320/56649d825503460f94a6733f/html5/thumbnails/14.jpg)
FunctionsCan return a valueThat value can be itself
![Page 15: Tatham Oddie, Readify @tathamoddie](https://reader036.vdocuments.mx/reader036/viewer/2022062320/56649d825503460f94a6733f/html5/thumbnails/15.jpg)
FunctionsCan optionally have parametersAlways have the implicit arguments parameterParameters not passed are given as undefinedCannot be overloaded*
![Page 16: Tatham Oddie, Readify @tathamoddie](https://reader036.vdocuments.mx/reader036/viewer/2022062320/56649d825503460f94a6733f/html5/thumbnails/16.jpg)
FunctionsHave a calling context, exposed as this
![Page 17: Tatham Oddie, Readify @tathamoddie](https://reader036.vdocuments.mx/reader036/viewer/2022062320/56649d825503460f94a6733f/html5/thumbnails/17.jpg)
null vs. undefinedBoth are primitive typesBoth evaluate to false in boolean expressionsnull is for the absence of a valueundefined is for cats
![Page 18: Tatham Oddie, Readify @tathamoddie](https://reader036.vdocuments.mx/reader036/viewer/2022062320/56649d825503460f94a6733f/html5/thumbnails/18.jpg)
'==' !== '==='Prefer === and !== over == and !=Objects are only equal to themselvesPrimitives are equal if the square peg looks round-ish
![Page 19: Tatham Oddie, Readify @tathamoddie](https://reader036.vdocuments.mx/reader036/viewer/2022062320/56649d825503460f94a6733f/html5/thumbnails/19.jpg)
Classes in JavaScriptThere is no class keyword*There is a new keyword though
![Page 20: Tatham Oddie, Readify @tathamoddie](https://reader036.vdocuments.mx/reader036/viewer/2022062320/56649d825503460f94a6733f/html5/thumbnails/20.jpg)
Prototyping
function Apple(type) { this.type = type; this.color = 'red'; }
Apple.prototype.getInfo = function () { return this.color + ' ' + this.type + ' apple';};
new Apple('tasty').getInfo() === 'red tasty apple';
![Page 21: Tatham Oddie, Readify @tathamoddie](https://reader036.vdocuments.mx/reader036/viewer/2022062320/56649d825503460f94a6733f/html5/thumbnails/21.jpg)
But wait, there’s more!
var apple = { type: 'tasty', color: 'red', getInfo: function () { return this.color + ' ' + this.type + ' apple'; }}
![Page 22: Tatham Oddie, Readify @tathamoddie](https://reader036.vdocuments.mx/reader036/viewer/2022062320/56649d825503460f94a6733f/html5/thumbnails/22.jpg)
Steak knives?
var apple = new function() { this.type = 'tasty'; this.color = 'red'; this.getInfo = function () { return this.color + ' ' + this.type + ' apple'; };}
![Page 23: Tatham Oddie, Readify @tathamoddie](https://reader036.vdocuments.mx/reader036/viewer/2022062320/56649d825503460f94a6733f/html5/thumbnails/23.jpg)
Strap in: prototypical inheritance
var Food = function(sugar) { this.sugar = sugar;};Food.prototype.isHealthy = function() { return this.sugar < 5; };
var Fruit = function() { Food.call(this, 10);}Fruit.prototype = Object.create(Food.prototype);Fruit.prototype.constructor = Fruit;
var apple = new Fruit();
![Page 24: Tatham Oddie, Readify @tathamoddie](https://reader036.vdocuments.mx/reader036/viewer/2022062320/56649d825503460f94a6733f/html5/thumbnails/24.jpg)
windowGlobal namespace for the browserDefined outside a function? Goes hereDefined without var? Goes hereSource file makes no difference at all
![Page 25: Tatham Oddie, Readify @tathamoddie](https://reader036.vdocuments.mx/reader036/viewer/2022062320/56649d825503460f94a6733f/html5/thumbnails/25.jpg)
NamespacesAvoid collisions
![Page 26: Tatham Oddie, Readify @tathamoddie](https://reader036.vdocuments.mx/reader036/viewer/2022062320/56649d825503460f94a6733f/html5/thumbnails/26.jpg)
ArraysNot the arrays you’re used to from C#Actually like a Dictionary<int,object>Key is an auto-incremented numberlength returns that value
![Page 27: Tatham Oddie, Readify @tathamoddie](https://reader036.vdocuments.mx/reader036/viewer/2022062320/56649d825503460f94a6733f/html5/thumbnails/27.jpg)
Modular JavaScriptUse a pattern to encapsulate functionality and avoid naming clashesFrameworks like Angular and Knockout have conventions to support modularity
![Page 28: Tatham Oddie, Readify @tathamoddie](https://reader036.vdocuments.mx/reader036/viewer/2022062320/56649d825503460f94a6733f/html5/thumbnails/28.jpg)
To summarize…It’s a complete languageYou can still write clean codeDon’t be afraid of the quacking horse-headed cat
![Page 29: Tatham Oddie, Readify @tathamoddie](https://reader036.vdocuments.mx/reader036/viewer/2022062320/56649d825503460f94a6733f/html5/thumbnails/29.jpg)
Bonus ContentThe 2-min introduction to TypeScript
![Page 30: Tatham Oddie, Readify @tathamoddie](https://reader036.vdocuments.mx/reader036/viewer/2022062320/56649d825503460f94a6733f/html5/thumbnails/30.jpg)