A Quick Intro to
Javascript
Rajat Pandit (rajat_pandit@ipcmedia.com)
Thursday, September 24, 2009 1

Data Types
Object
Function
Numbers
Strings
Booleans
null - a value that isn’t anything
undefined - default value for variables
and parameters, value of missing members
in the object etc
Thursday, September 24, 2009 2

Objects
Objects can contain data and methods
Objects can inherit from other objects
An object contain an unordered
collection of name/value pairs
Values can be any type including other
objects
JSON
Thursday, September 24, 2009 3

Object Literals
Objects are wrapped in { }
Names can be string
Value can be an expression
; used for separation
, separate pairs
Object literals can be used
anywhere a value can appear
Thursday, September 24, 2009 4

Creating a new Object
new Object()
{ } - Preferred format
Both are the same
Objects are passed by reference not by value
=== operator compares references, not values,
true only if the operands are the same object
Members can be removed using the delete
operator
delete myobject[name];
Thursday, September 24, 2009 5

Object Example
var myobject = {
name : “Jack Appleseed”,
“data”: { foo: 10, bar: 20}
};
var data = myobject.data;
var foo = myobject.data.foo;
Thursday, September 24, 2009 6

Object Augmentation
New members can be added to
any object
No need to define a new class
myobject.format.colormodel = ‘foo’;
myobject[another_new_member] = 34;
Thursday, September 24, 2009 7

Object Augmentation
String.prototype.trim = function() {
return this.replace(/^s*(S*(s+S+)*)s*$/,
"$1");
}
More on prototype in the next few
slides
Prototype library does the same
Very messy approach, pollutes the
expected behavior
Thursday, September 24, 2009 8

typeof Prefix Operator
The typeof prefix operator returns a
string identifying the type of value
Use instanceof instead Type typeof
object ‘object’
function ‘function’
array ‘object’
number ‘number’
string ‘string’
boolean ‘boolean’
null ‘object’
undefined ‘undefined’
Thursday, September 24, 2009 9

Array
Array inherits from Object (like every other
object in JavaScript)
No need to provide length when creating a new
one
Unlike object they have a length member and
is always 1 larger than the highest subscript
Do not use for ... in for arrays
Appending new item
mylist[mylist.length] = ‘foo’
Thursday, September 24, 2009 10

Array
var my_array = ['abc', 'xyz', 'foo'];
var my_object = {foo: 10, bar:20, baz:200}
Array.prototype.this_is_super_lame = 'fooo';
for (x in my_array) {
console.log(x + ‘-’ + my_array[x]);
}
Output: Output:
0 - abc 0 - abc
1 - xyz 1 - xyz
2 - foo 2 - foo
this_is_super_lame - fooo
Thursday, September 24, 2009 11

Array Methods
concat
join (can also be used for concatenating multiple strings)
pop
push
slice
sort
splice
Use Objects when you think you need associative array (PHP
Developers) you are should be using Object not Array.
Thursday, September 24, 2009 12

Checking for Array
value.constructor === Array
value instanceof Array
Thursday, September 24, 2009 13

Function
They are first class Objects
Can be passed, stored and
returned just like any value
Inherit from object and store
name/value pairs
Function can appear anywhere
an expression can appear
Thursday, September 24, 2009 14

Function Cont...
Functions can be contained inside other
functions
Inner function has access to the variable
and parameters of the function it is
contained within
This is static or lexical scoping
The scope that inner function has access
to continues even after the parent
function has returned. This is called
Closure
Thursday, September 24, 2009 15

Function Cont...
Function inside an object is
called a method
When invoked with too many
arguments, the rest are ignored
When invoked with fewer arguments,
the rest are set to undefined
No type checking
Thursday, September 24, 2009 16

Function Cont...
When a function is invoked in method
format, this refers to the object
containing it.
var foo = {
baz: 10,
bar: function() {
console.log(this.baz); // cant access baz
// directly
}
};
foo.bar();
Output
10
Thursday, September 24, 2009 17

Function Cont...
When object is invoked in function,
this refers to the global object
var global_variable = 5;
function test() {
console.log(this.global_variable);
}
test();
Output
5
Thursday, September 24, 2009 18

Function Cont...
When new Function is used (implicit return is
optional), then this returns the new object
created
var Test = function(id) {
this.something = id;
this.foo = function() {
console.log('this is a test: ' + this.something);
}
}
var o = new Test(10),
i = new Test(111);
o.foo();
i.foo();
Thursday, September 24, 2009 19

