SlideShare a Scribd company logo
1 of 13
OBJECT ORIENTED PROGRAMMING
IN
JAVASCRIPT
(OOJS)
-- Aditya Majety
FreeCodeCamp Lightning Talk
14-Mar-2017
AGENDA
 Object Oriented Programming
 Objects in JavaScript
 Access Object Properties
 Set Object Properties
 ‘this’ keyword
 Prototypes
 Prototypal Inheritance
 ECMAScript6
OBJECT ORIENTED PROGRAMMING
 Object Oriented Programming – A programming paradigm where we use Objects to model real
world things.
 Object – Collection of related data and/or functionality. (Encapsulation)
 Variables and Functions — are called properties and methods when they are inside objects.
OBJECTS IN JAVASCRIPT
 Ways of creating an Object in JavaScript
1. var myObj1 = { };
2. var myObj2 = new Object();
3. var myObj3 = function () { var obj = {}; return obj;};
4. function MyObj4() { this.myVar = ‘’; };
 The constructor function is JavaScript's version of a class. (No: 4)
 A constructor function name usually starts with a capital letter — this convention is used to make
constructor functions easier to recognize in code.
OBJECTS IN JAVASCRIPT (CONTD..)
Object Format
var objectName = {
member1Name: member1Value,
member2Name: member2Value,
member3Name: member3Value
}
 Each name/value pair must be
separated by a comma
 The name and value in each case are
separated by a colon
Sample Object
var person = {
name : {
first: 'Bob',
last: 'Smith‘
},
age: 32,
gender: 'male',
greeting: function() {
alert('Hi! I am ' + this.name[0]);
}
};
ACCESS OBJECT PROPERTIES
 Dot Notation
 person.age, person.gender
 Person.name.first, person.name.last
 Bracket Notation
 Using Property:
 person[‘age’], person[‘gender’]
 person[‘name’][‘first’], person[‘name’][‘last’]
 Using Index:
 person[0], person[1]
 Person[0][‘first’], Person[0].first
 Difference
 Dot notation can only accept a literal member name, not a variable value pointing to a name
SET OBJECT PROPERTIES
 person.age = 45
 person['name']['last'] = 'Cratchit‘
 We can also create new members.
 person['eyes'] = 'hazel'
 person.farewell = function() { alert("Bye everybody!") }
‘THIS’ KEYWORD
 The this keyword refers to the current object
the code is being written inside.
 Eg. Two different person object instances
may have different names, but will want to
use their own name when saying their
greeting.
 Person1.greeting() -> ‘Hi I’m Chris’
 Person2.greeting() -> ‘Hi I’m Brian’
PROTOTYPE
 We have to understand Prototypes to understand Inheritance.
 Each object has a prototype object, which acts as a template object that it inherits methods and properties
from.
 Prototypes are the mechanism by which JavaScript objects inherit features from one another.
 Prototype Chain : An object's prototype object may also have a prototype object, which it inherits methods
and properties from, and so on
 In classic OOP, classes are defined, then when object instances are created all the properties and methods
defined on the class are copied over to the instance.
 In JavaScript, they are not copied over — instead, a link is made between the object instance and its
constructor (a link in the prototype chain), and the properties and methods are found in the constructor by
walking up the chain.
PROTOTYPAL INHERITANCE
 How do we create an Object in JavaScript that inherits from another Object? (other than built-in
Objects)
 Only Constructors have prototype property. Object instances do not have it.
 Steps to Inherit from another Object
 Create the Main constructor
 Create the Child constructor
 Set Prototype
 Set Constructor Reference
PROTOTYPAL INHERITANCE CONTD..
Step 1
Step 2
Step 3
Step 4
ECMASCRIPT6
Equal to Constructor Function Create a Sub Class
THANK YOU

More Related Content

What's hot

Functions and Objects in JavaScript
Functions and Objects in JavaScript Functions and Objects in JavaScript
Functions and Objects in JavaScript Dhananjay Kumar
 
Java classes and objects interview questions
Java classes and objects interview questionsJava classes and objects interview questions
Java classes and objects interview questionsDhivyashree Selvarajtnkpm
 
OOP, API Design and MVP
OOP, API Design and MVPOOP, API Design and MVP
OOP, API Design and MVPHarshith Keni
 
Object oriented programming in php
Object oriented programming in phpObject oriented programming in php
Object oriented programming in phpAashiq Kuchey
 
