Javascript tid-bits

Insights into Javascript
Some things you should probably know

Play along...
ﬁrebug console is your friend

We’ll use console.log(...) a lot

boolean
number
string
undeﬁned

var b = true;
var s = “hello”;
var n = 45;
typeof h == ‘undeﬁned‘ // true
s.length // 5

Everything else is an
Object

All objects have properties.
you can make them anytime.
// Custom Objects
var obj = new Object();
obj[‘name’] = ‘Kurt’;
obj[true] = 45;
obj[1138] = ‘trooper’;

// Builtin Objects
var d = new Date();
var a = new Array(1,2,3);
var rx = new RegExp(/^perl$/);

This works with any object.
Including built-ins.

var now = new Date();
now[5] = ‘hello’;
console.log(now[5]); // ‘hello’

Accessing objects has 2 ﬂavors.
Nearly everything in javascript is mutable!

obj[‘thing’] = ‘a’
// is the same as ...
obj.thing = ‘a’

console.log(obj[‘thing’]); // ‘a’
console.log(obj.thing); // ‘a’

3 Kinds of Scope

★ Global (in a browser it’s ‘window’)
★ Local (or Function)
★ Eval (same as local)

Scoping examples...
var a = 4; // global scope
function fn(a) { // local scope
return (a + 2);
}
console.log(fn(a)); // = 6
console.log(a); // = 4
console.log(window.a); // = 4

var p = ‘a’;
function preﬁx(s) {
// p has local scope in eval
var p = ‘pre_’;
eval(“var ps = p + s;”); // bad, usually no need
return ps;
}
console.log(p); // ‘a’

Managing scope using
Namespaces.
function foo() { /*...*/ }

// Namespace, don’t step on global ‘foo()’
var Util = {};
Util.foo = function() {
// do stuff
}

Util.sub = {}; // nested namespaces
Util.sub.bar = 1138;

What’s (in) that object?
// deﬁne an object...
var n = {
fn: function() { },
a: 5
};
console.log(typeof n); // ‘object’
console.log((n instanceof Object));
// true

for (prop in n) {
if (n.hasOwnProperty(prop)) {
console.log('[' + (typeof n[prop])
+ '] ' + prop);
}
}

Functions() {
that’s all you need, really. }

What can’t you do with functions?
// functions with arguments
function add(a,b) {
return a + b;
}
sum = add(2,2); // sum = 4

// Same as this (ref to anonymous function)
var add = function(a,b) {
return a + b;
}
sum = add(2,2); // sum = 4

// Call it now! (immediate anonymous functions)!
var sum = (function(a,b){ return a+b; })(2,2);
// sum = 4

Function Idioms in Javascript
This is SO common, you really need to understand it.

// functions returning functions!?,... wtf?!
var inc = (function() {
var i = 0;
return function() {
return i++;
}
})();
// anonymous function creates closed scope
console.log(inc()); // <= 0
console.log(inc()); // <= 1

This is called a closure, more later...

More Function Idioms
// Variable arguments and ‘arguments’
function show() {
for (var i=0; i < arguments.length; i++) {
console.log(arguments[i]);
}
}
// prints each argument
show(1,'cat',function(){}); // 1,‘cat’, function()

// functions are still objects
console.log('show.name = ' + show.name);
console.log('show.length = ' + show.length);
// Can’t reassign to name or length
show.prototype.name = 'cow';
console.log('show.name = ' + show.name);

Gaining closure on closures...
★ closures are the locally scoped variables in a
function, kept around after the returned function
goes out of scope
★ The returned function references the locally
scoped variables, so the garbage collector retains
the references to them.
★ the closure variables are only accessible to the
returned function (private parts)
★ We’ll revisit this later talking about objects and
inheritance.

3 Object Creation Patterns
All of these create new object instances

// Using the builtin Object
var obj = new Object();
// Object.create not always supported
var obj = Object.create(obj);

// via a Constructor
function Obj() {};
var obj = new Obj();

// Literal objects
var obj = { /* .... */ }

Constructors and new.
Javascript is a classless language, but we can fake it.
// Constructor function (a class)
function Person(nm) {
this.name = nm || ‘’;
}

// new instance of Person
var me = new Person(‘Dave’);
new Person(‘Aish’); // this == window

console.log(window.name); // ‘Aish’

console.log(me.name); // ‘Dave’
console.log(me.constructor); // Person

Objects can’t do much without
methods.
function Person(s) {
this.name = s || ‘’;
}
Person.prototype.hello = function() {
return ‘Hi, my name is ‘ + this.name;
}


