OOP_Javascript

Question 1

Why is this course important?

(Hint: Immense career impact)

Answer 1

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

Question 2

What are technical interviewers looking for?

(Hint: Object Oriented Programming)

Answer 2

Understanding of Object Oriented Programming

Why?

makes a candidate stand out!

Question 3

What are popular interview questions?

Answer 3

Pillars of Object Oriented Programming:

Encapsulation

Abstraction

Inheritance

Polymorphism

Question 4

What does this course teach?

Answer 4

OOP principles + how to implement in Javascript!

Question 5

What is procedural programming?

Answer 5

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

Question 6

What are the benefits of Object Oriented Programming?

Answer 6

1. Reduce complexity, increase reusability - group related variables and functions together to reduce complexity + increase reusability in applications and programs (encapsulation)
2. Hide complexity - hide complexities from consumers, reducing complexity of applications, increasing speed and safety of programs (abstraction)
3. Reduce redundant code - reduce redundant code by allowing objects to inherit code from a parent (Inheritance)
4. Eliminate switch cases - eliminate switch cases by allowing objects to override inherited methods (Polymorphism)

Question 7

What is object-oriented programming?

Answer 7

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

Question 8

What problem does object oriented programming solve?

Answer 8

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)

Question 9

What problem does encapsulation solve?

(Hint: too much interconnectedness)

Answer 9

Spagetti code

​Hint: too much interconnectedness

Question 10

What problem does abstraction solve?

Answer 10

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

Question 11

What problem does inheritance solve?

(Hint: reduce redundant code)

Answer 11

It helps us eliminate redundant code

We can define properties and methods once in a generic object

other objects inherit these properties and methods

Question 12

What are the two types of inheritance?

Answer 12

Classical vs. prototypical

Javascript doesn’t have classes and inheritance is implemented using prototypical inheritance!

Question 13

What problem does polymorphism solve?

(Hint: elminate if/else and switch/case statements)

Answer 13

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

Question 14

What are the topics covered in objects?

Answer 14

Javascript is all about objects:

Creating objects

factoring constructors

adding, removing properties

private properties

getters/setters

Question 15

How do we define an object?

Answer 15

use let or const

Why?

ES6 scope

don’t use var (scope issues)

Question 16

What is object literal syntax?

(Hint: avoid for objects with methods)

Answer 16

Don’t use with objects that have behavior

Why?

If changes to a function is required, have to update multiple spots of code

Question 17

What is an object in Javascript?

Answer 17

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”

Question 18

What is an object property?

(Hint: object member)

Answer 18

A member of an object that holds a value is called a property

Question 19

What is an object method?

Answer 19

A function defined inside an object

called a method and is used to define some logic

Question 20

How can we access an object’s members?

(Hint: dot or bracket)

Answer 20

access values and methods

using the dot notation

Bracket notation

Question 21

In what ways can we define objects?

Answer 21

using object literals (simple) curly braces

using factories, using constructors

Question 22

When do we say an object has “behavior”?

Answer 22

If an object has more than one method we say that object has “behavior”

Question 23

Why is object literal syntax not a good way to create and duplicate an object with behavior?

(Hint: copy code to duplicate)

Answer 23

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

Question 24

When is object literal syntax not a problem?

Answer 24

if the object doesn’t have behavior or methods

Only has variables and values

Question 25

What is the solution to the object literal syntax issue?

Answer 25

Use a **factory or constructor** function. **Java and C++** developers prefer **constructor functions** **Why?** **Their syntax** using the **new keyword** looks **similar to Java**

Question 26

**What** is a **factory function**?

Answer 26

Used for **creating objects** better than **object literal syntax** **Why?** reduce **redundent code**

Question 27

**What** is the **naming convention** for **constructor functions?** ## Footnote **(Hint: Pascal)**

Answer 27

**Pascal case**

Question 28

What is the ".this" operator?

Answer 28

references or points to the global object "class" stored in memory updates the values for that object.

Question 29

When we use the new operator to call a function, what three things happen?

Answer 29

1. New operator creates an empty object 2. Sets "this" to point to that object 3. Returns the object from this statement

Question 30