Oops concepts in php
Oops concepts in phpOops concepts in php
Oops concepts in phpCPD INDIA
 
Introduction to OOP with PHP
Introduction to OOP with PHPIntroduction to OOP with PHP
Introduction to OOP with PHPMichael Peacock
 
Introduction to javascript and yoolkui
Introduction to javascript and yoolkuiIntroduction to javascript and yoolkui
Introduction to javascript and yoolkuiKhou Suylong
 
Javascript closures
Javascript closures Javascript closures
Javascript closures VNG
 
Synapseindia object oriented programming in php
Synapseindia object oriented programming in phpSynapseindia object oriented programming in php
Synapseindia object oriented programming in phpSynapseindiappsdevelopment
 
Ruby object model - Understanding of object play role for ruby
Ruby object model - Understanding of object play role for rubyRuby object model - Understanding of object play role for ruby
Ruby object model - Understanding of object play role for rubyTushar Pal
 
How prototype works in java script?
How prototype works in java script?How prototype works in java script?
How prototype works in java script?InnovationM
 
Metaprogramming in JavaScript
Metaprogramming in JavaScriptMetaprogramming in JavaScript
Metaprogramming in JavaScriptMehdi Valikhani
 

What's hot (20)

Ruby object model
Ruby object modelRuby object model
Ruby object model
 
Only oop
Only oopOnly oop
Only oop
 
Php oop presentation
Php   oop presentationPhp   oop presentation
Php oop presentation
 
JavaScript Objects
JavaScript ObjectsJavaScript Objects
JavaScript Objects
 
Functions and Objects in JavaScript
Functions and Objects in JavaScript Functions and Objects in JavaScript
Functions and Objects in JavaScript
 
Java classes and objects interview questions
Java classes and objects interview questionsJava classes and objects interview questions
Java classes and objects interview questions
 
Hibernate
HibernateHibernate
Hibernate
 
OOP, API Design and MVP
OOP, API Design and MVPOOP, API Design and MVP
OOP, API Design and MVP
 
Object oriented programming in php
Object oriented programming in phpObject oriented programming in php
Object oriented programming in php
 
Oops concepts in php
Oops concepts in phpOops concepts in php
Oops concepts in php
 
Javascript Design Patterns
Javascript Design PatternsJavascript Design Patterns
Javascript Design Patterns
 
Introduction to OOP with PHP
Introduction to OOP with PHPIntroduction to OOP with PHP
Introduction to OOP with PHP
 
Introduction to javascript and yoolkui
Introduction to javascript and yoolkuiIntroduction to javascript and yoolkui
Introduction to javascript and yoolkui
 
Solid OOPS
Solid OOPSSolid OOPS
Solid OOPS
 
Javascript closures
Javascript closures Javascript closures
Javascript closures
 
PHP Classes and OOPS Concept
PHP Classes and OOPS ConceptPHP Classes and OOPS Concept
PHP Classes and OOPS Concept
 
Synapseindia object oriented programming in php
Synapseindia object oriented programming in phpSynapseindia object oriented programming in php
Synapseindia object oriented programming in php
 
Ruby object model - Understanding of object play role for ruby
Ruby object model - Understanding of object play role for rubyRuby object model - Understanding of object play role for ruby
Ruby object model - Understanding of object play role for ruby
 
How prototype works in java script?
How prototype works in java script?How prototype works in java script?
How prototype works in java script?
 
Metaprogramming in JavaScript
Metaprogramming in JavaScriptMetaprogramming in JavaScript
Metaprogramming in JavaScript
 

Viewers also liked

OCAJP_SE8_eCertificate
OCAJP_SE8_eCertificateOCAJP_SE8_eCertificate
OCAJP_SE8_eCertificateAditya Majety
 
Equity bazaar 14032017
Equity bazaar 14032017Equity bazaar 14032017
Equity bazaar 14032017choice broking
 
План роботи РМО вчителів інформатики
План роботи РМО вчителів інформатикиПлан роботи РМО вчителів інформатики
План роботи РМО вчителів інформатикиRMO Hayvoron
 
Church Youth Work - (Gloria, Dembo, Lisa, Ola)
Church Youth Work - (Gloria, Dembo, Lisa, Ola)Church Youth Work - (Gloria, Dembo, Lisa, Ola)
Church Youth Work - (Gloria, Dembo, Lisa, Ola)Early Artis
 
