intro to object oriented javascript like callback, prototype inheritence etc

1. Object Oriented JavaScript
An Introduction
Gaurav Gupta

2. Agenda
●
Functions
●
Objects
●
Prototypal Inheritance
●
Callbacks
●
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
●
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
Exampl
e

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

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

7. 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

8. Prototypal Chain
●
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 → o.prototype …→ → Object.prototype → null

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

10. Call & Apply
●
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]);
Exampl
e

11. Callbacks
●
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
Exampl
e

12. 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..

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

14. 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

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

16. 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)

17. 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

18. Thank You !
Gaurav Gupta