SlideShare a Scribd company logo
1 of 9
Download to read offline
OBJECT ORIENTED
PROGRAMMING (OOP)
WITH JAVASCRIPT
SECTION
LECTURE
OBJECT ORIENTED PROGRAMMING
(OOP) WITH JAVASCRIPT
WHAT IS OBJECT-ORIENTED
PROGRAMMING?
WHAT IS OBJECT-ORIENTED PROGRAMMING? (OOP)
OOP
Style of code, “how” we
write and organize code
👉 Object-oriented programming (OOP) is a programming paradigm based on the
concept of objects;
👉 We use objects to model (describe) real-world or abstract features;
👉 Objects may contain data (properties) and code (methods). By using objects, we
pack data and the corresponding behavior into one block;
👉 In OOP, objects are self-contained pieces/blocks of code;
👉 Objects are building blocks of applications, and interact with one another;
👉 Interactions happen through a public interface (API): methods that the code
outside of the object can access and use to communicate with the object;
👉 OOP was developed with the goal of organizing code, to make it more flexible
and easier to maintain (avoid “spaghetti code”).
E.g. user or todo list item
E.g. HTML component or data structure
Data
Behaviour
Like a blueprint from
which we can create
new objects
CLASSES AND INSTANCES (TRADITIONAL OOP)
CLASS
Instance
Instance
Instance
Just a representation,
NOT actual JavaScript
syntax!
JavaScript does NOT
support real classes
like represented here
New object created from the class. Like a
real house created from an abstract blueprint
☝ Conceptual overview: it works
a bit differently in JavaScript.
Still important to understand!
THE 4 FUNDAMENTAL OOP PRINCIPLES
Abstraction
Polymorphism
Inheritance
Encapsulation
The 4 fundamental
principles of Object-
Oriented Programming
🤔 “How do we actually design classes? How
do we model real-world data into classes?”
PRINCIPLE 1: ABSTRACTION
Polymorphism
Inheritance
Abstraction
Encapsulation
👉 Abstraction: Ignoring or hiding details that don’t matter, allowing us to
get an overview perspective of the thing we’re implementing, instead of
messing with details that don’t really matter to our implementation.
Real phone Abstracted phone
Do we really need all these low-level details?
Details have been
abstracted away
PRINCIPLE 2: ENCAPSULATION
Polymorphism
Inheritance
Again, NOT actually JavaScript
syntax (the private keyword
doesn’t exist)
Abstraction
Encapsulation
👉 Encapsulation: Keeping properties and methods private inside the class,
so they are not accessible from outside the class. Some methods can
be exposed as a public interface (API).
NOT accessible from
outside the class!
STILL accessible from
within the class!
NOT accessible from
outside the class!
STILL accessible from
within the class!
👉 Prevents external code from
accidentally manipulating
internal properties/state
👉 Allows to change internal
implementation without the
risk of breaking external code
WHY?
PRINCIPLE 3: INHERITANCE
Polymorphism
Inheritance
Abstraction
Encapsulation
👉 Inheritance: Making all properties and methods of a certain class available
to a child class, forming a hierarchical relationship between classes. This
allows us to reuse common logic and to model real-world relationships.
PARENT CLASS
CHILD CLASS
INHERITANCE
Inherited
OWN methods
and properties
Inherited
CHILD CLASS EXTENDS PARENT CLASS
PRINCIPLE 4: POLYMORPHISM
Inheritance
Polymorphism
Abstraction
Encapsulation
👉 Polymorphism: A child class can overwrite a method it inherited from a
parent class [it’s more complex that that, but enough for our purposes].
PARENT CLASS
CHILD CLASS CHILD CLASS
INHERITANCE INHERITANCE
Own login method,
overwriting login method
inherited from User

More Related Content

Similar to Object Oriented Programming | class | object

the Concept of Object-Oriented Programming
the Concept of Object-Oriented Programmingthe Concept of Object-Oriented Programming
the Concept of Object-Oriented Programming
Aida Ramlan II
 
Basics of object oriented programming c++ [autosaved]
Basics of object oriented programming c++ [autosaved]Basics of object oriented programming c++ [autosaved]
Basics of object oriented programming c++ [autosaved]
RAVIPUROHIT22
 
babsatu-140703233001-phpapp666666601.pdf
babsatu-140703233001-phpapp666666601.pdfbabsatu-140703233001-phpapp666666601.pdf
babsatu-140703233001-phpapp666666601.pdf
kashafishfaq21
 

Similar to Object Oriented Programming | class | object (20)