Encapsulation in JavaScript - OOP
Encapsulation in JavaScript - OOPEncapsulation in JavaScript - OOP
Encapsulation in JavaScript - OOPAditya Majety
 
Fabrication and Performance Analysis of Downdraft Biomass Gasifier Using Suga...
Fabrication and Performance Analysis of Downdraft Biomass Gasifier Using Suga...Fabrication and Performance Analysis of Downdraft Biomass Gasifier Using Suga...
Fabrication and Performance Analysis of Downdraft Biomass Gasifier Using Suga...IJSRD
 
The JavaScript Programming Primer
The JavaScript  Programming PrimerThe JavaScript  Programming Primer
The JavaScript Programming PrimerMike Wilcox
 
거버넌스 혹은 협치?!
거버넌스 혹은 협치?!거버넌스 혹은 협치?!
거버넌스 혹은 협치?!ya rigury
 
The JavaScript Programming Language
The JavaScript Programming LanguageThe JavaScript Programming Language
The JavaScript Programming LanguageRaghavan Mohan
 
Introduction to web programming with JavaScript
Introduction to web programming with JavaScriptIntroduction to web programming with JavaScript
Introduction to web programming with JavaScriptT11 Sessions
 
Paris Web - Javascript as a programming language
Paris Web - Javascript as a programming languageParis Web - Javascript as a programming language
Paris Web - Javascript as a programming languageMarco Cedaro
 
Reactive Programming with JavaScript
Reactive Programming with JavaScriptReactive Programming with JavaScript
Reactive Programming with JavaScriptCodemotion
 
Javascript Tutorial
Javascript TutorialJavascript Tutorial
Javascript TutorialKang-min Liu
 
How To Use Selenium Successfully (Java Edition)
How To Use Selenium Successfully (Java Edition)How To Use Selenium Successfully (Java Edition)
How To Use Selenium Successfully (Java Edition)Sauce Labs
 
Functional Programming in JavaScript
Functional Programming in JavaScriptFunctional Programming in JavaScript
Functional Programming in JavaScriptTroy Miles
 

Viewers also liked (19)

OCAJP_SE8_eCertificate
OCAJP_SE8_eCertificateOCAJP_SE8_eCertificate
OCAJP_SE8_eCertificate
 
Equity bazaar 14032017
Equity bazaar 14032017Equity bazaar 14032017
Equity bazaar 14032017
 
План роботи РМО вчителів інформатики
План роботи РМО вчителів інформатикиПлан роботи РМО вчителів інформатики
План роботи РМО вчителів інформатики
 
Church Youth Work - (Gloria, Dembo, Lisa, Ola)
Church Youth Work - (Gloria, Dembo, Lisa, Ola)Church Youth Work - (Gloria, Dembo, Lisa, Ola)
Church Youth Work - (Gloria, Dembo, Lisa, Ola)
 
JavaScript im Jahr 2016
JavaScript im Jahr 2016JavaScript im Jahr 2016
JavaScript im Jahr 2016
 
Encapsulation in JavaScript - OOP
Encapsulation in JavaScript - OOPEncapsulation in JavaScript - OOP
Encapsulation in JavaScript - OOP
 
Fabrication and Performance Analysis of Downdraft Biomass Gasifier Using Suga...
Fabrication and Performance Analysis of Downdraft Biomass Gasifier Using Suga...Fabrication and Performance Analysis of Downdraft Biomass Gasifier Using Suga...
Fabrication and Performance Analysis of Downdraft Biomass Gasifier Using Suga...
 
The JavaScript Programming Primer
The JavaScript  Programming PrimerThe JavaScript  Programming Primer
The JavaScript Programming Primer
 
거버넌스 혹은 협치?!
거버넌스 혹은 협치?!거버넌스 혹은 협치?!
거버넌스 혹은 협치?!
 
The JavaScript Programming Language
The JavaScript Programming LanguageThe JavaScript Programming Language
The JavaScript Programming Language
 
Introduction to web programming with JavaScript
Introduction to web programming with JavaScriptIntroduction to web programming with JavaScript
Introduction to web programming with JavaScript
 
JavaScript 101
JavaScript 101JavaScript 101
JavaScript 101
 
Paris Web - Javascript as a programming language
Paris Web - Javascript as a programming languageParis Web - Javascript as a programming language
Paris Web - Javascript as a programming language
 
Reactive Programming with JavaScript
Reactive Programming with JavaScriptReactive Programming with JavaScript
Reactive Programming with JavaScript
 
