Object Oriented JavaScriptAn Introduction - Manoj Nama

Object Oriented JavaScriptAn Introduction - Manoj Nama

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

Functions● Functions are first class members of JavaScript● They can be used just like variables

function someFunction(arg1, arg2) {return arg1 + arg2;

}

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

Example

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 listfunctionName.call(obj, arg1, arg2);

○ Apply takes an array of ArgumentsfunctionName.apply(obj, [arg1, arg2]);

Example

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()

Example

Constructor Function● Constructor function is similar to the notation of a Class

function Person(name, age) {this.name = name;this.age = age;

}

Example

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

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

Inheritance● Inheriting properties and methods● Prototypes are used for inheritance● Two ways

○ Inherit from Constructor Functions (Class)○ Inherit from another Objects

Example

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

Example

Closures● 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

Example

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

Callback HellasyncOp1(function(result) {

asyncOp2(function(result1) {asyncOp3(function(result2) {

...

asyncOp1476(function(result3) {//phew! got my

result});

});});});

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

Async Flow Control Example

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”});

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)

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

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/