OOP interview questions & answers.
OOP interview questions & answers.OOP interview questions & answers.
OOP interview questions & answers.
 
the Concept of Object-Oriented Programming
the Concept of Object-Oriented Programmingthe Concept of Object-Oriented Programming
the Concept of Object-Oriented Programming
 
Java chapter 3 - OOPs concepts
Java chapter 3 - OOPs conceptsJava chapter 3 - OOPs concepts
Java chapter 3 - OOPs concepts
 
Oops concepts
Oops conceptsOops concepts
Oops concepts
 
Cs8392 u1-1-oop intro
Cs8392 u1-1-oop introCs8392 u1-1-oop intro
Cs8392 u1-1-oop intro
 
Jump start to OOP, OOAD, and Design Pattern
Jump start to OOP, OOAD, and Design PatternJump start to OOP, OOAD, and Design Pattern
Jump start to OOP, OOAD, and Design Pattern
 
Jump Start To Ooad And Design Patterns
Jump Start To Ooad And Design PatternsJump Start To Ooad And Design Patterns
Jump Start To Ooad And Design Patterns
 
Features of Object Oriented Programming.pptx
Features of Object Oriented Programming.pptxFeatures of Object Oriented Programming.pptx
Features of Object Oriented Programming.pptx
 
Android interview questions
Android interview questionsAndroid interview questions
Android interview questions
 
Android interview questions
Android interview questionsAndroid interview questions
Android interview questions
 
Basics of object oriented programming c++ [autosaved]
Basics of object oriented programming c++ [autosaved]Basics of object oriented programming c++ [autosaved]
Basics of object oriented programming c++ [autosaved]
 
OOPS_Unit_1
OOPS_Unit_1OOPS_Unit_1
OOPS_Unit_1
 
Oops And C++ Fundamentals
Oops And C++ FundamentalsOops And C++ Fundamentals
Oops And C++ Fundamentals
 
OOP-1.pptx
OOP-1.pptxOOP-1.pptx
OOP-1.pptx
 
Bab satu
Bab satuBab satu
Bab satu
 
babsatu-140703233001-phpapp666666601.pdf
babsatu-140703233001-phpapp666666601.pdfbabsatu-140703233001-phpapp666666601.pdf
babsatu-140703233001-phpapp666666601.pdf
 
Need of object oriented programming
Need of object oriented programmingNeed of object oriented programming
Need of object oriented programming
 
Unit v(dsc++)
Unit v(dsc++)Unit v(dsc++)
Unit v(dsc++)
 
Cs8392 oops 5 units notes
Cs8392 oops 5 units notes Cs8392 oops 5 units notes
Cs8392 oops 5 units notes
 
Oop.pptx
Oop.pptxOop.pptx
Oop.pptx
 

Recently uploaded

ppt your views.ppt your views of your college in your eyes
ppt your views.ppt your views of your college in your eyesppt your views.ppt your views of your college in your eyes
ppt your views.ppt your views of your college in your eyes
ashishpaul799
 
會考英聽會考英聽會考英聽會考英聽會考英聽會考英聽會考英聽會考英聽會考英聽會考英聽
會考英聽會考英聽會考英聽會考英聽會考英聽會考英聽會考英聽會考英聽會考英聽會考英聽會考英聽會考英聽會考英聽會考英聽會考英聽會考英聽會考英聽會考英聽會考英聽會考英聽
會考英聽會考英聽會考英聽會考英聽會考英聽會考英聽會考英聽會考英聽會考英聽會考英聽
中 央社
 
Liberal & Redical Feminism presentation.pptx
Liberal & Redical Feminism presentation.pptxLiberal & Redical Feminism presentation.pptx
Liberal & Redical Feminism presentation.pptx
Rizwan Abbas
 

Recently uploaded (20)

Danh sách HSG Bộ môn cấp trường - Cấp THPT.pdf
Danh sách HSG Bộ môn cấp trường - Cấp THPT.pdfDanh sách HSG Bộ môn cấp trường - Cấp THPT.pdf
Danh sách HSG Bộ môn cấp trường - Cấp THPT.pdf
 