When do we refer to a function as a constructor function?

Answer 30

When we use the .this keyword along with the new operator we refer to the function as a constructor function.

Question 31

When do we refer to a function as a factory function?

Answer 31

When we return an object from a function we refer to it as a factor function

Question 32

Why do C# developers prefer constructor function syntax?

Answer 32

It looks like creating an instance of a class BUT in Javascript we don't really have classes.

Question 33

**Which** pattern in **Javascript** is best for **creating an object**? (**Hint**: Factory vs. Constructor)

Answer 33

Neither! They both work. Be familiar with both ways. 1. Factory 2. Constructor

Question 34

**What** is a **constructor property**?

Answer 34

**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

Question 35

**What happen**s when we **declare an objec**t using **object literal syntax?** (Hint: **Constructor function**)

Answer 35

**JS engine** internally uses the **object constructor function**

Question 36

**What** are **functions in Javascript?**

Answer 36

in Javascript **functions are objects!** The object (function) has **properties and methods!**

Question 37

**How** are **value type** and **reference type** variables **different**?

Answer 37

**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**)

Question 38

How are **reference types** different than **value types**? (Hint: **copied by reference** vs. **independent copy of value**)

Answer 38

**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**

Question 39

**What** is the **classical inheritance definition**?

Answer 39

solves **redundent code** allows us to **reduce the impact of change** allows us to **reduce redundent code**

Question 40

What **don't we have** in **Javascript?** | (**Hint:** classes)

Answer 40

We **only have objects** **prototypical inheritance** vs. **classical inheritance**

Question 41

**What** are the **two types of inheritance**? | (Hint: classical vs. prototypical)

Answer 41

**Interview question**: **classical** - java, c++, python **with classes** **prototypical** - javascript with **no classes**

Question 42

**What** is a **prototype**? | (Hint: **parent**)

Answer 42

**a parent** **prototypical inheritance** - **parent's members** linked t**o 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**

Question 43

**What** is **multi-level** **inheritance?** | (**Hint:** multiple **prototypes**)

Answer 43

**When** an object has **multiple prototypes** (parents) **myArray []** **inherits** from **[] prototype** **also inherits** from **Object prototype**

Question 44

**What** are **property descriptors?** (**Hint**: **Prototype members** have **attributes**)

Answer 44

**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

Question 45

**How** **can** we **define a property descriptor?** (**Hint**: give a **member property** attributes)

Answer 45

**By Default:** **configurable (true)** : can delete member **enumerable (false)** : can enumerate **writable (true)** : can override implementation

Question 46

**Do constructor functions** have **prototypes**?

Answer 46

**Yes**, **Functions** are **objects** **Constructor Prototype** is **baseObject prototype** **Ex.** **Array Constructor** under hood, references **Array Base Prototype**, references **Object Base Prototype**

Question 47

**What's** the **problem with this implementation**? (Hint: **memory allocation**)

Answer 47

**.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)**

Question 48

What **two kinds of members** do we **have in Javascript**? | (**Hint:** instance vs. prototypical)

Answer 48

**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**

Question 49

**How** do we **iterate instance** vs. **prototype members**? (Hint: **Object.keys**, for in loop)

Answer 49

Question 50

**What** should we **avoid** doing in **Javascript**? (Hint: **modifying** the **built in Objects**)

Answer 50

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**

Question 51

What **shouldn't we do**? | (**Hint**: optimize **without consideration**)

Answer 51

**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**

Question 52

**How** can we **write code** to have an **object inherit** from a **given prototype**? (**Hint**: prototypical inheritance)

Answer 52

**Only** inherits **prototypical members** (**not instance members**)

Question 53

**What** is a **best practice** for **resetting the prototype** of **an object** (**prototypical inheritance**)? (**Hint**: reset the constructor)

Answer 53

**Reset the constructor**

Question 54

