Javascript, Do you speak it!

JavaScript
Do 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 preﬁx intended to create confusion

JavaScript is not interpreted Java


Design errors
1 + “1” = ?
1 + +”1” = ?
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”


Bad implementations

earlier implementations were buggy

embedded horribly in browsers

did not respect the ECMA standard


Evolution

ﬁrst 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) Types
typeof
Number instanceof

String

Boolean

Object (Function, Array, Date, RegExp)

Null

Undeﬁned


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. JS
palindr :: [Int] -> Bool
palindr [] = True
palindr [x] = True
palindr 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
class Dog {
public string name = “”;
public int yearsOld = 0;
polymorphism void bark(int times);
void bark(float volume);
encapsulation void sleep();
}
inheritance
class Pudel : Dog {
public int cuteness = 5;
abstractization }

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


Objects in JavaScript
MyNamespace.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 JavaScript
this.name = “”;
this.yearsOld = 0;
}; no private members?

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

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


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

return bar();
var res1 = foo(5, 2);
}
var res2 = foo2(5, 2);
function foo2(a, b){
var res3 = res2(3);
function bar(c) {
return a + b + c;
}

return bar;
}


Private members
var name = “”;
var yearsOld = 0;

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



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

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

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

console.log(pinky.nrYearsOld);

Why is JavaScript
slow?

Bad compilation?


Why is JavaScript
slow?

No compilation!*


Why is JavaScript
slow?

No compilation!*

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


Scope chains
function 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
var elem = document.getElementById(“someId”);

elem.onclick = function(){
};
}


Circular references
function dontLeakMemory(){

};

elem = null;
}


Circular references

};

return elem;
}


Circular references
function dontLeakMemory(){

};

try {
return elem;
}
finally {
elem = null;
}
}


Scope binding
function scopeBinding(){
this.elem = {}

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

addMemberToElem();
}


Scope binding
this.elem = {};

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

addMemberToElem.call(this);
}


Scope binding
this.elem = {}

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

addMemberToElem.call(this, 5);
}


Scope binding
this.elem = {}

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

addMemberToElem(5);
}


“But why should I do OOP
with JavaScript?”


Javascript, Do you speak it!

Javascript, Do you speak it!

More Related Content

What's hot

Viewers also liked

Similar to Javascript, Do you speak it!

More from Victor Porof

Recently uploaded

Javascript, Do you speak it!