The JavaScript Programming Primer

The JavaScript
Programming Primer
Scope Context Closures

Presentation by
Mike Wilcox
February 3rd, 2009

Overview
★ JavaScript Language Overview
★ Object

★ Array

★ Function

★ Scope
★ Context
★ Closures

Is JavaScript Easy?
★ Scripting languages often considered
simple
★ Loose Typing makes it versatile and
extremely ﬂexible
★ Functional style allows quick tasks:

myDiv.hide();
image.swap();
myForm.validate(); // with script I found on the Internet

It is not a Toy!
★ Interpreted language not compiled
★ Loosely Typed
★ OO capabilities
★ Resembles C, C++ and Java in some syntax only
★ Uses prototype for inheritance like Self

Mutable
All JavaScript objects,
including the native objects,
can be added to or extended

String.prototype.reverse = function(){
return this.split("").reverse().join("");
}
var a = "Club Ajax";
console.log(a.reverse()); // xajA bulC

Mutable
So exactly how “mutable” is
JavaScript anyway?

Array = function(){
alert("JavaScript no longer has Arrays.");
}
var a = new Array("club", "ajax");

Object Deﬁned
A JavaScript object is a composite datatype containing an
unordered collection of variables and methods.
★ All objects are a hash map and everything is an object
★ All JavaScript objects are mutable - even the built in
methods and properties can be changed.
★ An object variable is a property - like a ﬁeld in Java
★ Can contain any type of data - even functions

Object Deﬁnitions
Creating an object by Deﬁnition, using the object’s
constructor function

obj = new Object();
obj.prop = "Club AJAX"
obj.subObj = new Object();
obj.subObj.location = “Dallas”;
obj.subObj.when = new Date("2/3/2009");

Object Literals
Creating an object with the Literal syntax - also known
as an initializer

name = {prefix:"Club", suffix:"AJAX"};

obj = {

fullname: name.prefix + name.suffix,

deep:{

fullname: name.prefix + “ “ + name.suffix

}

};

Object - Value Access
// dot syntax
image.width;
image.height;
obj.myDomElement;
obj.myFunction;
obj.myArray;
// associative array
obj["myDomElement"];
obj["myFunction"];
obj["myArray"];

var i = “myArray”;
obj["myArray"] = obj["my” + ”Array"] = obj[i] = obj.myArray;

Array in Brief
★ An untyped, ordered object
★ Has a length property
★ Additional methods: push(), pop(), etc.
// Definition

var a = new Array(10); // sets length
var b = new Array(“club”, “ajax”); // sets array
// Literal

var c = ["club", "ajax"];

c[2] = "rocks";
// Bad form!

myArray["prop"] = "associative"; // works but unexpected

Functions
Unlike Java, Functions are literal data values that can be
manipulated. They can be assigned to variables, properties
of objects, the elements of an array, or passed as
arguments.*
★ Concept borrowed from Lisp Lambda functions
★ Functions are first class objects
★ Functions are objects with executable code
★ Can be used as constructors for object instances**
★ Used as a literal or a definition
* JavaScript - The Definitive Guide
** Function constructors will be covered in the presentation about Inheritance.

Function Deﬁnition
Function Deﬁnition created by the function
keyword:

function ninja(){

return "ninja";
}

Function Literal
★ An expression that defines an unnamed function
★ Also called Function Statement or an Anonymous
Function or a Function Expression
★ Much more flexible than Definitions, as they can used
once and need not be named*
// Unnamed Function assigned to "foo":
f[0] = function(x){ return x * x;}
myArray.sort(function(a,b){ return a<b; });
var squared = (function(n){ return n*n })(num);

*JavaScript the Definitive Guide

Function Literal Usage
// Stored as a variable:
ar[1] = function(x){ return x * x; }
ar[1](2); // 4

// Passed as an argument:
var add = function( a, b ){
return a() + b();
}
add(function(){ return 1; }, function(){ return 2; }); // 3

// Invoked Directly:
var foo = (function(){ return "bar"; })();
// foo = "bar", the result of the invoked function,
// not the function itself

Assigning a Literal to Deﬁnition
Allows the body of the function to refer to the Literal

var f = function factor(x, num){

if(x==0){

return num;

}else{

return factor(x-1, num+=x)

}
}
console.log(f(3, 0)); // 6
console.log(factor(3, 0)); // ERROR factor is undefined

