JavaScript
From birth to closure

Yeah, nothing

Brendan Eich

Brendan Eich

What is JavaScript?

• Developed by Brendan Eich 1995
• Initially called Mocha, then LiveScript
• First day of light in a beta of Netscape 2
in December 1995
• IE followed suit with JScript in 1996

“You’re number one!”

Has NOTHING to do
with Java!

• JavaScript is one of the world’s most
popular programming languages
• One interpreter on every machine
• ECMAScript standardizing - Fifth edition
• Web browsers becoming much faster

SunSpider test

Douglas Crockford

Douglas Crockford

• JSON
• JSLint
• JSMin

JavaScript basics

Variable declaration:
var benAffleck = ”Actor”;

Function declaration:
function benQuote () {
! return "Rumors about me?
Calista Flockhart, Pam
Anderson, and Matt Damon.
That's who I'm dating.";
}

Conditionals

• If
• Switch
• Shorthand assignment
• Ternary operators

function makeMovie (withLivTyler) {
! var nice = withLivTyler || false;
}

(datedJLo)? "Lucky guy!" : "No?";

Comparison operators

• =
Assignment
• ==
Equality
• === Identity

// Assignment
var bestFriend = "Matt Damon";
// Equality
if (5 == "5") {
! // true
}
// Identity
if (5 === "5") {
! // false
}

// Short-circuit logic
if (true || false)
if (false && true)
// Makes this code safe
if (obj && obj.property)

// Short-circuit logic
if (true || false)
if (false && true)
// Makes this code safe
if (obj && obj.property)

Type coercion

// true
5 == "5"
// 123
"1" + 2 + 3;

// 6, manual type conversion
parseInt("1", 10) + 2 + 3;

null == undefined == 0 ==
false == ""
• Not really, but sort of
• Rather “truthy” or “falsy”

var a = null;
var b; // undefined
var c = 0;
var d = false;
var e = "";
if (a) // false
if (b) // false
if (c) // false
if (d) // false
if (e) // false

JavaScript data types

• string
• number
• boolean
• null
• undefined
• Object

Types of Object include:
• function
• Array
• Date
• RegExp

Checking type

typeof return values:
• string
• number
• boolean
• function
• object
• undefined

typeof fanClub // "undefined"
var title = "Armageddon";
typeof title // Equals "string"
var age = 37;
typeof age // Equals "number"

function anotherQuote () {
! return "If I ever woke up
with a dead hooker in my
hotel room, Matt would be
the first person I'd call.";
}
typeof anotherQuote; //"function"

var obj = {};
typeof obj = // "object"
var arr = ["B", "E", "N"];
typeof arr // "object"

var obj = {};
typeof obj = // "object"
var arr = ["B", "E", "N"];
typeof arr // "object" ?!

Using instanceof

obj instanceof Array // false
arr instanceof Array // true

Functions

Procedural
function notAHit () {
! return "Gigli";
}

Functions as variables
var wroteScript = function () {
! return "Good Will Hunting";
};
wroteScript();

Anonymous
document.onmousemove = function (evt) {
alert(evt.pageX);
};

Self-invoking
(function () {
! var dogma = "Shot in 1999";
})();

Self-invoking
(function () {
! var dogma = "Shot in 1999";
})();

Function arguments

• Any argument can be omitted
• Any argument can be added
• No overloading
• The arguments collection

function concat (a, b, c) {
! return a + b + c;
}
concat(1, 2, 3); // 6
concat(1, 2); // NaN

• The arguments collection
• Property: arguments.length
• NOT an array

function concat () {
! var sum = 0,
l = arguments.length;
! for (var i=0; i<l; i++) {
! ! sum += arguments[i];
! }
! return sum;
}
concat(1, 2, 3); // 6
concat(1, 2); // 3
concat(1, 2, 7, 11, 5); // 26

Objects

function Ben () {
! this.name = "Ben Affleck";
! this.gotAnOscar = true;
};
var ben = new Ben();
alert(ben.gotAnOscar); // true
Object constructor

var ben = {
! name : "Ben Affleck",
! gotAnOscar : true
};
alert(ben.name); // "Ben Affleck"
Object literal

Different syntax, same thing:
ben["arms"] = 2;
ben.arms = 2;

Different syntax, same thing:
ben["arms"] = 2;
ben.arms = 2;

For any object:
var ben = {};
ben[1972] = "Year of birth";
ben["born"] = 1972;
ben[true] = false;

var regEx = new RegExp;
regEx[3] = "I can do this?";

var goodMovie = {
! title : "Good Will Hunting",
! year : 1997
};
for (var item in goodMovie) {
! alert(item + ": " + goodMovie[item]);
}

