JavaScript for C# Developers

Module 1: JavaScript Basics

Shawn Wildermuth
Wilder Minds
wilderminds.com
 Agenda

 JavaScript and C#
 Runtime Environments

 Comparing Languages

 Strong and Loose Typing

 Dynamic Typing

 Language Basics

 Types
using System; Requiring Libraries

namespace Example { Defining Packaging

public class Dog : Pet, IAnimal {
Inheritance/Implementation
public Dog()
Construction
: base(4) {
}

FoodType _foodType = FoodType.Dry; State

public FoodType FoodType { Exposing State

get { return _foodType; }
set { _foodType = value; }
}

public override void Feed(FoodType food) {

Behavior
base.Feed(food);
} Defining Scope
}
}
 Comparing Runtime Environments

 C# and .NET

 Common Language Runtime (CLR) provides services:

 Memory Management (e.g. Garbage Collection)

 Just-in-Time Compilation

 Common Type System

 (et al.)
 Comparing Runtime Environments

 JavaScript Engines

 Depends on Browser

 (e.g. V8 in Chrome, Chakra in IE, *Monkey in Firefox)

 Services

 Memory Management

 Just-in-Time Compilation (for the most part)

 Type System

 (et al.)
 Comparing Runtime Environments

 JavaScript and CLR

 The services are similar

 Should be able to just write code and trust the environment

 Garbage Collection is Good Enough (for the most part)

 JIT gives you performance

 Though JS JIT'ing is based on what browser you're running in

 Comparing the Languages

C# JavaScript

• Strongly-Typed • Loosely-typed
• Static • Dynamic
• Classical Inheritance • Prototypal
• Classes • Functions
• Constructors • Functions
• Methods • Functions

* From Douglas Crawford's "Classical Inheritance in JavaScript"