Function as a Method
A function can be added to any object at any time

var dimensions = {width: 10, height: 5};

dimensions.getArea = function() {
return this.width * this.height;
}

Scope
★ Scope is an enclosing context where values and
expressions are associated and is used to deﬁne the
visibility and reach of information hiding*
★ JavaScript uses a lexical (or static) scope scheme,
meaning that the scope is created and variables are
bound when the code is deﬁned, not when executed

http://en.wikipedia.org/wiki/Scope_(programming)

Scope - Simple Example
★ Functions can see the scope outside them, but not
inside of them
var assassin = "Ninja";
function getWarrior(){

alert(assassin); // SUCCESS!
}

function setWarrior(){
var warrior = "Ninja";
}
alert(warrior); // FAILS!

Scope Diagram
The scope chain
resembles a hierarchal
tree, much like that of
classical inheritance scope

scope scope

scope scope scope scope

scope scope scope scope scope


Scope Diagram
Like classical
inheritance, the
children can see their
ancestors, but parents scope
cannot see their
descendants scope
scope




Scope Diagram

scope

scope scope




Scope - Objects
★ Objects don’t create a scope (they create context), but
they are able to access scope:

var first = “kick”;
var myObject = {
type:first, // scope captured here
attack: function(){
return this.type;
}
}
alert(myObject.attack());

Scope - No Blocks
No block-level scope, unlike C, C++, and Java

function scoping(){

var a = 1;

for(var i=0, len=20; i < len; i++){

if(i==10){

var b = i;

break;

}

}

while(b<20){

b++;

}

console.log(a + i + len + b);
// 51 - no errors, all defined
}

Scope - Activation
Variables declared within a function are deﬁned
throughout the function

var hero = "Spider-man"
function scoping(){

alert(hero); // - output ?

var hero = "Dr. Octopus";

alert(hero); // - output ?
}

Hey what is var anyway?
The var statement deﬁnes a variable by creating a
property with that name in the body of an enclosing
function. If the declaration is not within a function
body, it is declared in the global scope.*

var i;
var x = 10;
var w = 20, y = 30, h = 100;
var f = function(arg){
var a = 1;
var arg = arg + 1; // - result ?
}

*JavaScript the Deﬁnitive guide

Scope Global
★ In a browser, the window is global
★ Global scope is special because it is the end of the
scope chain, and since it is an object, it has context
★ The following all mean the same thing, in the global
scope only:
<script>

window.weapon = "katana";

weapon = "katana";

var weapon = "katana";

this.weapon = "katana";
</script>

Scope Accidental Globals
Regardless of the depth of the scope, not using var
always assigns the variable as a global

transportation = “horse”;
alert("Ninja rides a:", transportation); // - output ?
function ride(){

transportation = "Kawasaki";

alert("Ninja rides a:", transportation); // - ?
}
alert("Ninja rides a:", transportation); // - output ?

Context
★ Context is a method’s reference to an object
★ A function and a method are different!
★ A method has context to the object to which it
belongs (a function does not)
★ Whereas scope is lexical and can be determined by
the program code, context is executional, and is
determined at runtime
★ Tip: scope belongs to functions, and context belongs
to objects

Context - this
★ A method has a very important keyword: this
★ A method’s value of this becomes the object that
invoked it
★ Context can be thought of as this*
★ this cannot be explicitly set, but it can be changed
★ Change this with either call() or apply()
★ JavaScript libraries usually have convenience
functions to change this

*Execution context actually has a broader meaning that includes scope, which is
an advanced topic.

Context vs Scope
★ Context refers to an object and its properties and
methods
★ Scope refers to local functions and variables,
irrespective of the object or its context
var myObject = {
init: function(){
this.myProperty = “prop”;
this.myMethod = function(){ ... }

var myVariable = “value”;
var myFunction = function(){ ... }
}
}

Context - Example
var attire = {

ring:"shobo",
init = function(){

return this.ring;
}
}
attire.init(); // context of attire applied to init()

"this" is confusing!
If context is not set, regardless of scope, this will
default to the global object

function testNoContext(){

var location = "here";

// local variable, not a context property

alert(this.location);
// returns the window.location object
}

function testNoContext(){
locashion = "TYPO";
alert(location);
// returns the window.location object
}

