Over recent years, JavaScript has increasingly gained popularity, partly due to libraries that are developed to make JavaScript apps/effects easier to create for those who may not have fully grasped the core language yet. While in the past it was a common argument that JavaScript was a basic language and was very ‘slap dash’ with no real foundation; this is no longer the case, especially with the introduction of high scale web applications and ‘adaptations’ such as JSON (JavaScript Object Notation).

1. Object Oriented
JavaScript
An Introduction
- Manoj Nama

2. Object Oriented
JavaScript
An Introduction
- Manoj Nama

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

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

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

6. 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]);
Example

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

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

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

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

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

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

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

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

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

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

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

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

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

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