var goodMovie = {
! title : "Good Will Hunting",
! year : 1997
};
// Check returns true
if ("year" in goodMovie) {
! alert(goodMovie.year);
}

Inheritance

• Prototype-based inheritance
• Not class-based

• The prototype chain checks itself first
• It then goes to the parent, parent’s parent
etc...

function Being () {
! this.living = true;
}
Being.prototype.greet = function () {
! return "Hello!";
};

function Ben () {
! this.talks = true;
}
Ben.prototype = new Being;
Ben.prototype.saySomething = function () {
! return "I feel like fame is wasted on me.";
};

// Create an instance
var ben = new Ben();
// Returns "I feel like fame is wasted on me."
ben.saySomething();
// Returns "Hello!", inherited
// from the Being object
ben.greet();

Checking for the greet() method in this order:
• ben instance
• Ben prototype
• Being prototype
• Object prototype

• Simple JavaScript Inheritance
• A Base Class for JavaScript Inheritance
• Defining classes and inheritance
Class-based mimicking

• It’s native, i.e. no dependencies
• Freedom of style and version
• Easy readability
• Code handover
Why prototype syntax

“I have been writing JavaScript for 8 years
now, and I have never once found need to
use an uber function...
...I now see my early attempts to support the
classical model in JavaScript as a mistake.”
- Douglas Crockford
Why prototype syntax

Scope

• Scope refers to where variables and
functions are accessible
• In what context something is being
executed

• Basically, global or local
• Variables have function scope
• Functions have the same scope as variables

// Global
var likesToPlay = "Poker";
function getGame () {
! // Local
! var likesToPlay = "Hold ‘em";
! // Global
! playOnline = true;
! return likesToPlay;
! // Returns "Hold ‘em"
}

function playPoker (money) {
! if (money) {
! ! var willPlay = true;
! }
! // Perfectly valid
! return willPlay;
}

function global () {
! return "Access anywhere";
}

function outer () {
! function inner () {
! ! return "Inner";
! }
! return inner();
}
outer(); // Accessible
inner(); // Not accessible

“Global scope is like a public toilet.
You can’t avoid going in there. But
try to limit your contact with
surfaces when you do.”
- Dmitry Baranovskiy, Raphaël JS
library
Polluting the global
namespace

Function scope

• Run a function in a certain context
• The call and apply methods
• Defined for all functions

function docReady () {
! alert(this);
! // this is the window object
}
window.onload = docReady;

function setName (name) {
! this.name = name;
! // document.name === "Bennifer"
}
document.onclick = function () {
! setName.call(document, "Bennifer");
};

function setName (name) {
! this.name = name;
! // document.name === "Bennifer"
}
document.onclick = function () {
! setName.call(document, "Bennifer");
};

function setNames () {
! this.firstName = arguments[0];
! this.lastName = arguments[1];
// document.firstName === “Ben”
// document.lastName === “Affleck”
}
function callSetNames () {
! setNames.apply(document, arguments);
};
callSetNames("Ben", "Affleck");

function setNames () {
! this.firstName = arguments[0];
! this.lastName = arguments[1];
// document.firstName === “Ben”
// document.lastName === “Affleck”
}
function callSetNames () {
! setNames.apply(document, arguments);
};
callSetNames("Ben", "Affleck");

Closures

• Closures are expressions, usually functions,
which can work with variables set within a
certain context
• Inner functions referring to local variables
of its outer function create closures

function add (x) {
! return function (y) {
! ! return x + y;
! };
}
var add5 = add(5);
var no7 = add5(2); // Equals 7

“Right...What?!”

function add (x) {
! return function (y) {
! ! return x + y;
! };
}
var add5 = add(5);
// How JavaScript sees it
var add5 = function (y) {
! return 5 + y;
}

function add (x) {
! return function (y) {
! ! return x + y;
! };
}
var add5 = add(5);
// How JavaScript sees it
var add5 = function (y) {
! return 5 + y;
}

function addLinks () {
! for (var i=0, link; i<5; i++) {
! ! link = document.createElement("a");
! ! link.innerHTML = "Link " + i;
! ! link.onclick = function () {
! ! ! alert(i);
! ! };
! ! document.body.appendChild(link);
! }
}
window.onload = addLinks;

function addLinks () {
! for (var i=0, link; i<5; i++) {
! ! link = document.createElement("a");
! ! link.innerHTML = "Link " + i;
! ! link.onclick = function () {
! ! ! alert(i);
! ! };
! ! document.body.appendChild(link);
! }
}
window.onload = addLinks;
! ! link.onclick = function () {
! ! ! alert(i);
! ! };