**How** do we **call the super constructor?** | (**Hint**: parent's constructor)

Answer 54

**.call** method

Question 55

**How** can we **write code** that **allows us** to implement **prototypical inheritance**? (Hint: **encapsulate** in a method)

Answer 55

Question 56

**How** do we **override a method** in a **prototype**?

Answer 56

**How**? **JS engine** walks up **prototypical chain** and **picks first implementation** duplicate method on child object is used

Question 57

**How** do we **implement polymorphism** in **Javascript**?

Answer 57

**Very** **powerful concept** in **object oriented programming**

Question 58

**What** are **some** of the **problems with inheritance?**

Answer 58

Don't **overuse this** ## Footnote **Avoid creating inheritance hierarchies** **Don't go more than one level** **Keep it simple** **Favor composition over inheritance** **Soln?** **Mixins = composition in Javascript**

Question 59

**How** can we **write code** to **accomplish** composition in **Javascript**? (**Hint**: Mixins)

Answer 59

**Object.assign** ( )

Question 60

**How** can **we write code** to **inherit from an instance member** vs. **prototypical member**? (Hint: **Child.prototype = new Parent ( )** )

Answer 60

Question 61

**What** do we have in **ES6** (**Javascript 2015)**? (**Hint:** **Syntactical sugar** over **prototypical inheritance**)

Answer 61

**Classes** **Not** classes like **Java** **Rather,** **Syntactical sugar** over **prototypical inheritance** **Why?** **It's cleaner and simpler** **Implementing inheritance is simplier**

Question 62

**What** is the **critical difference** between **function expressions** and **function declarations**? (**Hint:** Hoisting)

Answer 62

Question 63

**What** is the difference between **static and instance** methods?

Answer 63

**Instance methods** are **available on the object (specific to object)** **Static methods** are available on the **class itself (utility methods)**

Question 64

**When** using **function calls,** what does the **.this keyword** **point to**? (**Hint:** draw() vs. c.draw() )

Answer 64

**Global object** **Why?** **new** operator **creates new obj,** points **.this to it** function call **w/o new operator** points to **global obj**

Question 65

**What** does '**use strict**' do to the '**this' keyword**? (**Hint**: restricts **this** from **pointing to global object**)

Answer 65

**restricts .this** from pointing to **global object** **Why?** it's **bad practice** to **modify the global object**

Question 66

**By default**, how are the **bodies of our ES6 classes** executed? (Hint: **this** keyword?)

Answer 66

in **'use strict'** prevents **this keyword** from **pointing to global object**

Question 67

**What** are the **approaches** for implementing **private methods** in our **ES6 classes**? (**Hint:** abstract in ES6 using **symbols, weakmaps**)

Answer 67

Symbols weakmaps

Question 68

**What** are **WeakMaps**? (**Hint:** **HashMaps** that **store** our **private fields**)

Answer 68

**hashmaps** (**Key = Object**, **Value = anything**) we **can use** to store **'private' members** **Why?** **takes them** off **an object instance**

Question 69

**How** do we **implement getters/setters** using **ES6 classes**?

Answer 69

Question 70

**How** do we **implement inheritance** in ES6? | (**Hint**: extends keyword)

Answer 70

**Don't** have to **reset constructor**

Question 71

**How** do we **override a method** using **ES6**? (**Hint**: **JS engine** walks up tree from **Child to parent**)

Answer 71

Question 72

**How** do we **write code** to **implement** a **stack** in **Javascript**? (**Hint**: **weakMaps** for **items array**)

Answer 72

Question 73

**What** is a **module**? (**Hin**t: **split** code into **files,** each file is **a module**)

Answer 73

**ES6 modules** **Splitting cod**e 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**

Question 74

**What** are **CommonJS** **modules**?

Answer 74

**Used** in **Node.js** export **module.exports.Class = ClassName** import **const Class = require ('./ClassName')**

Question 75

**What** are **ES6 modules**?

Answer 75

**Used** in **browsers** (React) use **export** keyword

Question 76

**What** are **ES6 tooling**? **(Hint**: Transpiler, Bundler**)**

Answer 76

**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

Question 77

**How** do we **install babel**? (**Hint**: babel **converts modern JS** to **fit all browsers**)

Answer 77

**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**

Question 78

**What** is the **workflow** we should **use on day to day?**

Answer 78

**Webpack**: sudo npm **i -g webpack-cli@2.0.14** **webpack-cli init** **follow init instructions**