Context - Maintaining
When one object calls another, it can sometimes be
confusing to know in which context you are
var a = {

objectId: "A",

doCall: function(){

return this.objectId;

}
};
var b = {

objectId: "B",

callOther: function(){

return a.doCall();

}
};
alert(b.callOther()); // - result ?

Context - Maintaining
Using call() gets a different result

var a = {

objectId: "A",

doCall: function(){

return this.objectId;

}
};
var b = {

objectId: "B",

callOther: function(){

return a.doCall.call(a);

}
};
alert(b.callOther()); // - result ?

Context - Changing
Context often "ﬁxed" in "functions" with this pattern:

var self = this;
var myFunc = function(){

self.doMethod();
}
myFunc();

dojo.hitch
dojo.hitch changes context for you, using apply() in the
background

myFunc = function(){

this.doMethod();
}
dojo.hitch(this, myFunc)();
// or:
myFunc = dojo.hitch(this, function(){
this.doMethod();
});

Context - setTimeout
setTimeout is often awkward due to context. dojo.hitch
ﬁxes this:

setTimeout(dojo.hitch(this, function(){

this.battle = this.doEvil + this.doGood;

this.getConflicted();
}), 500);

Context - Anonymous Functions
desc
var o = {

objectId: "A",

docall:function(){

alert(this.objectId);

},

init: function(){

var callCall = dojo.hitch(this, function(){

this.docall();

});

var cc = function(){

this.docall();

}

callCall(); // - result ?

dojo.hitch(this, cc)(); // - result ?

cc.call(this); // - result ?

}
}

Closures
★ By deﬁnition, closures operate in the execution
context and are a combination of scope and code
★ The result of invoking a function that captures a
variable outside of its scope
★ Closures are not bad - they are quite powerful
★ However:
★ They can consume more memory

★ Creating a circular reference with a DOM node in IE is what
causes memory leaks

Closures - Simple Example
saveForLater = function(){
var weapon = “throwing stars”;
return function(){
return weapon; // captures ‘a’
}
}
var device = saveForLater(); // - result ?

setTimeout(function(){
alert(device()); // - result ?
}, 1000);

var doItNow = saveForLater()(); // - result ?

Closures - Private Variables
var count = new (function(){
var num = 0;
return function() { return num++ }
})();

alert(count());
alert(count());
alert(count());

Memory Leak Example
The onclick function creates a scope and captures the
node variable. The GC can’t remove node because it is
used by onclick, and it can’t remove the DOM
element because the node variable refers to it.
function attach(){

var node = document.createElement("div");

node.onclick = function(){

alert("clicked" + node);

}
}

Memory Leak Fixed
The following shows how to do your own GC chores.
Note that most JavaScript libraries will handle this for
you in the background.

function attach(){


node.onclick = function(){

alert("clicked" + node);

}
window.onunload = function(){
node.onclick = null;
window.onunload = null;
}
}

dojo.connect
dojo.connect is speciﬁcally designed for preventing
for preventing memory leaks

var doClick = function(event){
if(event.type==”onclick”){
alert(“clicked”);
}
}
var ref = dojo.connect(node, “click”, window, doClick);

// when window unloads, dojo will disconnect:
dojo.disconnect(ref);

References
JavaScript Closures - Jim Ley
http://www.jibbering.com/faq/faq_notes/closures.html#clIRExSc

Lexical Scoping
http://blogs.msdn.com/kartikb/archive/2009/01/15/lexical-scoping.aspx

Closures and IE Circular References - Scott Isaacs
http://siteexperts.spaces.live.com/Blog/cns!1pNcL8JwTfkkjv4gg6LkVCpw!338.entry

kartikbansal
http://blogs.msdn.com/kartikb/archive/2009/01/15/lexical-scoping.aspx

WikiPedia
http://en.wikipedia.org/wiki/Scope_(programming)

Mozilla JavaScript Spec
http://www.mozilla.org/js/language/E262-3.pdfs

JavaScript - The Deﬁnitive Guide by David Flanagan

The JavaScript Programming Primer

The JavaScript Programming Primer

Recommended

More Related Content

What's hot (20)

Viewers also liked (20)

Similar to The JavaScript Programming Primer (20)

More from Mike Wilcox (20)

Recently uploaded (20)

The JavaScript Programming Primer