Introduction of Object Oriented JavaScript

Introduction of Object Oriented JavaScript

• 1.
  Object Oriented JavaScript AnIntroduction Gaurav Gupta
• 2.
  Agenda ● Functions ● Objects ● Prototypal Inheritance ● Callbacks ● Async Programming ● SomeExercises
• 3.
  Functions ● Functions are firstclass members of JavaScript ● They can be used just like variables function someFunction(arg1, arg2) { return arg1 + arg2; }
• 4.
  Functions ● JavaScript has Functionscope, 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 almosteverything 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 functionis similar to the notation of a Class function Person(name, age) { this.name = name; this.age = age; } Exampl e
• 7.
  Prototypes ● Objects inheriting fromother 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 Objectsinherit 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 andmethods ● Prototypes are used for inheritance ● Two ways ○ Inherit from Constructor Functions (Class) ○ Inherit from another Objects Exampl e
• 10.
  Call & Apply ● Call/Applyboth 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 basicallyfunctions 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 reallyhelp 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 ● Callbackhell 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 ! GauravGupta