Function (arguments)
When function is invoked, in addition
to its parameters it has a special
parameter called arguments
Contains all arguments from invocation
arguments.length will tell you how
many arguments were passed
arguments is not of type Array even
though it has length
Thursday, September 24, 2009 20

Function (arguments)
Code:
var foo = function() {
var a = new Array();
console.log( typeof a );
console.log( typeof arguments );
console.log( arguments instanceof Object );
console.log( arguments instanceof Array );
}
foo();
Output :
object
object
true
false
Thursday, September 24, 2009 21

(global) Object
As crockford says, the object that
dare not speak of its name
It is the container for all global
variables and all built in objects
On browsers window is the global
object
Variables defined with a var makes
it local to the scope
Thursday, September 24, 2009 22

GLOBAL VARIABLES ARE EVIL
Un-namespaced values can clobber
each others values
Use of it should be minimized or
gotten rid of totally
Variables defined in the
function / module should start
with var otherwise they have a
global scope
Thursday, September 24, 2009 23

Inheritance
OOP ensures code reuse
Two forms of OOP
- Classical
- Prototypal
Thursday, September 24, 2009 24

prototype
JavaScript functions work as
methods, constructors and modules
It has Prototypal Inheritance,
instead of classical inheritance
This offers great expressive powers
All objects are directly or
indirectly linked to
Object.prototype
Thursday, September 24, 2009 25

prototype
Each object is linked to its
parent via a magic link
When a member is accessed the
compiler looks at the object and
then looks up to its parent via
the magic link
It keeps going all the way up
to Object.prototype
Thursday, September 24, 2009 26

prototype
my_object = { my_object_parent
foo: 10, = { Object
bar:15 bar: 10,
prototype prototype
Looking for my_object.foo, found it in the object itself
Looking for my_object.baz looks in the object and if it
doesn’t find it there it goes to my_object_parent which
is my_object.prototype
Looking for my_object.some_random_member can’t find it
in the object, look at my_object_parent, can’t find it
there either, goes to Object can’t find it there and is
set to undefined
Thursday, September 24, 2009 27

prototype
Augmenting the ancestor will have an
affect on all the children, even the
ones that were created before the
augmentation
Augmentation can be done via the
prototype property that each object
has
Thursday, September 24, 2009 28

prototype
var Test = function(id) {
this.something = id;
this.foo = function() {
console.log('this is a test: ' + this.something);
}
// implicit return not required
}
var o = new Test(10),
i = new Test(111);
o.foo();
i.foo();
Test.prototype.new_function = function() {
console.log('i am a new function');
}
o.new_function();
Thursday, September 24, 2009 29

Prototypal Inheritance
var BiggerConstructor = function() {};
BiggerConstructor.prototype = new Test();
var a = new BiggerConstructor();
a.new_function();
Another way of doing Inheritance
function object(o) {
function F() {};
F.prototype = o;
return new F ();
}
Thursday, September 24, 2009 30

Singleton
There is no need to produce a
class-like constructor for an
object that will have exactly
one instance
This is typical of JavaScript
applications
Use an object literal to get
started instead
Thursday, September 24, 2009 31

Singleton
You have seen it before
The methods of a singleton can enjoy
access to shared private data and
private methods
var singleton = {
firstFunction: function(a,b) {
},
secondFunction: function(c) {
}
}
Thursday, September 24, 2009 32

Module Pattern
The methods of a singleton can enjoy
access to shared private datum and
private methods
Variables defined in a module are only
visible in a module
Variables defined in a function are
only visible to the function
Function can be used as module
containers
Thursday, September 24, 2009 33

Module Pattern
var my_module = function() {
var privateVariable,
privateFunction = function() {
// stuff
};
return {
firstMethod: function(a,b) {
// can access privateVariable
// can access privateFunction
}
}
}();
my_module.firstMethod();
Thursday, September 24, 2009 34

Privileged Methods
Methods in the return object are
called Privileged methods
They have access to the secret
information
Has access to private variables and
methods
Obtains its secret information
through closure
Thursday, September 24, 2009 35

Power Constructor
function PowerConstructor() {
var that = {},
privateVariable = 40;
that.firstMethod = function(a,b) {// private access}
that.secondMethod = function(c) {// private access}
return that;
}
Many Patterns here
private variables (var)
private methods (inner functions)
privileged methods (that.firstmethod)
no more need for use of new
my_object = PowerConstructor();
Thursday, September 24, 2009 36

Resources
Coding convention
http://javascript.crockford.com/
code.html
Linting JavaScript
http://jslint.org
Mozilla Developer Center for
JavaScript
https://developer.mozilla.org/en/
JavaScript
Thursday, September 24, 2009 37