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