SlideShare a Scribd company logo
Object Oriented JavaScript
An Introduction
Gaurav Gupta
Agenda
●
Functions
●
Objects
●
Prototypal Inheritance
●
Callbacks
●
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
Exampl
e
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
Constructor Function
●
Constructor function is similar to the notation
of a Class
function Person(name, age) {
this.name = name;
this.age = age;
}
Exampl
e
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
Exampl
e
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
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
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 Hell
asyncOp1(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
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”
});
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
Thank You !
Gaurav Gupta

More Related Content

What's hot (20)

Іван Лаврів "Transducers for ruby developers"
Іван Лаврів "Transducers for ruby developers"
Forge Events
 
JavaScript Beyond jQuery
JavaScript Beyond jQuery
Bobby Bryant
 
Closures
Closures
prashanthbabu07
 
Groovy / comparison with java
Groovy / comparison with java
Liviu Tudor
 
Modern Java Features
Modern Java Features
Florian Hopf
 
FRP
FRP
AntiGravitY56
 
Reactive cocoa 101
Reactive cocoa 101
Hai Feng Kao
 
Functional programming with Ruby - can make you look smart
Functional programming with Ruby - can make you look smart
Chen Fisher
 
Python functions and loops
Python functions and loops
thirumurugan133
 
Presentation mcrl2
Presentation mcrl2
matifch
 
Effective java item 80 and 81
Effective java item 80 and 81
Isaac Liao
 
MCRL2
MCRL2
kashif kashif
 
What is storage class
What is storage class
Isha Aggarwal
 
jimmy hacking (at) Microsoft
jimmy hacking (at) Microsoft
Jimmy Schementi
 
JavaScript operators
JavaScript operators
Victor Verhaagen
 
What’s new in Kotlin?
What’s new in Kotlin?
Squareboat
 
Rethinking React
Rethinking React
GlobalLogic Ukraine
 
Cap'n Proto (C++ Developer Meetup Iasi)
Cap'n Proto (C++ Developer Meetup Iasi)
Ovidiu Farauanu
 
Rx java2 - Should I use it?
Rx java2 - Should I use it?
Kamil Kucharski
 
Drupal course - batch API
Drupal course - batch API
Dániel Kalmár
 
Іван Лаврів "Transducers for ruby developers"
Іван Лаврів "Transducers for ruby developers"
Forge Events
 
JavaScript Beyond jQuery
JavaScript Beyond jQuery
Bobby Bryant
 
Groovy / comparison with java
Groovy / comparison with java
Liviu Tudor
 
Modern Java Features
Modern Java Features
Florian Hopf
 
Reactive cocoa 101
Reactive cocoa 101
Hai Feng Kao
 
Functional programming with Ruby - can make you look smart
Functional programming with Ruby - can make you look smart
Chen Fisher
 
Python functions and loops
Python functions and loops
thirumurugan133
 
Presentation mcrl2
Presentation mcrl2
matifch
 
Effective java item 80 and 81
Effective java item 80 and 81
Isaac Liao
 
What is storage class
What is storage class
Isha Aggarwal
 
jimmy hacking (at) Microsoft
jimmy hacking (at) Microsoft
Jimmy Schementi
 
What’s new in Kotlin?
What’s new in Kotlin?
Squareboat
 
Cap'n Proto (C++ Developer Meetup Iasi)
Cap'n Proto (C++ Developer Meetup Iasi)
Ovidiu Farauanu
 
Rx java2 - Should I use it?
Rx java2 - Should I use it?
Kamil Kucharski
 
Drupal course - batch API
Drupal course - batch API
Dániel Kalmár
 

Viewers also liked (6)

Django
Django
NexThoughts Technologies
 
Que son las tics UPANA
Que son las tics UPANA
champerico
 
Introduction to Grails
Introduction to Grails
NexThoughts Technologies
 
Jmh
Jmh
NexThoughts Technologies
 
Spring Framework
Spring Framework
NexThoughts Technologies
 
Introduction to HTML
Introduction to HTML
MayaLisa
 