Javascript Tutorial
Javascript TutorialJavascript Tutorial
Javascript Tutorial
 
How To Use Selenium Successfully (Java Edition)
How To Use Selenium Successfully (Java Edition)How To Use Selenium Successfully (Java Edition)
How To Use Selenium Successfully (Java Edition)
 
hindi news
hindi newshindi news
hindi news
 
Introduction to JavaScript Programming
Introduction to JavaScript ProgrammingIntroduction to JavaScript Programming
Introduction to JavaScript Programming
 
Functional Programming in JavaScript
Functional Programming in JavaScriptFunctional Programming in JavaScript
Functional Programming in JavaScript
 

Similar to Object oriented programming in JavaScript

Advanced JavaScript
Advanced JavaScriptAdvanced JavaScript
Advanced JavaScriptFu Cheng
 
Prototype Object.pptx
Prototype Object.pptxPrototype Object.pptx
Prototype Object.pptxSteins18
 
Object Oriented Programming in JavaScript
Object Oriented Programming in JavaScriptObject Oriented Programming in JavaScript
Object Oriented Programming in JavaScriptzand3rs
 
Javascript Prototypal Inheritance - Big Picture
Javascript Prototypal Inheritance - Big PictureJavascript Prototypal Inheritance - Big Picture
Javascript Prototypal Inheritance - Big PictureManish Jangir
 
Javascriptinobject orientedway-090512225827-phpapp02
Javascriptinobject orientedway-090512225827-phpapp02Javascriptinobject orientedway-090512225827-phpapp02
Javascriptinobject orientedway-090512225827-phpapp02Sopheak Sem
 
Understanding-Objects-in-Javascript.pptx
Understanding-Objects-in-Javascript.pptxUnderstanding-Objects-in-Javascript.pptx
Understanding-Objects-in-Javascript.pptxMariaTrinidadTumanga
 
JavaScript in Object-Oriented Way
JavaScript in Object-Oriented WayJavaScript in Object-Oriented Way
JavaScript in Object-Oriented WayChamnap Chhorn
 
Javascript Objects Deep Dive
Javascript Objects Deep DiveJavascript Objects Deep Dive
Javascript Objects Deep DiveManish Jangir
 
Object oriented programming
Object oriented programmingObject oriented programming
Object oriented programmingAmit Soni (CTFL)
 
Learn JS concepts by implementing jQuery
Learn JS concepts by implementing jQueryLearn JS concepts by implementing jQuery
Learn JS concepts by implementing jQueryWingify Engineering
 
packages and interfaces
packages and interfacespackages and interfaces
packages and interfacesmadhavi patil
 
Cordova training : Day 4 - Advanced Javascript
Cordova training : Day 4 - Advanced JavascriptCordova training : Day 4 - Advanced Javascript
Cordova training : Day 4 - Advanced JavascriptBinu Paul
 
JavaScript - Chapter 8 - Objects
 JavaScript - Chapter 8 - Objects JavaScript - Chapter 8 - Objects
JavaScript - Chapter 8 - ObjectsWebStackAcademy
 
Object Oriented Javascript part2
Object Oriented Javascript part2Object Oriented Javascript part2
Object Oriented Javascript part2Usman Mehmood
 
Introduction to Ecmascript - ES6
Introduction to Ecmascript - ES6Introduction to Ecmascript - ES6
Introduction to Ecmascript - ES6Nilesh Jayanandana
 
DeclaringConstructir.pptx
DeclaringConstructir.pptxDeclaringConstructir.pptx
DeclaringConstructir.pptxSinbadMagi
 
JavaScript Programming
JavaScript ProgrammingJavaScript Programming
JavaScript ProgrammingSehwan Noh
 
Understanding Object Oriented Javascript - Coffee@DBG June
Understanding Object Oriented Javascript - Coffee@DBG JuneUnderstanding Object Oriented Javascript - Coffee@DBG June
Understanding Object Oriented Javascript - Coffee@DBG JuneDeepu S Nath
 

Similar to Object oriented programming in JavaScript (20)

Advanced JavaScript
Advanced JavaScriptAdvanced JavaScript
Advanced JavaScript
 
Prototype Object.pptx
Prototype Object.pptxPrototype Object.pptx
Prototype Object.pptx
 
OOSD1-unit1_1_16_09.pptx
OOSD1-unit1_1_16_09.pptxOOSD1-unit1_1_16_09.pptx
OOSD1-unit1_1_16_09.pptx
 