console.log(me.hello());
// = ‘Hi, my name is Dave’

Wait, what was that ‘prototype’
thingy?
★ All objects have a prototype (except object
literals)
★ the prototype contains an object that the
container object is based on (similar to
inheritance)
★ Containing object has all the methods &
properties of prototype through prototype chain;
and that prototype’s prototype, ad inﬁnitum...
★ All newly created objects, by default, have the
builtin Object as their prototype.

The prototype chain
★ Functions are objects, and all functions have a
prototype property (even some native types).
★ The prototype property refers to the object that
will be assigned as the prototype to all instances
created when this function is used as a
constructor.
★ Accessing a member/method follows the chain:
★ your object instance (this)

★ your object’s prototype object

★ your object’s prototype’s prototype

★ and so on ...

Modifying prototype later...
function Person(s) {
this.name = s || ‘’;
}
return ‘Hi, my name is ‘ + this.name;
}

me.hello(); // = ‘Hi, my name is Dave’

return ‘Hola, me llamo es ‘ + this.name;
}
var you = new Person(‘Kurt’);
you.hello(); // = ‘Hola, me llamo es Kurt’
me.hello(); // = ‘Hola, me llamo es Dave’

// Create a global object constructor
function User(name, age) {
this.name = name; // public
this.age = age;
var id = null; // private

// Private method
function genId() {
return (User.idSeed++)+1000;
}
id = genId();
// Privileged method
this.getId = function() { return id; }
}
User.idSeed = 1; // static member

// Public methods (added to prototype)
User.prototype = {
getName: function() { return this.name; },
setName: function(nm) { this.name = nm; }
}

var emp = new User("Dave", 35); // 2 new instances
var emp2 = new User("Francis", 40);
console.log(emp.getId()); // 1001
console.log(emp2.getId()); // 1002

Additional Notes on Previous Code

★ private variables can only be accessed by the
constructor or privileged methods (due to
closure)
★ public methods should always be deﬁned in the
object’s prototype: it’s faster and saves memory
★ this always refers to the invoking object (which can
be hacked using .call() or .apply(), e.g.
★ User.getName.call(window, ‘Bob’), or
★ User.getName.apply(window, [ ‘Bob’])

Object Inheritance
No one really likes children.

Prototypal Inheritance
(nearly)
// Parent ‘class’
var Person = function(s) {
this.name = s || 'n/a';
}
// Child ‘class’ (inherits from Person)
var Employee = function(s,t) {
this.title = t || "code monkey";
}
Employee.prototype = new Person();

var e = new Employee('Jim Relling', 'Java Master');

console.log((e instanceof Employee)); // true
console.log((e instanceof Person)); // true

console.log(e.name); // ‘n/a’

Why nearly?

★ (1) When assigning a new Person object as the
prototype for Employee, Employee objects don’t
get their own local copy of the prototype’s
properties. This means:
★ e.name isn’t set, we get the default for the prototype
object’s constructor.

★ our new Employee object doesn’t properly execute any
code that SHOULD have been executed in it’s parent
constructor.

Why nearly?
★ (2) Informationally, Employee’s constructor is
incorrect and will report ‘Person’ instead.

emp.constructor.name; // ‘Person’
emp.constructor === Person; // true

★ this is for the most part just informational; however, some
libraries and browsers might use the constructor
property in edge cases.

★ plus, semantically and logically, the constructor for an
object should be associated with the Function that
constructed it, e.g.

emp.constructor.name == ‘Employee’; // yes!

(issues corrected)
// Parent ‘class’
var Person = function(s) {
this.name = s || 'n/a';
}
// Child ‘class’ (inherits from Person)
var Employee = function(s,t) {
Person.call(this, s); // (1)
this.title = t || "code monkey";
}
Employee.prototype = new Person();
Employee.prototype.constructor = Employee; // (2)

var e = new Employee('Jim Relling', 'Java Master');

console.log((e instanceof Employee)); // true
console.log((e instanceof Person)); // true

wrap it all up
var inherit = (function () {
var F = function () {};
return function (C, P) {
F.prototype = P.prototype;
C.prototype = new F();
C.base = P.prototype;
C.prototype.constructor = C;
}
}());

function Parent() { /*...*/ }
function Child() {
Child.base.constructor.apply(this, arguments);
// ...
}
inherit(Child, Parent);

Questions &
Attempted Answers
?

Javascript tid-bits

More Related Content

What's hot (20)

Similar to Javascript tid-bits (20)

Javascript tid-bits

Editor's Notes