javascript, do you speak it!

JavaScriptDo you speak it!

Tuesday, August 2, 2011

!"#$%&'(&'&)**+,&-*.%/012%*3%*4&5#663*78(9::;#%7/<=$&>:"#$%&'(&'&)*


“The world’s most

misunderstood

programming language”


We’ll talk about

why JavaScript is the most misunderstood programming language

Object Oriented Programming in JavaScript

function scope, closures, circular references

making the web a little faster


JavaScript

aka Mocha

aka LiveScript

aka JScript aka ECMAScript


Java... Script?

somehow related to Java?

maybe a subset?

less capable interpreted version of Java?


Java... Script?

developed by Netscape in 1997 (vs. 3.0 in 1999)

Java prefix intended to create confusion

JavaScript is not interpreted Java


Design errors

overloading “+” means both addition and string concatenation with type conversion

error-prone “with” statement

reserved word policies are much too strict

semicolon insertion was “a huge mistake”

1 + “1” = ?1 + +”1” = ?


Bad implementations

earlier implementations were buggy

embedded horribly in browsers

did not respect the ECMA standard


Evolution

first versions of JavaScript were quite weak

no exception handling, inner functions

in its present form, it’s a full OOP language

ECMAScript 5.1


Overview

types and operators, core objects, methods

does not have classes, but this functionality is accomplished with object prototypes

functions are objects (and can be passed around as parameters)


(Loosely) TypesNumber

String

Boolean

Object (Function, Array, Date, RegExp)

Null

Undefined

typeofinstanceof


Lisp in C’s clothing

C-like syntax (curly braces, for statement...)

appears to be a procedural language

it’s actually a functional language!


Haskell vs. JSpalindr :: [Int] -> Boolpalindr [] = Truepalindr [x] = Truepalindr xs = (head xs == last xs) && palindr (tail (init xs))

function palindr(xs) { var i, len = xs.length; for (i = 0; i < len / 2; i++) if (xs[i] !== xs[len - i - 1]) return false;

return true;}


Objects

JavaScript is fundamentally about objects

usually implemented as hashtables

objects are created using constructors

use a namespace for them (don’t modify objects you don’t own)

use JS sugar: var obj = {}; and var arr = [];


OOP

polymorphism

encapsulation

inheritance

abstractization

class Dog { public string name = “”; public int yearsOld = 0;

void bark(int times); void bark(float volume); void sleep();}

class Pudel : Dog { public int cuteness = 5;}

Dog pinky = new Dog();Dog leyla = new Pudel();


Objects in JavaScriptMyNamespace.Dog = function(){ this.name = “”; this.yearsOld = 0;};

MyNamespace.Dog.prototype = { bark: function(param){ }, sleep: function(){ }};

var pinky = new Dog();var leyla = new Dog();leyla.cuteness = 5;


Objects in JavaScriptMyNamespace.Dog = function(){ this.name = “”; this.yearsOld = 0;};

MyNamespace.Dog.prototype = { bark: function(param){ }, sleep: function(){ }};

var pinky = new Dog();var leyla = new Dog();leyla.cuteness = 5;

no private members?


Closuresfunction foo(a, b){ function bar() { return a + b; }

return bar();}

function foo2(a, b){ function bar(c) { return a + b + c; }

return bar;}

var res1 = foo(5, 2);var res2 = foo2(5, 2);

var res3 = res2(3);


Private membersMyNamespace.Dog = function(){ var name = “”; var yearsOld = 0;

this.bark = function(param){ if (“Number” === typeof param) { } else { } }; this.sleep = function(){ };};

var pinky = new Dog();


Private membersMyNamespace.Dog = function(paramName, paramYearsOld){ var name = paramName; var yearsOld = paramYearsOld;

this.bark = function(param){ }; this.sleep = function(){ };

get nrYearsOld(){ return yearsOld; };};

var pinky = new Dog();console.log(pinky.nrYearsOld);


Why is JavaScript slow?

Bad compilation?



No compilation!*



No compilation!*

*yes, interpreters are a lot smarter these days, but..


Scope chainsfunction scope1(){ var elem2;

function scope2(){ var elem2; function scope3(){ var elem3; var func = window.alert;

return { something: elem4, somethingElse: elem5 } } }}


Memory leaks

function leakMemory(){ var elem = somethingThatOccupiesLotsOfMemory; function inner(){ }; return inner;}

var res1 = leakMemory();var res2 = leakMemory();


Circular references

function leakMemory(){ var elem = document.getElementById(“someId”); elem.onclick = function(){ };}


Circular references

function dontLeakMemory(){ var elem = document.getElementById(“someId”); elem.onclick = function(){ };

elem = null;}


Circular references

function leakMemory(){ var elem = document.getElementById(“someId”); elem.onclick = function(){ };

return elem;}


Circular references

function dontLeakMemory(){ var elem = document.getElementById(“someId”); elem.onclick = function(){ }; try { return elem; } finally { elem = null; }}


Scope bindingfunction scopeBinding(){ this.elem = {}

function addMemberToElem(){ this.elem.newProperty = 5; // fail };

addMemberToElem();}


Scope bindingfunction scopeBinding(){ this.elem = {};

function addMemberToElem(){ this.elem.newProperty = 5; };

addMemberToElem.call(this);}



function addMemberToElem(propertyValue){ this.elem.newProperty = propertyValue; };

addMemberToElem.call(this, 5);}



var addMemberToElem = function(propertyValue){ this.elem.newProperty = propertyValue; }.bind(this);

addMemberToElem(5);}


“But why should I do OOP with JavaScript?”


?Tuesday, August 2, 2011

javascript, do you speak it!

Technology

private members

bark function

onclick function

javascript

javascript

sleep function

return bar

var pinky