Object Oriented Programming in JavaScript
Object Oriented Programming in JavaScriptObject Oriented Programming in JavaScript
Object Oriented Programming in JavaScript
 
Javascript Prototypal Inheritance - Big Picture
Javascript Prototypal Inheritance - Big PictureJavascript Prototypal Inheritance - Big Picture
Javascript Prototypal Inheritance - Big Picture
 
Javascriptinobject orientedway-090512225827-phpapp02
Javascriptinobject orientedway-090512225827-phpapp02Javascriptinobject orientedway-090512225827-phpapp02
Javascriptinobject orientedway-090512225827-phpapp02
 
Understanding-Objects-in-Javascript.pptx
Understanding-Objects-in-Javascript.pptxUnderstanding-Objects-in-Javascript.pptx
Understanding-Objects-in-Javascript.pptx
 
JavaScript in Object-Oriented Way
JavaScript in Object-Oriented WayJavaScript in Object-Oriented Way
JavaScript in Object-Oriented Way
 
Javascript Objects Deep Dive
Javascript Objects Deep DiveJavascript Objects Deep Dive
Javascript Objects Deep Dive
 
Object oriented programming
Object oriented programmingObject oriented programming
Object oriented programming
 
Learn JS concepts by implementing jQuery
Learn JS concepts by implementing jQueryLearn JS concepts by implementing jQuery
Learn JS concepts by implementing jQuery
 
packages and interfaces
packages and interfacespackages and interfaces
packages and interfaces
 
Cordova training : Day 4 - Advanced Javascript
Cordova training : Day 4 - Advanced JavascriptCordova training : Day 4 - Advanced Javascript
Cordova training : Day 4 - Advanced Javascript
 
JavaScript - Chapter 8 - Objects
 JavaScript - Chapter 8 - Objects JavaScript - Chapter 8 - Objects
JavaScript - Chapter 8 - Objects
 
Object Oriented Javascript part2
Object Oriented Javascript part2Object Oriented Javascript part2
Object Oriented Javascript part2
 
Introduction to Ecmascript - ES6
Introduction to Ecmascript - ES6Introduction to Ecmascript - ES6
Introduction to Ecmascript - ES6
 
DeclaringConstructir.pptx
DeclaringConstructir.pptxDeclaringConstructir.pptx
DeclaringConstructir.pptx
 
python.pptx
python.pptxpython.pptx
python.pptx
 
JavaScript Programming
JavaScript ProgrammingJavaScript Programming
JavaScript Programming
 
Understanding Object Oriented Javascript - Coffee@DBG June
Understanding Object Oriented Javascript - Coffee@DBG JuneUnderstanding Object Oriented Javascript - Coffee@DBG June
Understanding Object Oriented Javascript - Coffee@DBG June
 

Recently uploaded

[BuildWithAI] Introduction to Gemini.pdf
[BuildWithAI] Introduction to Gemini.pdf[BuildWithAI] Introduction to Gemini.pdf
[BuildWithAI] Introduction to Gemini.pdfSandro Moreira
 
Design and Development of a Provenance Capture Platform for Data Science
Design and Development of a Provenance Capture Platform for Data ScienceDesign and Development of a Provenance Capture Platform for Data Science
Design and Development of a Provenance Capture Platform for Data SciencePaolo Missier
 
Six Myths about Ontologies: The Basics of Formal Ontology
Six Myths about Ontologies: The Basics of Formal OntologySix Myths about Ontologies: The Basics of Formal Ontology
Six Myths about Ontologies: The Basics of Formal Ontologyjohnbeverley2021
 
API Governance and Monetization - The evolution of API governance
API Governance and Monetization -  The evolution of API governanceAPI Governance and Monetization -  The evolution of API governance
API Governance and Monetization - The evolution of API governanceWSO2
 
JohnPollard-hybrid-app-RailsConf2024.pptx
JohnPollard-hybrid-app-RailsConf2024.pptxJohnPollard-hybrid-app-RailsConf2024.pptx
JohnPollard-hybrid-app-RailsConf2024.pptxJohnPollard37
 
How to Check CNIC Information Online with Pakdata cf
How to Check CNIC Information Online with Pakdata cfHow to Check CNIC Information Online with Pakdata cf
How to Check CNIC Information Online with Pakdata cfdanishmna97
 
