Code camp presentation for OOJS introduction

1. Object Oriented JavaScript
An Introduction
Manoj Nama

2. Agenda
●
●
●
●
●
●
Functions
Objects
Prototypal Inheritance
Callbacks & Closures
Async Programming
Some Exercises

3. Functions
●
●
Functions are first class members of
JavaScript
They can be used just like variables
function someFunction(arg1, arg2) {
return arg1 + arg2;
}

4. Functions
●
●
Example
JavaScript has Function scope, i.e only
Functions define the scope and nothing
else
A function has access to all the variables
and methods in the scope in which it is
defined

5. Call & Apply
●
Example
Call/Apply both are used to call a function
with the ability to change the this reference
●
Only difference between the two is syntax
○
Call takes arguments as a list
functionName.call(obj, arg1, arg2);
○
Apply takes an array of Arguments
functionName.apply(obj, [arg1, arg2]);

6. Objects
●
●
Example
In JavaScript almost everything is an
Object
Multiple ways to create an Object
○
○
○
○
Object Constructor var
Object Literal
var
Inbuilt Method
var
Constructor function var
obj
obj
obj
obj
=
=
=
=
new Object()
{}
Object.create()
new Person()

7. Constructor Function
●
Constructor function is similar to the
notation of a Class
function Person(name, age) {
this.name = name;
this.age = age;
}
Example

8. Prototypes
●
●
●
Objects inheriting from other Objects
Prototype is an object used to construct
new objects
we can assign properties to prototypes to
inherit them
Prototypes are used with Constructor Functions

9. Prototypal Chain
●
●
o
All Objects inherit from Object class
If certain property is not available on
current object, it is looked on prototype,
then Parent’s prototype and so on … until
the property or null is found
→
o.prototype
→ … →
Object.prototype
→
null

10. Inheritance
●
●
●
Inheriting properties and methods
Prototypes are used for inheritance
Two ways
○
○
Inherit from Constructor Functions (Class)
Inherit from another Objects
Example

11. Callbacks
●
●
●
Example
Callbacks are basically functions passed
on as arguments to another operation
This allows us to cope with Asynchronous
nature of JavaScript
We don’t have to block the browser for
results

12. Closures
●
●
●
Example
Very important due to Async nature of
JavaScript
Closures are basically functions which
capture the surrounding scope
The variables remain bound to the scope
even when the initiator returns

13. Async Programming
●
●
●
Callbacks really help in maintaining the
sanity in Asynchronous operations
But, what if there are huge no of async
operations depending on each other,
nested inside each other..
This is referred to as Callback hell..

14. Callback Hell
asyncOp1(function(result) {
asyncOp2(function(result1) {
asyncOp3(function(result2) {
...
asyncOp1476(function(result3) {
//phew! got my result
});
});
});
});

15. Async Flow Control
●
●
●
Callback hell can be avoided by controlling
the program flow
Async.JS is an excellent library to control
the callback flow
Promises Pattern can be very useful with
Async Operations

16. Async Flow Control
async.parallel([
function(callback) {
callback(null, “data”);
},
function(callback) {
callback(null, “data2”);
}
],
//optional callback
function(err, results) {
//results: [“data”,
“data2”]
});
Example
async.waterfall([
function(callback) {
callback(null, “data”);
},
function(arg1, callback) {
//arg1: “data”
callback(null, “data2”);
}
],
//optional callback
function(err, result) {
//result: “data2”
});

17. Tips & Tricks
●
use + to convert expressions to a number
○
●
●
+new Date() gives Timestamp
use !! to convert any expression to a
boolean
Append array to another array
○
○
a = [1,2,3]; b= [4,5,6]
Array.prototype.push.apply(a,b)

18. Exercises
●
●
●
Add a loop() method to the Prototype of
Array
Implement basic Inheritance with an
example of Employee
print numbers 1..5, such that every
number is printed after 500ms

19. Links to Examples
●
Functions: http://jsfiddle.net/manoj_nama/GE59y/
●
Call & Apply: http://jsfiddle.net/manoj_nama/6tLx5/1/
●
Objects: http://jsfiddle.net/manoj_nama/Ma9EQ/
●
Constructor Function: http://jsfiddle.net/manoj_nama/3Ly4V/1/
●
Inheritance: http://jsfiddle.net/manoj_nama/YLUHw/1/
●
Callbacks: http://jsfiddle.net/manoj_nama/9vqEf/1/
●
Closures: http://jsfiddle.net/manoj_nama/H6nE2/1/
●
Promises: http://jsfiddle.net/manoj_nama/R6ZV2/

20. Thank You !
Manoj Nama
@manoj_nama