(http://shawnw.me/jsinheritance)
 Strong and Loose Typing

// JavaScript
C#
var customer = new Customer(); Compiler
Variable Inferred
Declaration
 Strong and Loose Typing

 Strong Typing
 Types are defined by names and typically static structure

 Compiler does the checks for you

 Compiler can infer the type when necessary

// C#
var x = 0; // Infers type to be int

bool isInt = x is int; // true

x = new object(); // Compilation Error

 Strong and Loose Typing

 Loose Typing
 Types are typically defined by structure not by identity

 Runtime checks

 Type is dynamic

// JavaScript
var x = 0; // creates variable x that holds a number

var isNumber = typeof x == "number"; // Works but limited

x = new Object(); // no problem, redefines x with new type

 Strong and Loose Typing

 Strong Typing and OOP

 Inheritance and implementations are part of type identity

// C#
class Dog : Animal, IMoveable {...}
class Car : Vehicle, IMoveable {...}

// Accepts Any Animal (base class has Feed Method)

void Feed(Animal ani) { ani.Feed(); }

// Accepts any object that implements Interface

void Move(IMoveable object) { object.Move(); }
 Strong and Loose Typing

 Loose Typing and OOP

 Type is less important, but shape is important

 Classic Duck Typing

// JavaScript

// Accepts any object

// (must implement Feed function)
function Feed(ani) { ani.Feed(); }

// Accepts any object

// (must implement Move method)
function Move(object) { object.Move(); }
 Dynamic Typing

 Dynamic Typing Can be Powerful

 "With much power comes much responsibility"

// JavaScript
var x = {
name: "Shawn",
city: "Atlanta"
};

x.phone = "404-555-1212";
x.makeCall = function () {
callSomeone(this.phone);
};
 Language Basics

 Global Scope
 Objects at root are 'global'

// C#
JavaScript
var x =class
public 1; MyApp
{
function
static someFunction(arg1,
void SomeFunction(int
arg2)
x, int
{ y)
} {
}
someFunction(1,x);
static void Main()
{
var x = 1;
SomeFunction(5, x):
}
}
 Language Basics

 Type Coalescing
 JavaScript Wants to Coalesce Values

// JavaScript
C#
"test " + "me" // test//metest me
"test " + 1
1.ToString();
// test//
1 test 1
"test
String.Concat(100,
" + true //
"25");
test//true
10025
"test " + (1 == 1) // test true
100 + "25" // 10025
 Language Basics

 Most Operators Identical to .NET, except…

 Equality/NotEqual (==, !=)
 Determines equality with coalescing (if necessary)

// JavaScript
"hello" == "hello"; // true
1 == 1; // true
1 == "1"; // true
 Language Basics

 JavaScript's Identically Equality Operators (===, !==)

 Similar to .Equal()
 Determines equality without coalescing

// JavaScript
"hello" == "hello"; // true
1 == 1; // true
1 == "1"; // true
1 === "1"; // false
1 !== "1"; // true
1 === 1.000000000000001; // false
1 === 1.0000000000000001; // true
 Types

 Primitives
 JavaScript has basic types
 "Value Types"
 boolean

 string

 number

 "Reference Type"
 object

 "Delegate Type"
 function

 Special
 "undefined"
 Types

 Type Detection
 typeof operator

// JavaScript
var x = 1;
var typeName = typeof x; // "number"
 Types

 Special Types
 null

 undefined
// JavaScript
var a = null; // "null"
var b = c; // "undefined"
 Types

 "Value Types"
// JavaScript
var a = typeof 1; // "number"
var b = typeof 1.0; // "number"
var c = typeof true; // "boolean"
var d = typeof false; // "boolean"
var e = typeof "hello world"; // "string"
 Types

 The Number Type

 Holds IEEE-754 format
 (This format prone to rounding errors)

 Integers and Floating Point Numbers

// JavaScript
var a = 1; // integer
var b = 1.5; // floating point
var c = 070; // integer (in octal)
var d = 0xffff; // integer (in hex)
var e = 1.34e6; // Scientific Notation (1340000)
var f = 10.0; // integer (optimization)
 Types

 number
 Special Values

// JavaScript
var a = Number.MIN_VALUE;
var b = Number.MAX_VALUE;
var c = Number.POSITIVE_INFINITY;
var d = Number.NEGATIVE_INFINITY;

var fail = 10/"zero"; // Not a Number (NaN)

var test1 = NaN == NaN; // false, huh?
var test2 = isNaN(NaN); // true
var test3 = isNaN(fail); // true
var test4 = isNaN(10); // false
var test5 = isNaN("10"); // false
var test6 = isNaN("fail"); // true
 Types

 The Boolean Type

 true and false only (e.g. not a number)
 Flow-control statements apply coalescing to boolean

// JavaScript
if (true) {} // true
if (false) {} // false
if ("hello") {} // true
if ("") {} // false
if (25) {} // true
if (0) {} // false
if (10/0) {} // false (NaN)

var a = null;
if (a) {} // false
if (c) {} // false (undefined)
 Types

 The String Type

 Immutable (like .NET)

// JavaScript
var s = "String"; // Simple Strings
var t = 'String'; // Either delimiter

var u = "One" + "Two"; // Immutable

var single = u[3]; // 'T'

log(u.length); // 6
var d = "�‫;"בָּרוּ‬ // Unicode
log(d.length); // 8 (count of 8 bits)
 Types

 "Reference Types"

// JavaScript
var a = new Object(); // "object"
var b = new Array(); // "object"
 Types

 Object Literals
 Shortcut for creating data structures
// JavaScript
var data = {
name: "hello",
"some value": 1
};

var more = {
"moniker": "more data",
height: 6.0,
subData: {
option: true,
flavor: "vanilla"
}
};
 Types

 Array Literals
 Shortcut for creating collections
// JavaScript
var array = [ "hello", "goodbye" ];

var coll = [{
"moniker": "more data",
height: 6.0,
subData: {
option: true,
flavor: "vanilla"
}
}];
 Types

 Array
 Untyped Collection

// JavaScript
var c = [];

c.length; // Um, yeah…

c.push({}); // add to end

var obj = c.pop() // remove from end
c.shift(); // remove from beginning
c.unshift({}); // add to beginning

var where = c.indexOf(obj); // positional access

where = c.lastIndexOf(obj);

// etc. slice, splice, concat

 Types

 Functions
 Yup, a data type

 Just like Func<>

// JavaScript
var f = function (arg1, arg2) {
};
f(1,2);

var o = {
name: "Shawn",
sing: function (song) {
}
};
o.sing("happy birthday");
 Summary

 JavaScript and .NET

 While there is much in common, there are definite differences

 The differences between Strong and Loose typing are key

 The basics of JavaScript are important to expecting the right behavior

 The type system differences aren't too surprising