Why Teams call analytics are critical to your entire business
Why Teams call analytics are critical to your entire businessWhy Teams call analytics are critical to your entire business
Why Teams call analytics are critical to your entire businesspanagenda
 
Less Is More: Utilizing Ballerina to Architect a Cloud Data Platform
Less Is More: Utilizing Ballerina to Architect a Cloud Data PlatformLess Is More: Utilizing Ballerina to Architect a Cloud Data Platform
Less Is More: Utilizing Ballerina to Architect a Cloud Data PlatformWSO2
 
TEST BANK For Principles of Anatomy and Physiology, 16th Edition by Gerard J....
TEST BANK For Principles of Anatomy and Physiology, 16th Edition by Gerard J....TEST BANK For Principles of Anatomy and Physiology, 16th Edition by Gerard J....
TEST BANK For Principles of Anatomy and Physiology, 16th Edition by Gerard J....rightmanforbloodline
 
Rising Above_ Dubai Floods and the Fortitude of Dubai International Airport.pdf
Rising Above_ Dubai Floods and the Fortitude of Dubai International Airport.pdfRising Above_ Dubai Floods and the Fortitude of Dubai International Airport.pdf
Rising Above_ Dubai Floods and the Fortitude of Dubai International Airport.pdfOrbitshub
 
ChatGPT and Beyond - Elevating DevOps Productivity
ChatGPT and Beyond - Elevating DevOps ProductivityChatGPT and Beyond - Elevating DevOps Productivity
ChatGPT and Beyond - Elevating DevOps ProductivityVictorSzoltysek
 
Repurposing LNG terminals for Hydrogen Ammonia: Feasibility and Cost Saving
Repurposing LNG terminals for Hydrogen Ammonia: Feasibility and Cost SavingRepurposing LNG terminals for Hydrogen Ammonia: Feasibility and Cost Saving
Repurposing LNG terminals for Hydrogen Ammonia: Feasibility and Cost SavingEdi Saputra
 
Vector Search -An Introduction in Oracle Database 23ai.pptx
Vector Search -An Introduction in Oracle Database 23ai.pptxVector Search -An Introduction in Oracle Database 23ai.pptx
Vector Search -An Introduction in Oracle Database 23ai.pptxRemote DBA Services
 
Cloud Frontiers: A Deep Dive into Serverless Spatial Data and FME
Cloud Frontiers:  A Deep Dive into Serverless Spatial Data and FMECloud Frontiers:  A Deep Dive into Serverless Spatial Data and FME
Cloud Frontiers: A Deep Dive into Serverless Spatial Data and FMESafe Software
 
Navigating the Deluge_ Dubai Floods and the Resilience of Dubai International...
Navigating the Deluge_ Dubai Floods and the Resilience of Dubai International...Navigating the Deluge_ Dubai Floods and the Resilience of Dubai International...
Navigating the Deluge_ Dubai Floods and the Resilience of Dubai International...Orbitshub
 
The Zero-ETL Approach: Enhancing Data Agility and Insight
The Zero-ETL Approach: Enhancing Data Agility and InsightThe Zero-ETL Approach: Enhancing Data Agility and Insight
The Zero-ETL Approach: Enhancing Data Agility and InsightSafe Software
 
MINDCTI Revenue Release Quarter One 2024
MINDCTI Revenue Release Quarter One 2024MINDCTI Revenue Release Quarter One 2024
MINDCTI Revenue Release Quarter One 2024MIND CTI
 
"I see eyes in my soup": How Delivery Hero implemented the safety system for ...
"I see eyes in my soup": How Delivery Hero implemented the safety system for ..."I see eyes in my soup": How Delivery Hero implemented the safety system for ...
"I see eyes in my soup": How Delivery Hero implemented the safety system for ...Zilliz
 
Polkadot JAM Slides - Token2049 - By Dr. Gavin Wood
Polkadot JAM Slides - Token2049 - By Dr. Gavin WoodPolkadot JAM Slides - Token2049 - By Dr. Gavin Wood
Polkadot JAM Slides - Token2049 - By Dr. Gavin WoodJuan lago vázquez
 

Recently uploaded (20)

[BuildWithAI] Introduction to Gemini.pdf
[BuildWithAI] Introduction to Gemini.pdf[BuildWithAI] Introduction to Gemini.pdf
[BuildWithAI] Introduction to Gemini.pdf
 
