Object-oriented

Programming
(or not, that is the question)

November 2022

CONFIDENTIAL | © 2022 EPAM Systems, Inc.

OOP MENU – PLEASE SELECT OR CLICK TO START LECTURE

If you have a classic OOP (C++, C#, Java)

background, choose Earth and go to the If you just want to do it right,
section
Supergreen you’d need the Fire and please
check
Multi-pass

If you are interested about If you would like to know what OOP
OOP in JavaScript, choose was intended to, choose Water and
Wind and meet with the see the
magnificent Divine Light
Diva

START LECTURE
Introduction

How to draw write programs in OOP?

Well, we could follow the old and trustworthy

approach…

… or, we could figure it out, what is OOP at all?

While this is a really complex topic, at the end
of this lecture you should be prepared not just
for interview questions, but probably you can
draw the owl yourself!
step 1. step 2.
check OOP examples in any … then add some details in
programming book… the production code!

CONFIDENTIAL | © 2022 EPAM Systems, Inc. 3

 Objects can be considered
as data and behavior enclosed
together
Objects are analogous to biological
cells.
They form a network (another
analogy for objects is the computers of a
network) and communicates with
messages with each other.
That’s all: object is merely a concept
– objects in any languages are just
an implementation of this idea.
a tree traversal object

CONFIDENTIAL | © 2022 EPAM Systems, Inc. 4

Object = data + behavior

data (state)
behavior

is this a pure function?

CONFIDENTIAL | © 2022 EPAM Systems, Inc. 5

 Zorg is trying to report on why the unit tests fail again – without any reasonable cause

The subtle detail there about that method is not being pure means a lot when unit tests are considered.
And unit tests are always considered. Theoretically, however, it is possible to write always green and
therefore perfectly pointless unit tests, but even Zorg is not that evil – you should not be, either.

CONFIDENTIAL | © 2022 EPAM Systems, Inc. 6

 SUPERGREEN – THE CLASSIC OOP

CONFIDENTIAL | © 2022 EPAM Systems, Inc. 7

 Supergreen – classic OOP

Let’s start with the most useful

knowledge you’d need in interviews: the
OOP concepts

1. Encapsulation
2. Inheritance
3. Polymorphism OOP development is always SOLID

no kidding, you
should read this
If you open any book (the good ones, with the owl
examples), the chance that you’ll run into these terms, is
100%. So, let’s take aside these first*!

* from this start, as you may already guess, these are not that important for us in JavaScript – still, you will be asked! ¯\_(ツ)_/¯

CONFIDENTIAL | © 2022 EPAM Systems, Inc. 8

Encapsulation

There are many different definitions for encapsulation:

a) enclosing and decoupling the data from this part requires private fields
outside (protecting from accessing and modifying)
b) bundling the data and the behavior
together (variables and methods)
c) a + b together
But decoupling means much more than
simply separating the data (and methods)
from outside
Let’s say an object receives a message that
sender would like to access / modify some data:
the sender can ask this, but how and when the
object reacts to it, it is the concern of the object.
objects could be lazy

CONFIDENTIAL | © 2022 EPAM Systems, Inc. 9

 Encapsulation

Encapsulation is a concept
an object “class”:
OOP is not about the data + behavior
implementation details. Here, we
implemented proper encapsulation with data is private and
simply a closure*. decoupled

No ES6 classes, no constructor it is the concern of

the object how and
functions were involved.
when to react we reveal speak as a
✻✻✻
public method
Encapsulation, however, is a
general concept in programming and is
object “instances”
not unique for OOP at all.

Any module system, by definition, is

an implementation of the encapsulation.

* this is the Reveal Module Pattern

CONFIDENTIAL | © 2022 EPAM Systems, Inc. 10

 the Reveal Module Pattern is Zorg’s favourite question in interviews – look at those eyes, I’d learn this pattern…

CONFIDENTIAL | © 2022 EPAM Systems, Inc. 11

Inheritance

With inheritance we can extend the

original object with behavior and with data.
Again, this is not the prototypal inheritance! It is just
a simple implementation of a concept.

owl inherit
everything what
Animal has

now our owl can fly as well

CONFIDENTIAL | © 2022 EPAM Systems, Inc. 12

Inheritance

Postal
Animal Animal Animal Service

Postal
Owl Bird Bird Worker

Owl Owl

single multi-level multiple

inheritance inheritance inheritance

CONFIDENTIAL | © 2022 EPAM Systems, Inc. 13

 a developer realising that the project’s codebase relies on multi-level inheritance heavily

Remember: as peace, inheritance is a concept merely. Whether it is built-in and in what form to the
language is another question. While multiple inheritance is not part of the JavaScript, it can be
implemented in many different ways. Should be?

Let’s ask this way: should you rely on inheritance at all? Or maybe composition would be better?

CONFIDENTIAL | © 2022 EPAM Systems, Inc. 14

Polymorphism
Polymorphism is when you believe something about
a method, but that will act completely differently a
single entity could have different forms
(poly = many, morph = form)
Polymorphism is a powerful concept, however, as the entities
could be overridden in run-time, it could lead to a kind of
guesswork.

That being said, as a concept, JavaScript relies on it,

think about the “+” operator. It behaves completely we override the
differently with numbers and strings (operator overloading). original behavior

no wonder that the owl remains

silent: new method cannot access
the _sound state

CONFIDENTIAL | © 2022 EPAM Systems, Inc. 15

 scrum teams trying to protect the project codebase from a polymorphic code

Polymorphism, however, is not a problem, if the code does not use inheritance.

CONFIDENTIAL | © 2022 EPAM Systems, Inc. 16

 Supergreen, the classic OOP – wrap-up

