1. 1. Object Oriented JavaScript An Introduction Gaurav Gupta
2. 2. Agenda Functions Objects Prototypal Inheritance Callbacks Async Programming Some Exercises
3. 3. Functions Functions are first class members of JavaScript They can be used just like variables function someFunction(arg1, arg2) { return arg1 + arg2; }
4. 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. 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. 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. 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. 8. Prototypal Chain All Objects inherit from Object class If certain property is not available on current object, it is looked on prototype, then Parents prototype and so on until the property or null is found o o.prototype Object.prototype null
9. 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. 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. 11. Callbacks Callbacks are basically functions passed on as arguments to another operation This allows us to cope with Asynchronous nature of JavaScript We dont have to block the browser for results Exampl e
12. 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. 13. Callback Hell asyncOp1(function(result) { asyncOp2(function(result1) { asyncOp3(function(result2) { ... asyncOp1476(function(result3) { //phew! got my result }); }); }); });
14. 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. 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. 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. 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. 18. Thank You ! Gaurav Gupta