Design and Development of a Provenance Capture Platform for Data Science
Design and Development of a Provenance Capture Platform for Data ScienceDesign and Development of a Provenance Capture Platform for Data Science
Design and Development of a Provenance Capture Platform for Data Science
 
Six Myths about Ontologies: The Basics of Formal Ontology
Six Myths about Ontologies: The Basics of Formal OntologySix Myths about Ontologies: The Basics of Formal Ontology
Six Myths about Ontologies: The Basics of Formal Ontology
 
API Governance and Monetization - The evolution of API governance
API Governance and Monetization -  The evolution of API governanceAPI Governance and Monetization -  The evolution of API governance
API Governance and Monetization - The evolution of API governance
 
JohnPollard-hybrid-app-RailsConf2024.pptx
JohnPollard-hybrid-app-RailsConf2024.pptxJohnPollard-hybrid-app-RailsConf2024.pptx
JohnPollard-hybrid-app-RailsConf2024.pptx
 
How to Check CNIC Information Online with Pakdata cf
How to Check CNIC Information Online with Pakdata cfHow to Check CNIC Information Online with Pakdata cf
How to Check CNIC Information Online with Pakdata cf
 
Understanding the FAA Part 107 License ..
Understanding the FAA Part 107 License ..Understanding the FAA Part 107 License ..
Understanding the FAA Part 107 License ..
 
Why Teams call analytics are critical to your entire business
Why Teams call analytics are critical to your entire businessWhy Teams call analytics are critical to your entire business
Why Teams call analytics are critical to your entire business
 
Less Is More: Utilizing Ballerina to Architect a Cloud Data Platform
Less Is More: Utilizing Ballerina to Architect a Cloud Data PlatformLess Is More: Utilizing Ballerina to Architect a Cloud Data Platform
Less Is More: Utilizing Ballerina to Architect a Cloud Data Platform
 
TEST BANK For Principles of Anatomy and Physiology, 16th Edition by Gerard J....
TEST BANK For Principles of Anatomy and Physiology, 16th Edition by Gerard J....TEST BANK For Principles of Anatomy and Physiology, 16th Edition by Gerard J....
TEST BANK For Principles of Anatomy and Physiology, 16th Edition by Gerard J....
 
Rising Above_ Dubai Floods and the Fortitude of Dubai International Airport.pdf
Rising Above_ Dubai Floods and the Fortitude of Dubai International Airport.pdfRising Above_ Dubai Floods and the Fortitude of Dubai International Airport.pdf
Rising Above_ Dubai Floods and the Fortitude of Dubai International Airport.pdf
 
ChatGPT and Beyond - Elevating DevOps Productivity
ChatGPT and Beyond - Elevating DevOps ProductivityChatGPT and Beyond - Elevating DevOps Productivity
ChatGPT and Beyond - Elevating DevOps Productivity
 
Repurposing LNG terminals for Hydrogen Ammonia: Feasibility and Cost Saving
Repurposing LNG terminals for Hydrogen Ammonia: Feasibility and Cost SavingRepurposing LNG terminals for Hydrogen Ammonia: Feasibility and Cost Saving
Repurposing LNG terminals for Hydrogen Ammonia: Feasibility and Cost Saving
 
Vector Search -An Introduction in Oracle Database 23ai.pptx
Vector Search -An Introduction in Oracle Database 23ai.pptxVector Search -An Introduction in Oracle Database 23ai.pptx
Vector Search -An Introduction in Oracle Database 23ai.pptx
 
Cloud Frontiers: A Deep Dive into Serverless Spatial Data and FME
Cloud Frontiers:  A Deep Dive into Serverless Spatial Data and FMECloud Frontiers:  A Deep Dive into Serverless Spatial Data and FME
Cloud Frontiers: A Deep Dive into Serverless Spatial Data and FME
 
Navigating the Deluge_ Dubai Floods and the Resilience of Dubai International...
Navigating the Deluge_ Dubai Floods and the Resilience of Dubai International...Navigating the Deluge_ Dubai Floods and the Resilience of Dubai International...
Navigating the Deluge_ Dubai Floods and the Resilience of Dubai International...
 
The Zero-ETL Approach: Enhancing Data Agility and Insight
The Zero-ETL Approach: Enhancing Data Agility and InsightThe Zero-ETL Approach: Enhancing Data Agility and Insight
The Zero-ETL Approach: Enhancing Data Agility and Insight
 
