tatham oddie, readify @tathamoddie
TRANSCRIPT
JavaScript for C# DevelopersTatham Oddie, Readify@tathamoddie
WPD401
JavaScript is not C#Scripting language, not compiledSame: Case sensitivity wrapped in squiggly bracesDifferent: Dynamic types, scope rules, this is not that
https://flic.kr/p/ebk8iJ
http://l.tath.am/duckscript
Objects in JavaScript are like C# dictionaries, not C# objectsobject.property is really object['property']
Functions are ‘first class objects’, not methods on an objectMethods are properties of an object that simply reference a function
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#.
Closures and confusionA closure is a function/method enclosed in a parent, and has access to the parents variables
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
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.
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.
FunctionsCan optionally have a nameNo name? Anonymous function
FunctionsCan return a valueThat value can be itself
FunctionsCan optionally have parametersAlways have the implicit arguments parameterParameters not passed are given as undefinedCannot be overloaded*
FunctionsHave a calling context, exposed as this
null vs. undefinedBoth are primitive typesBoth evaluate to false in boolean expressionsnull is for the absence of a valueundefined is for cats
'==' !== '==='Prefer === and !== over == and !=Objects are only equal to themselvesPrimitives are equal if the square peg looks round-ish
Classes in JavaScriptThere is no class keyword*There is a new keyword though
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';
But wait, there’s more!
var apple = { type: 'tasty', color: 'red', getInfo: function () { return this.color + ' ' + this.type + ' apple'; }}
Steak knives?
var apple = new function() { this.type = 'tasty'; this.color = 'red'; this.getInfo = function () { return this.color + ' ' + this.type + ' apple'; };}
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();
windowGlobal namespace for the browserDefined outside a function? Goes hereDefined without var? Goes hereSource file makes no difference at all
NamespacesAvoid collisions
ArraysNot the arrays you’re used to from C#Actually like a Dictionary<int,object>Key is an auto-incremented numberlength returns that value
Modular JavaScriptUse a pattern to encapsulate functionality and avoid naming clashesFrameworks like Angular and Knockout have conventions to support modularity
To summarize…It’s a complete languageYou can still write clean codeDon’t be afraid of the quacking horse-headed cat
Bonus ContentThe 2-min introduction to TypeScript