function addLinks () {
! for (var i=0, link; i<5; i++) {
! ! link = document.createElement("a");
! ! link.innerHTML = "Link " + i;
! ! link.onclick = function (num) {
! ! ! return function () {
! ! ! ! alert(num);
! ! ! };
! ! }(i);
! ! document.body.appendChild(link);
! }
}
window.onload = addLinks;

function addLinks () {
! for (var i=0, link; i<5; i++) {
! ! link = document.createElement("a");
! ! link.innerHTML = "Link " + i;
! ! link.onclick = function (num) {
! ! ! return function () {
! ! ! ! alert(num);
! ! ! };
! ! }(i);
! ! document.body.appendChild(link);
! }
}
window.onload = addLinks;
! ! link.onclick = function (num) {
! ! ! return function () {
! ! ! ! alert(num);
! ! ! };
! ! }(i);

function addLinks () {
! for (var i=0, link; i<5; i++) {
! ! link = document.createElement("a");
! ! link.innerHTML = "Link " + i;
! ! link.onclick = function (num) {
! ! ! return function () {
! ! ! ! alert(num);
! ! ! };
! ! }(i);
! ! document.body.appendChild(link);
! }
}
window.onload = addLinks;
! ! link.onclick = function (num) {
! ! ! return function () {
! ! ! ! alert(num);
! ! ! };
! ! }(i);

function addLinks () {
! for (var i=0, link; i<5; i++) {
! ! link = document.createElement("a");
! ! link.innerHTML = "Link " + i;
! ! link.onclick = function (num) {
! ! ! return function () {
! ! ! ! alert(num);
! ! ! };
! ! }(i);
! ! document.body.appendChild(link);
! }
}
window.onload = addLinks;
! ! link.onclick = function (num) {
! ! ! return function () {
! ! ! ! alert(num);
! ! ! };
! ! }(i);

function addLinks () {
! for (var i=0, link; i<5; i++) {
! ! link = document.createElement("a");
! ! link.innerHTML = "Link " + i;
! ! link.onclick = function (num) {
! ! ! return function () {
! ! ! ! alert(num);
! ! ! };
! ! }(i);
! ! document.body.appendChild(link);
! }
}
window.onload = addLinks;
! ! link.onclick = function (num) {
! ! ! return function () {
! ! ! ! alert(num);
! ! ! };
! ! }(i);

Yahoo JavaScript
Module Pattern

• Origins from Douglas Crockford
• Singleton pattern
• Offers private and public members

var goneBabyGone = function () {
! // Private members
! var movieTitle = "Gone Baby Gone",
isDirectedByBen = true;
!
! // Public members
! return {
! ! title : function () {
! ! ! return movieTitle;
! ! },
! !
! ! directedByBen : function () {
! ! ! return isDirectedByBen;
! ! }
! };
}();

var goneBabyGone = function () {
! // Private members
! var movieTitle = "Gone Baby Gone",
isDirectedByBen = true;
!
! // Public members
! return {
! ! title : function () {
! ! ! return movieTitle;
! ! },
! !
! ! directedByBen : function () {
! ! ! return isDirectedByBen;
! ! }
! };
}();

var goneBabyGone = function () {
! // Private members
! var movieTitle = "Gone Baby Gone",
isDirectedByBen = true;
!
! // Public members
! return {
! ! title : function () {
! ! ! return movieTitle;
! ! },
! !
! ! directedByBen : function () {
! ! ! return isDirectedByBen;
! ! }
! };
}();

var goneBabyGone = function () {
! // Private members
! var movieTitle = "Gone Baby Gone",
isDirectedByBen = true,
! ! title = function () {
! ! ! return movieTitle;
! ! },
! !
! ! directedByBen = function () {
! ! ! return isDirectedByBen;
! ! };
!
! // Public members
! return {
title : title,
directedByBen : directedByBen
! };
}();

Namespacing

• Avoiding global variables
• Code structure
• Extending, but not necessarily inheriting

// Create a Ben object
var Ben = {};
// Set functionality
Ben.Director = function () {
! var noOfMovies = 4;
! return {
! ! movies : function () {
! ! ! return noOfMovies;
! ! }
! };
}();

// Assertion
if (typeof Ben === "undefined") {
! Ben = {};
}
Ben.Actor = function () {
! var noOfMovies = 51;
! return {
! ! actAndDirectorCount : function () {
! ! ! return noOfMovies + " as actor & "
+ Ben.Director.movies.call(this)
+ " as Director";
! ! }
! };
}();