Ad

Similar to Introduction of Object Oriented JavaScript (20)

Object Oriented Javascript
Object Oriented Javascript
NexThoughts Technologies
 
Functional programming in Scala
Functional programming in Scala
datamantra
 
java script functions, classes
java script functions, classes
Vijay Kalyan
 
Ruby Functional Programming
Ruby Functional Programming
Geison Goes
 
8 introduction to_java_script
8 introduction to_java_script
Vijay Kalyan
 
Functional Programming in Ruby
Functional Programming in Ruby
Alex Teut
 
Learn To Code: Introduction to java
Learn To Code: Introduction to java
SadhanaParameswaran
 
JavaScript - Chapter 6 - Basic Functions
JavaScript - Chapter 6 - Basic Functions
WebStackAcademy
 
Object oriented programming in java
Object oriented programming in java
Elizabeth alexander
 
JavaScript Introductin to Functions
JavaScript Introductin to Functions
Charles Russell
 
Hello Java 8
Hello Java 8
Adam Davis
 
JavaScript - Chapter 7 - Advanced Functions
JavaScript - Chapter 7 - Advanced Functions
WebStackAcademy
 
(3) cpp procedural programming
(3) cpp procedural programming
Nico Ludwig
 
Functional programming
Functional programming
ijcd
 
Reactive programming using rx java & akka actors - pdx-scala - june 2014
Reactive programming using rx java & akka actors - pdx-scala - june 2014
Thomas Lockney
 
Scala qq
Scala qq
羽祈 張
 
Declarative JavaScript concepts and implemetation
Declarative JavaScript concepts and implemetation
Om Shankar
 
Twins: OOP and FP
Twins: OOP and FP
RichardWarburton
 
javascript objects
javascript objects
Vijay Kalyan
 
9.4json
9.4json
Andrew Dunstan
 
Functional programming in Scala
Functional programming in Scala
datamantra
 
java script functions, classes
java script functions, classes
Vijay Kalyan
 
Ruby Functional Programming
Ruby Functional Programming
Geison Goes
 
8 introduction to_java_script
8 introduction to_java_script
Vijay Kalyan
 
Functional Programming in Ruby
Functional Programming in Ruby
Alex Teut
 
Learn To Code: Introduction to java
Learn To Code: Introduction to java
SadhanaParameswaran
 
JavaScript - Chapter 6 - Basic Functions
JavaScript - Chapter 6 - Basic Functions
WebStackAcademy
 
Object oriented programming in java
Object oriented programming in java
Elizabeth alexander
 
JavaScript Introductin to Functions
JavaScript Introductin to Functions
Charles Russell
 
JavaScript - Chapter 7 - Advanced Functions
JavaScript - Chapter 7 - Advanced Functions
WebStackAcademy
 
(3) cpp procedural programming
(3) cpp procedural programming
Nico Ludwig
 
Functional programming
Functional programming
ijcd
 
Reactive programming using rx java & akka actors - pdx-scala - june 2014
Reactive programming using rx java & akka actors - pdx-scala - june 2014
Thomas Lockney
 
Declarative JavaScript concepts and implemetation
Declarative JavaScript concepts and implemetation
Om Shankar
 
javascript objects
javascript objects
Vijay Kalyan
 
Ad

More from NexThoughts Technologies (20)

Alexa skill
Alexa skill
NexThoughts Technologies
 
GraalVM
GraalVM
NexThoughts Technologies
 
Docker & kubernetes
Docker & kubernetes
NexThoughts Technologies
 
Apache commons
Apache commons
NexThoughts Technologies
 
HazelCast
HazelCast
NexThoughts Technologies
 
MySQL Pro
MySQL Pro
NexThoughts Technologies
 
Microservice Architecture using Spring Boot with React & Redux
Microservice Architecture using Spring Boot with React & Redux
NexThoughts Technologies
 
Swagger
Swagger
NexThoughts Technologies
 
Solid Principles
Solid Principles
NexThoughts Technologies
 
Arango DB
Arango DB
NexThoughts Technologies
 
