OOP_Javascript Flashcards
Why is this course important?
(Hint: Immense career impact)
Why?
A lot of developers write JavaScript applications without properly understanding the inner workings of JavaScript.
Don’t be one of these!
Get a solid foundation of the inner workings of JavaScript
It’s an immense help to your career
What are technical interviewers looking for?
(Hint: Object Oriented Programming)
Understanding of Object Oriented Programming
Why?
makes a candidate stand out!
What are popular interview questions?
Pillars of Object Oriented Programming:
Encapsulation
Abstraction
Inheritance
Polymorphism
What does this course teach?
OOP principles + how to implement in Javascript!
What is procedural programming?
A style of programming
bunch of variables that contain data
a number of functions that act on the data
As program grows, you have functions all over the place
You will copy and paste functions all over the place
If you change one function the others break
Soln?
Object Oriented Programming
What are the benefits of Object Oriented Programming?
- Reduce complexity, increase reusability - group related variables and functions together to reduce complexity + increase reusability in applications and programs (encapsulation)
- Hide complexity - hide complexities from consumers, reducing complexity of applications, increasing speed and safety of programs (abstraction)
- Reduce redundant code - reduce redundant code by allowing objects to inherit code from a parent (Inheritance)
- Eliminate switch cases - eliminate switch cases by allowing objects to override inherited methods (Polymorphism)
What is object-oriented programming?
a very popular style of programming
It’s a model or pattern of programming
centered around objects rather than functions
OOP is not a programming language or tool!
It’s a style or model of programming
many frameworks are built using object oriented programming
HLL support OOP -
C#, Java, Python and Javascript
What problem does object oriented programming solve?
Spagetti code -
procedures (functions) all interconnected
change one function, other’s break
too much interconnection between functions
Soln?
combine functions and data into units (objects)
What problem does encapsulation solve?
(Hint: too much interconnectedness)
Spagetti code
Hint: too much interconnectedness
What problem does abstraction solve?
This helps us reduce impact of change
simpler interface for objects
Making changes to the private method doesn’t cause issues in rest of the applications code because these changes don’t leak to the outside
What problem does inheritance solve?
(Hint: reduce redundant code)
It helps us eliminate redundant code
We can define properties and methods once in a generic object
other objects inherit these properties and methods
What are the two types of inheritance?
Classical vs. prototypical
Javascript doesn’t have classes and inheritance is implemented using prototypical inheritance!
What problem does polymorphism solve?
(Hint: elminate if/else and switch/case statements)
allows us to get rid of switch/case statements
Example:
We can implement a render method in each object
render method will behave differently depending on type of object referencing
What are the topics covered in objects?
Javascript is all about objects:
Creating objects
factoring constructors
adding, removing properties
private properties
getters/setters
How do we define an object?
use let or const
Why?
ES6 scope
don’t use var (scope issues)
What is object literal syntax?
(Hint: avoid for objects with methods)
Don’t use with objects that have behavior
Why?
If changes to a function is required, have to update multiple spots of code
What is an object in Javascript?
collection of key-value pairs
we can have key and value as a function
we can have a key and value as an object
This object has three “members”
If a member is a function we refer to it as a “method.”
the other members are “properties”
What is an object property?
(Hint: object member)
A member of an object that holds a value is called a property
What is an object method?
A function defined inside an object
called a method and is used to define some logic
How can we access an object’s members?
(Hint: dot or bracket)
access values and methods
using the dot notation
Bracket notation
In what ways can we define objects?
using object literals (simple) curly braces
using factories, using constructors
When do we say an object has “behavior”?
If an object has more than one method we say that object has “behavior”
Why is object literal syntax not a good way to create and duplicate an object with behavior?
(Hint: copy code to duplicate)
You will have to copy the exact code to duplicate the object
If there is a bug in the function, you’ll have to change in multiple places
It acts like procedural programming
When is object literal syntax not a problem?
if the object doesn’t have behavior or methods
Only has variables and values
What is the solution to the object literal syntax issue?
Use a factory or constructor function.
Java and C++ developers prefer constructor functions
Why?
Their syntax using the new keyword looks similar to Java
What is a factory function?
Used for creating objects
better than object literal syntax
Why?
reduce redundent code
What is the naming convention for constructor functions?
(Hint: Pascal)
Pascal case
What is the “.this” operator?
references or points to the global object “class” stored in memory
updates the values for that object.
When we use the new operator to call a function, what three things happen?
- New operator creates an empty object
- Sets “this” to point to that object
- Returns the object from this statement
When do we refer to a function as a constructor function?
When we use the .this keyword along with the new operator
we refer to the function as a constructor function.
When do we refer to a function as a factory function?
When we return an object from a function we refer to it as a factor function
Why do C# developers prefer constructor function syntax?
It looks like creating an instance of a class
BUT in Javascript we don’t really have classes.
Which pattern in Javascript is best for creating an object?
(Hint: Factory vs. Constructor)
Neither! They both work.
Be familiar with both ways.
- Factory
- Constructor
What is a constructor property?
Every object has a constructor property that references function used to create object
Ex.
When we build an object it has a constructor property which is a function that is used to make the object.
Object literal syntax - internally JS engine uses Object constructor function
Factory Function - internally JS engine uses Object constructor function
Constructor Function - uses constructor function defined to create object
What happens when we declare an object using object literal syntax?
(Hint: Constructor function)
JS engine internally uses the object constructor function
What are functions in Javascript?
in Javascript functions are objects!
The object (function) has properties and methods!
How are value type and reference type variables different?
Absolutely important for understanding prototypes
value types copy data directly into new variables (making them completely independent)
reference types are copied by their reference (making them point to same value)
How are reference types different than value types?
(Hint: copied by reference vs. independent copy of value)
Passing a value type vs. reference type to a function:
value type - arg value is copied independently into local variable, both point to separate variables
reference type - obj reference copied into local variable, both point to same object
What is the classical inheritance definition?
solves redundent code
allows us to reduce the impact of change
allows us to reduce redundent code
What don’t we have in Javascript?
(Hint: classes)
We only have objects
prototypical inheritance vs. classical inheritance
What are the two types of inheritance?
(Hint: classical vs. prototypical)
Interview question:
classical - java, c++, python with classes
prototypical - javascript with no classes
What is a prototype?
(Hint: parent)
a parent
prototypical inheritance -
parent’s members linked to child object
Ex.
x references BaseObject (prototype)
x object inherts all members
y references BaseObject (prototype)
therefore,
there is a single instance of the BaseObject in memory
What is multi-level inheritance?
(Hint: multiple prototypes)
When an object has multiple prototypes (parents)
myArray []
inherits from [] prototype
also inherits from Object prototype
What are property descriptors?
(Hint: Prototype members have attributes)
New Objects inherit (point to) Base Object Prototype
Cannot iterate all properties in Base Object Prototype
Why?
Property Descriptors
Ex. .toString ( ) descriptors
configurable (true) : can delete member
enumerable (false) : cannot enumerate
writable (true) : can override implementation
How can we define a property descriptor?
(Hint: give a member property attributes)
By Default:
configurable (true) : can delete member
enumerable (false) : can enumerate
writable (true) : can override implementation
Do constructor functions have prototypes?
Yes,
Functions are objects
Constructor Prototype is baseObject prototype
Ex. Array Constructor under hood, references Array Base Prototype, references Object Base Prototype
What’s the problem with this implementation?
(Hint: memory allocation)
.draw ( ) is an instance member
a new copy of the draw method is instantiated everytime we create a new circle object
that wastes a lot of memory!
In real world, would have multiple instance methods for thousands of objects copied!
Soln?
Prototype members
Add draw ( ) method to prototype (single instance in memory)
What two kinds of members do we have in Javascript?
(Hint: instance vs. prototypical)
Instance members - accessed via object, unique instance per object in memory
Prototypical members - accessed via prototype, single instance in memory
Can access instance members in prototype function
Can access prototype members in instance function
How do we iterate instance vs. prototype members?
(Hint: Object.keys, for in loop)
What should we avoid doing in Javascript?
(Hint: modifying the built in Objects)
Javascript is a dynamic language
But…
Don’t modify objects you don’t own
Avoid modifying built in objects in Javascript
don’t remove existing properties/methods
don’t override methods
don’t add new methods/properties
Why?
If using a third party library, chances are someone already extended these objects and your changes will cause issues
future Javascript versions may have updates to these objects
What shouldn’t we do?
(Hint: optimize without consideration)
adding instance members to an object’s prototype is an optimization technique
Do not do it if the object doesn’t require multiple instances in memory
Ex. Stopwatch
only requires one instance in memory
moving instance members to prototype caused issues
putting methods in prototypes was bad idea
we knew we wouldn’t have thousands of stopwatch objects in memory
we optimized without considerating we wouldn’t have many instances in memory and caused issues with abstraction principle
How can we write code to have an object inherit from a given prototype?
(Hint: prototypical inheritance)
Only inherits prototypical members (not instance members)
What is a best practice for resetting the prototype of an object (prototypical inheritance)?
(Hint: reset the constructor)
Reset the constructor
How do we call the super constructor?
(Hint: parent’s constructor)
.call method
How can we write code that allows us to implement prototypical inheritance?
(Hint: encapsulate in a method)
How do we override a method in a prototype?
How?
JS engine walks up prototypical chain and picks first implementation
duplicate method on child object is used
How do we implement polymorphism in Javascript?
Very powerful concept in object oriented programming
What are some of the problems with inheritance?
Don’t overuse this
Avoid creating inheritance hierarchies
Don’t go more than one level
Keep it simple
Favor composition over inheritance
Soln?
Mixins = composition in Javascript
How can we write code to accomplish composition in Javascript?
(Hint: Mixins)
Object.assign ( )
How can we write code to inherit from an instance member vs. prototypical member?
(Hint: Child.prototype = new Parent ( ) )
What do we have in ES6 (Javascript 2015)?
(Hint: Syntactical sugar over prototypical inheritance)
Classes
Not classes like Java
Rather,
Syntactical sugar over prototypical inheritance
Why?
It’s cleaner and simpler
Implementing inheritance is simplier
What is the critical difference between function expressions and function declarations?
(Hint: Hoisting)
What is the difference between static and instance methods?
Instance methods are available on the object (specific to object)
Static methods are available on the class itself (utility methods)
When using function calls, what does the .this keyword point to?
(Hint: draw() vs. c.draw() )
Global object
Why?
new operator creates new obj, points .this to it
function call w/o new operator points to global obj
What does ‘use strict’ do to the ‘this’ keyword?
(Hint: restricts this from pointing to global object)
restricts .this from pointing to global object
Why?
it’s bad practice to modify the global object
By default, how are the bodies of our ES6 classes executed?
(Hint: this keyword?)
in ‘use strict’
prevents this keyword from pointing to global object
What are the approaches for implementing private methods in our ES6 classes?
(Hint: abstract in ES6 using symbols, weakmaps)
Symbols
weakmaps
What are WeakMaps?
(Hint: HashMaps that store our private fields)
hashmaps
(Key = Object, Value = anything)
we can use to store ‘private’ members
Why?
takes them off an object instance
How do we implement getters/setters using ES6 classes?
How do we implement inheritance in ES6?
(Hint: extends keyword)
Don’t have to reset constructor
How do we override a method using ES6?
(Hint: JS engine walks up tree from Child to parent)
How do we write code to implement a stack in Javascript?
(Hint: weakMaps for items array)
What is a module?
(Hint: split code into files, each file is a module)
ES6 modules
Splitting code into multiple files
vs.
one long file with source code
Benefits of Modules:
Maintainability
code is better organized, helping us maintain it better
Reuse
can reuse one or more modules in different parts of application or different applications
Abstract
can hide code and only expose essentials
Ex.
hide weakMap only expose a class from a module
What are CommonJS modules?
Used in Node.js
export
module.exports.Class = ClassName
import
const Class = require (‘./ClassName’)
What are ES6 modules?
Used in browsers (React)
use export keyword
What are ES6 tooling?
(Hint: Transpiler, Bundler)
important for browswer applications only
not if using node.js
Transpiler
translater and compiler - give it modern Javascript code, converts to code all browser can understand (ex. Babble)
Bundler -
combines all javascript file into a single file (bundle)
Ex. Webpack -
combines in single file, minify code, uglify code by shortening names of variables, reduces size of code to client
How do we install babel?
(Hint: babel converts modern JS to fit all browsers)
babel-cli@6.26.0 : command line interface
babel-core@6.26.0 : code to transpose modern javascript into all applicable javascript (browswer) implemented
babel-present-env@1.6.1 : all new features in ES6 is a package, combination of all plugins, supports all functions (arrows, classes, etc)
Ex. compiled down index.js into build folder using babel
real applications, before putting in a bundle, compile each file in babel then use webpack
What is the workflow we should use on day to day?
Webpack:
sudo npm i -g webpack-cli@2.0.14
webpack-cli init
follow init instructions