TỔNG HỢP HƠN 100 ĐỀ THI THỬ TỐT NGHIỆP THPT VẬT LÝ 2024 - TỪ CÁC TRƯỜNG, TRƯ...
TỔNG HỢP HƠN 100 ĐỀ THI THỬ TỐT NGHIỆP THPT VẬT LÝ 2024 - TỪ CÁC TRƯỜNG, TRƯ...TỔNG HỢP HƠN 100 ĐỀ THI THỬ TỐT NGHIỆP THPT VẬT LÝ 2024 - TỪ CÁC TRƯỜNG, TRƯ...
TỔNG HỢP HƠN 100 ĐỀ THI THỬ TỐT NGHIỆP THPT VẬT LÝ 2024 - TỪ CÁC TRƯỜNG, TRƯ...
 
Basic_QTL_Marker-assisted_Selection_Sourabh.ppt
Basic_QTL_Marker-assisted_Selection_Sourabh.pptBasic_QTL_Marker-assisted_Selection_Sourabh.ppt
Basic_QTL_Marker-assisted_Selection_Sourabh.ppt
 
Research Methods in Psychology | Cambridge AS Level | Cambridge Assessment In...
Research Methods in Psychology | Cambridge AS Level | Cambridge Assessment In...Research Methods in Psychology | Cambridge AS Level | Cambridge Assessment In...
Research Methods in Psychology | Cambridge AS Level | Cambridge Assessment In...
 
ppt your views.ppt your views of your college in your eyes
ppt your views.ppt your views of your college in your eyesppt your views.ppt your views of your college in your eyes
ppt your views.ppt your views of your college in your eyes
 
會考英聽會考英聽會考英聽會考英聽會考英聽會考英聽會考英聽會考英聽會考英聽會考英聽
會考英聽會考英聽會考英聽會考英聽會考英聽會考英聽會考英聽會考英聽會考英聽會考英聽會考英聽會考英聽會考英聽會考英聽會考英聽會考英聽會考英聽會考英聽會考英聽會考英聽
會考英聽會考英聽會考英聽會考英聽會考英聽會考英聽會考英聽會考英聽會考英聽會考英聽
 
....................Muslim-Law notes.pdf
....................Muslim-Law notes.pdf....................Muslim-Law notes.pdf
....................Muslim-Law notes.pdf
 
Mbaye_Astou.Education Civica_Human Rights.pptx
Mbaye_Astou.Education Civica_Human Rights.pptxMbaye_Astou.Education Civica_Human Rights.pptx
Mbaye_Astou.Education Civica_Human Rights.pptx
 
Pragya Champions Chalice 2024 Prelims & Finals Q/A set, General Quiz
Pragya Champions Chalice 2024 Prelims & Finals Q/A set, General QuizPragya Champions Chalice 2024 Prelims & Finals Q/A set, General Quiz
Pragya Champions Chalice 2024 Prelims & Finals Q/A set, General Quiz
 
Liberal & Redical Feminism presentation.pptx
Liberal & Redical Feminism presentation.pptxLiberal & Redical Feminism presentation.pptx
Liberal & Redical Feminism presentation.pptx
 
[GDSC YCCE] Build with AI Online Presentation
[GDSC YCCE] Build with AI Online Presentation[GDSC YCCE] Build with AI Online Presentation
[GDSC YCCE] Build with AI Online Presentation
 
How to Manage Notification Preferences in the Odoo 17
How to Manage Notification Preferences in the Odoo 17How to Manage Notification Preferences in the Odoo 17
How to Manage Notification Preferences in the Odoo 17
 
Word Stress rules esl .pptx
Word Stress rules esl               .pptxWord Stress rules esl               .pptx
Word Stress rules esl .pptx
 
Gyanartha SciBizTech Quiz slideshare.pptx
Gyanartha SciBizTech Quiz slideshare.pptxGyanartha SciBizTech Quiz slideshare.pptx
Gyanartha SciBizTech Quiz slideshare.pptx
 
Open Educational Resources Primer PowerPoint
Open Educational Resources Primer PowerPointOpen Educational Resources Primer PowerPoint
Open Educational Resources Primer PowerPoint
 
Application of Matrices in real life. Presentation on application of matrices
Application of Matrices in real life. Presentation on application of matricesApplication of Matrices in real life. Presentation on application of matrices
Application of Matrices in real life. Presentation on application of matrices
 
Features of Video Calls in the Discuss Module in Odoo 17
Features of Video Calls in the Discuss Module in Odoo 17Features of Video Calls in the Discuss Module in Odoo 17
Features of Video Calls in the Discuss Module in Odoo 17
 
Incoming and Outgoing Shipments in 2 STEPS Using Odoo 17
Incoming and Outgoing Shipments in 2 STEPS Using Odoo 17Incoming and Outgoing Shipments in 2 STEPS Using Odoo 17
Incoming and Outgoing Shipments in 2 STEPS Using Odoo 17
 