Jython
Jython
NexThoughts Technologies
 
Introduction to TypeScript
Introduction to TypeScript
NexThoughts Technologies
 
Smart Contract samples
Smart Contract samples
NexThoughts Technologies
 
My Doc of geth
My Doc of geth
NexThoughts Technologies
 
Geth important commands
Geth important commands
NexThoughts Technologies
 
Ethereum genesis
Ethereum genesis
NexThoughts Technologies
 
Ethereum
Ethereum
NexThoughts Technologies
 
Springboot Microservices
Springboot Microservices
NexThoughts Technologies
 
An Introduction to Redux
An Introduction to Redux
NexThoughts Technologies
 
Google authentication
Google authentication
NexThoughts Technologies
 

Recently uploaded (20)

Your startup on AWS - How to architect and maintain a Lean and Mean account
Your startup on AWS - How to architect and maintain a Lean and Mean account
angelo60207
 
cnc-drilling-dowel-inserting-machine-drillteq-d-510-english.pdf
cnc-drilling-dowel-inserting-machine-drillteq-d-510-english.pdf
AmirStern2
 
Analysis of the changes in the attitude of the news comments caused by knowin...
Analysis of the changes in the attitude of the news comments caused by knowin...
Matsushita Laboratory
 
FIDO Seminar: New Data: Passkey Adoption in the Workforce.pptx
FIDO Seminar: New Data: Passkey Adoption in the Workforce.pptx
FIDO Alliance
 
FME for Good: Integrating Multiple Data Sources with APIs to Support Local Ch...
FME for Good: Integrating Multiple Data Sources with APIs to Support Local Ch...
Safe Software
 
FIDO Seminar: Perspectives on Passkeys & Consumer Adoption.pptx
FIDO Seminar: Perspectives on Passkeys & Consumer Adoption.pptx
FIDO Alliance
 
Down the Rabbit Hole – Solving 5 Training Roadblocks
Down the Rabbit Hole – Solving 5 Training Roadblocks
Rustici Software
 
Murdledescargadarkweb.pdfvolumen1 100 elementary
Murdledescargadarkweb.pdfvolumen1 100 elementary
JorgeSemperteguiMont
 
Oracle Cloud Infrastructure Generative AI Professional
Oracle Cloud Infrastructure Generative AI Professional
VICTOR MAESTRE RAMIREZ
 
MuleSoft for AgentForce : Topic Center and API Catalog
MuleSoft for AgentForce : Topic Center and API Catalog
shyamraj55
 
FIDO Seminar: Evolving Landscape of Post-Quantum Cryptography.pptx
FIDO Seminar: Evolving Landscape of Post-Quantum Cryptography.pptx
FIDO Alliance
 
ENERGY CONSUMPTION CALCULATION IN ENERGY-EFFICIENT AIR CONDITIONER.pdf
ENERGY CONSUMPTION CALCULATION IN ENERGY-EFFICIENT AIR CONDITIONER.pdf
Muhammad Rizwan Akram
 
TrustArc Webinar - 2025 Global Privacy Survey
TrustArc Webinar - 2025 Global Privacy Survey
TrustArc
 
Bridging the divide: A conversation on tariffs today in the book industry - T...
Bridging the divide: A conversation on tariffs today in the book industry - T...
BookNet Canada
 
Mastering AI Workflows with FME - Peak of Data & AI 2025
Mastering AI Workflows with FME - Peak of Data & AI 2025
Safe Software
 
No-Code Workflows for CAD & 3D Data: Scaling AI-Driven Infrastructure
No-Code Workflows for CAD & 3D Data: Scaling AI-Driven Infrastructure
Safe Software
 
FIDO Seminar: Targeting Trust: The Future of Identity in the Workforce.pptx
FIDO Seminar: Targeting Trust: The Future of Identity in the Workforce.pptx
FIDO Alliance
 
The State of Web3 Industry- Industry Report
The State of Web3 Industry- Industry Report
Liveplex
 