MINDCTI Revenue Release Quarter One 2024
MINDCTI Revenue Release Quarter One 2024MINDCTI Revenue Release Quarter One 2024
MINDCTI Revenue Release Quarter One 2024
 
"I see eyes in my soup": How Delivery Hero implemented the safety system for ...
"I see eyes in my soup": How Delivery Hero implemented the safety system for ..."I see eyes in my soup": How Delivery Hero implemented the safety system for ...
"I see eyes in my soup": How Delivery Hero implemented the safety system for ...
 
Polkadot JAM Slides - Token2049 - By Dr. Gavin Wood
Polkadot JAM Slides - Token2049 - By Dr. Gavin WoodPolkadot JAM Slides - Token2049 - By Dr. Gavin Wood
Polkadot JAM Slides - Token2049 - By Dr. Gavin Wood
 

Object oriented programming in JavaScript

  • 1. OBJECT ORIENTED PROGRAMMING IN JAVASCRIPT (OOJS) -- Aditya Majety FreeCodeCamp Lightning Talk 14-Mar-2017
  • 2. AGENDA  Object Oriented Programming  Objects in JavaScript  Access Object Properties  Set Object Properties  ‘this’ keyword  Prototypes  Prototypal Inheritance  ECMAScript6
  • 3. OBJECT ORIENTED PROGRAMMING  Object Oriented Programming – A programming paradigm where we use Objects to model real world things.  Object – Collection of related data and/or functionality. (Encapsulation)  Variables and Functions — are called properties and methods when they are inside objects.
  • 4. OBJECTS IN JAVASCRIPT  Ways of creating an Object in JavaScript 1. var myObj1 = { }; 2. var myObj2 = new Object(); 3. var myObj3 = function () { var obj = {}; return obj;}; 4. function MyObj4() { this.myVar = ‘’; };  The constructor function is JavaScript's version of a class. (No: 4)  A constructor function name usually starts with a capital letter — this convention is used to make constructor functions easier to recognize in code.
  • 5. OBJECTS IN JAVASCRIPT (CONTD..) Object Format var objectName = { member1Name: member1Value, member2Name: member2Value, member3Name: member3Value }  Each name/value pair must be separated by a comma  The name and value in each case are separated by a colon Sample Object var person = { name : { first: 'Bob', last: 'Smith‘ }, age: 32, gender: 'male', greeting: function() { alert('Hi! I am ' + this.name[0]); } };
  • 6. ACCESS OBJECT PROPERTIES  Dot Notation  person.age, person.gender  Person.name.first, person.name.last  Bracket Notation  Using Property:  person[‘age’], person[‘gender’]  person[‘name’][‘first’], person[‘name’][‘last’]  Using Index:  person[0], person[1]  Person[0][‘first’], Person[0].first  Difference  Dot notation can only accept a literal member name, not a variable value pointing to a name
  • 7. SET OBJECT PROPERTIES  person.age = 45  person['name']['last'] = 'Cratchit‘  We can also create new members.  person['eyes'] = 'hazel'  person.farewell = function() { alert("Bye everybody!") }
  • 8. ‘THIS’ KEYWORD  The this keyword refers to the current object the code is being written inside.  Eg. Two different person object instances may have different names, but will want to use their own name when saying their greeting.  Person1.greeting() -> ‘Hi I’m Chris’  Person2.greeting() -> ‘Hi I’m Brian’
  • 9. PROTOTYPE  We have to understand Prototypes to understand Inheritance.  Each object has a prototype object, which acts as a template object that it inherits methods and properties from.  Prototypes are the mechanism by which JavaScript objects inherit features from one another.  Prototype Chain : An object's prototype object may also have a prototype object, which it inherits methods and properties from, and so on  In classic OOP, classes are defined, then when object instances are created all the properties and methods defined on the class are copied over to the instance.  In JavaScript, they are not copied over — instead, a link is made between the object instance and its constructor (a link in the prototype chain), and the properties and methods are found in the constructor by walking up the chain.
  • 10. PROTOTYPAL INHERITANCE  How do we create an Object in JavaScript that inherits from another Object? (other than built-in Objects)  Only Constructors have prototype property. Object instances do not have it.  Steps to Inherit from another Object  Create the Main constructor  Create the Child constructor  Set Prototype  Set Constructor Reference
  • 11. PROTOTYPAL INHERITANCE CONTD.. Step 1 Step 2 Step 3 Step 4
  • 12. ECMASCRIPT6 Equal to Constructor Function Create a Sub Class