2024_Student Session 2_ Set Plan Preparation.pptx
2024_Student Session 2_ Set Plan Preparation.pptx2024_Student Session 2_ Set Plan Preparation.pptx
2024_Student Session 2_ Set Plan Preparation.pptx
 
50 ĐỀ LUYỆN THI IOE LỚP 9 - NĂM HỌC 2022-2023 (CÓ LINK HÌNH, FILE AUDIO VÀ ĐÁ...
50 ĐỀ LUYỆN THI IOE LỚP 9 - NĂM HỌC 2022-2023 (CÓ LINK HÌNH, FILE AUDIO VÀ ĐÁ...50 ĐỀ LUYỆN THI IOE LỚP 9 - NĂM HỌC 2022-2023 (CÓ LINK HÌNH, FILE AUDIO VÀ ĐÁ...
50 ĐỀ LUYỆN THI IOE LỚP 9 - NĂM HỌC 2022-2023 (CÓ LINK HÌNH, FILE AUDIO VÀ ĐÁ...
 

Object Oriented Programming | class | object

  • 2. SECTION LECTURE OBJECT ORIENTED PROGRAMMING (OOP) WITH JAVASCRIPT WHAT IS OBJECT-ORIENTED PROGRAMMING?
  • 3. WHAT IS OBJECT-ORIENTED PROGRAMMING? (OOP) OOP Style of code, “how” we write and organize code 👉 Object-oriented programming (OOP) is a programming paradigm based on the concept of objects; 👉 We use objects to model (describe) real-world or abstract features; 👉 Objects may contain data (properties) and code (methods). By using objects, we pack data and the corresponding behavior into one block; 👉 In OOP, objects are self-contained pieces/blocks of code; 👉 Objects are building blocks of applications, and interact with one another; 👉 Interactions happen through a public interface (API): methods that the code outside of the object can access and use to communicate with the object; 👉 OOP was developed with the goal of organizing code, to make it more flexible and easier to maintain (avoid “spaghetti code”). E.g. user or todo list item E.g. HTML component or data structure Data Behaviour
  • 4. Like a blueprint from which we can create new objects CLASSES AND INSTANCES (TRADITIONAL OOP) CLASS Instance Instance Instance Just a representation, NOT actual JavaScript syntax! JavaScript does NOT support real classes like represented here New object created from the class. Like a real house created from an abstract blueprint ☝ Conceptual overview: it works a bit differently in JavaScript. Still important to understand!
  • 5. THE 4 FUNDAMENTAL OOP PRINCIPLES Abstraction Polymorphism Inheritance Encapsulation The 4 fundamental principles of Object- Oriented Programming 🤔 “How do we actually design classes? How do we model real-world data into classes?”
  • 6. PRINCIPLE 1: ABSTRACTION Polymorphism Inheritance Abstraction Encapsulation 👉 Abstraction: Ignoring or hiding details that don’t matter, allowing us to get an overview perspective of the thing we’re implementing, instead of messing with details that don’t really matter to our implementation. Real phone Abstracted phone Do we really need all these low-level details? Details have been abstracted away
  • 7. PRINCIPLE 2: ENCAPSULATION Polymorphism Inheritance Again, NOT actually JavaScript syntax (the private keyword doesn’t exist) Abstraction Encapsulation 👉 Encapsulation: Keeping properties and methods private inside the class, so they are not accessible from outside the class. Some methods can be exposed as a public interface (API). NOT accessible from outside the class! STILL accessible from within the class! NOT accessible from outside the class! STILL accessible from within the class! 👉 Prevents external code from accidentally manipulating internal properties/state 👉 Allows to change internal implementation without the risk of breaking external code WHY?
  • 8. PRINCIPLE 3: INHERITANCE Polymorphism Inheritance Abstraction Encapsulation 👉 Inheritance: Making all properties and methods of a certain class available to a child class, forming a hierarchical relationship between classes. This allows us to reuse common logic and to model real-world relationships. PARENT CLASS CHILD CLASS INHERITANCE Inherited OWN methods and properties Inherited CHILD CLASS EXTENDS PARENT CLASS
  • 9. PRINCIPLE 4: POLYMORPHISM Inheritance Polymorphism Abstraction Encapsulation 👉 Polymorphism: A child class can overwrite a method it inherited from a parent class [it’s more complex that that, but enough for our purposes]. PARENT CLASS CHILD CLASS CHILD CLASS INHERITANCE INHERITANCE Own login method, overwriting login method inherited from User