PyData - Graph Theory for Multi-Agent Integration
PyData - Graph Theory for Multi-Agent Integration
barqawicloud
 
War_And_Cyber_3_Years_Of_Struggle_And_Lessons_For_Global_Security.pdf
War_And_Cyber_3_Years_Of_Struggle_And_Lessons_For_Global_Security.pdf
biswajitbanerjee38
 
Your startup on AWS - How to architect and maintain a Lean and Mean account
Your startup on AWS - How to architect and maintain a Lean and Mean account
angelo60207
 
cnc-drilling-dowel-inserting-machine-drillteq-d-510-english.pdf
cnc-drilling-dowel-inserting-machine-drillteq-d-510-english.pdf
AmirStern2
 
Analysis of the changes in the attitude of the news comments caused by knowin...
Analysis of the changes in the attitude of the news comments caused by knowin...
Matsushita Laboratory
 
FIDO Seminar: New Data: Passkey Adoption in the Workforce.pptx
FIDO Seminar: New Data: Passkey Adoption in the Workforce.pptx
FIDO Alliance
 
FME for Good: Integrating Multiple Data Sources with APIs to Support Local Ch...
FME for Good: Integrating Multiple Data Sources with APIs to Support Local Ch...
Safe Software
 
FIDO Seminar: Perspectives on Passkeys & Consumer Adoption.pptx
FIDO Seminar: Perspectives on Passkeys & Consumer Adoption.pptx
FIDO Alliance
 
Down the Rabbit Hole – Solving 5 Training Roadblocks
Down the Rabbit Hole – Solving 5 Training Roadblocks
Rustici Software
 
Murdledescargadarkweb.pdfvolumen1 100 elementary
Murdledescargadarkweb.pdfvolumen1 100 elementary
JorgeSemperteguiMont
 
Oracle Cloud Infrastructure Generative AI Professional
Oracle Cloud Infrastructure Generative AI Professional
VICTOR MAESTRE RAMIREZ
 
MuleSoft for AgentForce : Topic Center and API Catalog
MuleSoft for AgentForce : Topic Center and API Catalog
shyamraj55
 
FIDO Seminar: Evolving Landscape of Post-Quantum Cryptography.pptx
FIDO Seminar: Evolving Landscape of Post-Quantum Cryptography.pptx
FIDO Alliance
 
ENERGY CONSUMPTION CALCULATION IN ENERGY-EFFICIENT AIR CONDITIONER.pdf
ENERGY CONSUMPTION CALCULATION IN ENERGY-EFFICIENT AIR CONDITIONER.pdf
Muhammad Rizwan Akram
 
TrustArc Webinar - 2025 Global Privacy Survey
TrustArc Webinar - 2025 Global Privacy Survey
TrustArc
 
Bridging the divide: A conversation on tariffs today in the book industry - T...
Bridging the divide: A conversation on tariffs today in the book industry - T...
BookNet Canada
 
Mastering AI Workflows with FME - Peak of Data & AI 2025
Mastering AI Workflows with FME - Peak of Data & AI 2025
Safe Software
 
No-Code Workflows for CAD & 3D Data: Scaling AI-Driven Infrastructure
No-Code Workflows for CAD & 3D Data: Scaling AI-Driven Infrastructure
Safe Software
 
FIDO Seminar: Targeting Trust: The Future of Identity in the Workforce.pptx
FIDO Seminar: Targeting Trust: The Future of Identity in the Workforce.pptx
FIDO Alliance
 
The State of Web3 Industry- Industry Report
The State of Web3 Industry- Industry Report
Liveplex
 
PyData - Graph Theory for Multi-Agent Integration
PyData - Graph Theory for Multi-Agent Integration
barqawicloud
 
War_And_Cyber_3_Years_Of_Struggle_And_Lessons_For_Global_Security.pdf
War_And_Cyber_3_Years_Of_Struggle_And_Lessons_For_Global_Security.pdf
biswajitbanerjee38
 

Introduction of Object Oriented JavaScript

  • 1. Object Oriented JavaScript An Introduction Gaurav Gupta
  • 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