Sugar & spice
It’s awfully nice!

• Sugaring
• Currying

// A little sugar
String.prototype.trim = function () {
! return this.replace(/^s*|s*$/g, "");
};
var monkey = " Monkey ";
monkey.trim(); //"Monkey"

// Currying
function add () {
! var sum = 0;
! for (var i=0, il=arguments.length; i<il; i++) {
! ! sum += arguments[i];
! };
! return sum;
}

// Currying (continued) - Currying method by Crockford!
!
Function.prototype.curry = function () {
! var slice = Array.prototype.slice,
! ! args = slice.apply(arguments),
! ! that = this;
! return function () {
! ! ! return that.apply(
! ! ! ! null, args.concat(slice.apply(arguments))
! ! ! );
! };
}
var add8 = add.curry(5, 3);
alert(add8(1, 3, 7)); // 19

// Currying (continued) - Currying method by Crockford!
!
Function.prototype.curry = function () {
! var slice = Array.prototype.slice,
! ! args = slice.apply(arguments),
! ! that = this;
! return function () {
! ! ! return that.apply(
! ! ! ! null, args.concat(slice.apply(arguments))
! ! ! );
! };
}
var add8 = add.curry(5, 3);
alert(add8(1, 3, 7)); // 19

// Currying (continued) - Currying method by Crockford!
!
Function.prototype.curry = function () {
! var slice = Array.prototype.slice,
! ! args = slice.apply(arguments),
! ! that = this;
! return function () {
! ! ! return that.apply(
! ! ! ! null, args.concat(slice.apply(arguments))
! ! ! );
! };
}
var add8 = add.curry(5, 3);
alert(add8(1, 3, 7)); // 19

// Currying (continued) - Currying method by Crockford!
!
Function.prototype.curry = function () {
! var slice = Array.prototype.slice,
! ! args = slice.apply(arguments),
! ! that = this;
! return function () {
! ! ! return that.apply(
! ! ! ! null, args.concat(slice.apply(arguments))
! ! ! );
! };
}
var add8 = add.curry(5, 3);
alert(add8(1, 3, 7)); // 19

// Currying (continued) - Currying method by Crockford!
!
Function.prototype.curry = function () {
! var slice = Array.prototype.slice,
! ! args = slice.apply(arguments),
! ! that = this;
! return function () {
! ! ! return that.apply(
! ! ! ! null, args.concat(slice.apply(arguments))
! ! ! );
! };
}
var add8 = add.curry(5, 3);
alert(add8(1, 3, 7)); // 19

// Currying (continued) - Currying method by Crockford!
!
Function.prototype.curry = function () {
! var slice = Array.prototype.slice,
! ! args = slice.apply(arguments),
! ! that = this;
! return function () {
! ! ! return that.apply(
! ! ! ! null, args.concat(slice.apply(arguments))
! ! ! );
! };
}
var add8 = add.curry(5, 3);
alert(add8(1, 3, 7)); // 19

Syntax
recommendations

• No real standard, only best practices
• Recommended tool: JSLint

Embrace JavaScript

• Embrace JavaScript
• Don’t try to make it into Java, C or any
other language
• Learn to love it and its dynamic, loose and
prototypical nature

This is how we roll

Robert Nyman
robertnyman.com/speaking/
robert@robertnyman.com
Twitter: @robertnyman
Pictures:
Brendan - http://www.flickr.com/photos/mollyeh11/279367481/
Yoda - http://buzzybeegirl.files.wordpress.com/2008/12/yoda-400x3001.jpg
Twitter - http://twitter.com/manssandstrom/status/1528315581
Gmail - http://www.flickr.com/photos/webber/71748774/
Slow - http://www.feministing.com/archives/012345.html
Crockford - http://www.flickr.com/photos/charliebrewer/2897862701/
Obi-Wan - http://enterthecircle.files.wordpress.com/2009/01/obi-wan-kenobi-01-large.jpg
Ben Affleck - http://www.flickr.com/photos/sasy/3993866442/
Squat toilet - http://www.flickr.com/photos/35034350906@N01/4080372999
Cuddling bears - http://www.nogg.se/blogg.asp?intShowMenu=a2&idHomepage=6951&idBloggCategory=6162
Winnie The Pooh and friends - http://mammacarola.blogg.se/2009/april/
IEVoodoo Doll - http://nexus404.com/Blog/2007/10/26/make-your-own-internet-explorer-voodoo-doll-a-step-by-step-guide/
Ben Affleck confused - http://cdn.buzznet.com/assets/imgx/4/9/0/5/8/orig-49058.jpg