The classic OOP concepts (encapsulation,

inheritance and polymorphism) are a bit of strange
beings
In one hand, these concepts are not unique to OOP, on
the other hand, you’d need to learn and utilize a handful
set of principles* as a safeguard, to that extent, where
(inheritance being eliminated) there nothing remains from
the original concepts and objects will be used simply programming books explaining the benefits of OOP
containers (modules) for encapsulating data.
Let’s move to the next part, though, and see why it
was invented in the first place?

* like SOLID, composition over inheritance, even the design patterns were introduced to provide workarounds for OOP issues

CONFIDENTIAL | © 2022 EPAM Systems, Inc. 17

 DIVINE LIGHT – THE ORIGINS OF OOP

CONFIDENTIAL | © 2022 EPAM Systems, Inc. 18

 Divine Light – the origins of OOP

This will be short – as nobody thinks about OOP

this way…

except of the inventor of the term: Object-Oriented

Programming.
The term: OOP is coined to Alan Kay, however, the original
concept was not about inheritance (you see?), but about
the messaging*:
“OOP to me means only messaging, local retention
and protection and hiding of state-process, and
extreme late- binding of all things.”

* “I like to say that JavaScript is Smalltalk’s revenge on the world’s misunderstanding of OOP.”

CONFIDENTIAL | © 2022 EPAM Systems, Inc. 19

OOP – an idea for building UI

This image explains a lot

Smalltalk was originally designed for UI. And in a UI
interface everything is really an object. It even makes
sense to have inheritance and polymorphism (think
about zillion versions of buttons), and components are
communicating via events (messages).
OOP is natural in UI development and is heavily used
for that nowadays – for a reason. The early history of Smalltalk

this is the real area where OOP shines: on the user

interface objects are conceptually real objects

CONFIDENTIAL | © 2022 EPAM Systems, Inc. 20

 D I VA – O O P I N JAVA S C R I P T

CONFIDENTIAL | © 2022 EPAM Systems, Inc. 21

Diva – OOP in JavaScript

This is a simple field – and extremely complex at

the same time
From now on we’ll avoid all of the dark patters and will
focus on the clean JavaScript features. Remember, all
these can (and usually) used in different ways, combined
with each other, so the possibilities you can go wrong are the ZF-1 prototypal inheritance in JavaScript

almost infinite.

However, we have to start with…

CONFIDENTIAL | © 2022 EPAM Systems, Inc. 22

This

Let’s be clear: this is a nasty beast in JavaScript

The main problem with it that is does have different faces.
A real polymorphic creature. It can have completely
different meanings in different situations.

For example:

• in Global context
• in Function context
• in Function context – strict mode
• in a constructor
• in a constructor, called without new
• in a constructor, called without new – strict mode
• in a method call
• in a function call (a method assigned to a variable)
• in Arrow functions
• …

this character called ellipsis (almost like the rest syntax)

and it is very useful to refer for an almost infinite list of cases
CONFIDENTIAL | © 2022 EPAM Systems, Inc. 23
this – Global and Function context

in Global context
(equals to the global object)

in Function context
(equals to the global object)

in Function context - strict mode

(equals to undefined)

CONFIDENTIAL | © 2022 EPAM Systems, Inc. 24

this – in a constructor

refers to the Object

calling the constructor without new

oops!

much better in strict mode

CONFIDENTIAL | © 2022 EPAM Systems, Inc. 25

this – in a method call

refers to the Object

assigning a method to a variable

this is a killer one

CONFIDENTIAL | © 2022 EPAM Systems, Inc. 26

this – in Arrow function

Okay, probably that’s enough…

Please explore the remaining cases, there is many!

in a method call (with function)

this refers to the Object

in a method call (with arrow function) it refers to

the parent context (here: the Global)

IIFE still a function call, referring to the

Global context

in an arrow function it always refers to the parent

CONFIDENTIAL | © 2022 EPAM Systems, Inc. 27

Function.prototype.bind

Bind returns a new function, where we can

set the this as we want.

we bind the this

back to the Object

Object

a function call =

Global whatever we bound it

CONFIDENTIAL | © 2022 EPAM Systems, Inc. 28

Function.prototype.call – calls with a new this

Call is similar to bind, but

it calls the function as well
Please don’t mismatch these,
these are very frequently
asked by Zorg!

of course, we have a third one here:

Function.prototype.apply
the difference is in how these accept the
arguments, please check the docs!

CONFIDENTIAL | © 2022 EPAM Systems, Inc. 29

How to create objects

There are many ways to create an object in JavaScript

And while the constructor function and the class declaration are fairly equivalent, the
object literal is rarely used in OOP as that is a single instance.

object literal constructor function class declaration

CONFIDENTIAL | © 2022 EPAM Systems, Inc. 30

Prototypal inheritance

Objects are inherited

through the prototype
chain

constructor function class declaration

CONFIDENTIAL | © 2022 EPAM Systems, Inc. 31

 M U LT I - PA S S – H OW TO U S E O O P

CONFIDENTIAL | © 2022 EPAM Systems, Inc. 32

 We already covered everything here: in Front-end development OOP mainly used as a container for
components – heavy OOP code is rarely seen here. It is used to say that it is possible to write good OOP
code if you… [and a long list of criteria presented here], and that is true: it is possible…
That being said, even with simple objects you can do it catastrophically wrong, if you rely on state variables
a lot. Please use pure functions and methods even in objects, it will be your multipass for programming –
the entry point for both worlds.

CONFIDENTIAL | © 2022 EPAM Systems, Inc. 33

 T H A N K YO U !

CONFIDENTIAL | © 2022 EPAM Systems, Inc. 34