Javascript - OOP Part 2
Leon Noel
![](https://s3.amazonaws.com/media-p.slid.es/uploads/549074/images/7626184/Learn_with_Leon_v2__bonus_.png)
#100Devs
Cut class 'cause it wasn't 'bout cash
School wasn't no fun, couldn't bring my gun
Know a change gon' come like Obama 'nem say
But they shooting everyday 'round my mama 'nem way
Agenda
-
Questions?
-
Let's Talk - #100Devs
-
Learn - Objects
-
Learn - Basic OOP Principles
-
Do - Work In Teams: The Four Pillars
-
Do - Work In Teams: Tic-tac-toe
-
Homework - Object City Yall
Questions
About last class or life
![](https://s3.amazonaws.com/media-p.slid.es/uploads/549074/images/7634660/how-dare.gif)
Checking In
![](https://media2.giphy.com/media/BmmfETghGOPrW/giphy.gif)
Like and Retweet the Tweet
!checkin
!newsletter
![](https://media3.giphy.com/media/YypqAhlDKiFJknPbnt/giphy.gif)
Networking - Next Week
![](https://media1.giphy.com/media/3aGZA6WLI9Jde/giphy.gif)
Client Deadline: March 5th
![](https://media2.giphy.com/media/1333xc9RhiyGaY/giphy.gif)
Client Alternatives
![](https://media3.giphy.com/media/3o751Yxe9UjX26BZbG/giphy.gif)
Grassroots Volunteer*
![](https://media4.giphy.com/media/106QCYtKPDeIjm/giphy.gif)
Free Software / Open Source
![](https://media1.giphy.com/media/3og0ICG4WxdKSRzE3K/giphy.gif)
GIT BOWL
![](https://media0.giphy.com/media/cnhpl4IeYgU7MCBdV2/giphy.gif)
SUNDAY
1:00pm EST
![](https://s3.amazonaws.com/media-p.slid.es/uploads/549074/images/9534315/Screen_Shot_2022-05-03_at_11.58.03_AM.png)
Never Miss The Stream Team
![](https://s3.amazonaws.com/media-p.slid.es/uploads/549074/images/9534329/Screen_Shot_2022-05-03_at_12.10.28_PM.png)
Welcome, verolafox
![](https://media3.giphy.com/media/100PgquHm9j3sQ/giphy.gif)
Friday @ 11:00am ET!
Objects
What are objects?
USE
UNDERSTAND
BUILD
Finna Make Sum Nerds Angry
![](https://media0.giphy.com/media/Xbh3RSUbOpH1u/giphy.gif)
Objects
-
Objects are a collection of variables and functions!
-
Objects represent the attributes and behavior of something used in a program
-
Object variables are called properties and object functions are called methods
-
Objects store "keyed" collections
Think of a physical object
![](https://s3.amazonaws.com/media-p.slid.es/uploads/549074/images/7782996/pepesilvia.jpg)
What are it's attributes and behaviors?
How about a stopwatch
![](https://s3.amazonaws.com/media-p.slid.es/uploads/549074/images/7783007/stopwatch.jpg)
What are its properties and methods?
Stopwatch Object
let stopwatch = {}
stopwatch.currentTime = 12
stopwatch.tellTime = function(time){
console.log(`The current time is ${time}.`)
}
stopwatch.tellTime(stopwatch.currentTime)
Notation?
Objects
What if we want to make
a lot of objects?
How much money you got? How many problems you got? How many people done doubted you? Left you out to rot?
Car Factory?
![](https://s3.amazonaws.com/media-p.slid.es/uploads/549074/images/7783525/car-factory.jpg)
Constructors then Classes
Car Factory
Constructor
function MakeCar(carMake,carModel,carColor,numOfDoors){
this.make = carMake
this.model = carModel
this.color = carColor
this.doors = numOfDoors
this.honk = function(){
alert('BEEP BEEP FUCKER')
}
this.lock = function(){
alert(`Locked ${this.doors} doors!`)
}
}
let hondaCivic = new MakeCar('Honda','Civic','Silver', 4)
let teslaRoadster = new MakeCar('Tesla','Roadster', 'Red', 2)
Car Factory
Look Ma! New syntax!
class MakeCar{
constructor(carMake,carModel,carColor,numOfDoors){
this.make = carMake
this.model = carModel
this.color = carColor
this.doors = numOfDoors
}
honk(){
alert('BEEP BEEP FUCKER')
}
lock(){
alert(`Locked ${this.doors} doors!`)
}
}
let hondaCivic = new MakeCar('Honda','Civic','Silver', 4)
let teslaRoadster = new MakeCar('Tesla','Roadster', 'Red', 2)
Classes are like templates for objects!
BUT WHY?
![](https://media3.giphy.com/media/fGOjgWRzQkC2sHHnq7/giphy.gif)
Why Use Objects?
Why Would We Need A Factory?
What if there was a system, a paradigm, a set of rules, an agreed upon way to structure our code that:
Made it easier to add new stuff
Made it easier to read through what was already coded
And made it so you were not afraid to make changes
Music & Light Warning - Next Slide
OOP BABY
![](https://media1.giphy.com/media/3o7qDEq2bMbcbPRQ2c/giphy.gif)
OBJECT ORIENTED PROGRAMING
![](https://media4.giphy.com/media/fe3Rwmc2bBulG/giphy.gif)
Let's See Some Code
let hourlyRate = 250
let hours = 160
let taxRate = .35
function calculateProfit(rate, numOfHours, taxes){
return rate * numOfHours * (1 - taxes)
}
let profit = calculateProfit(hourlyRate, hours, taxRate)
console.log(profit)
Is it easy to add new features and functionality?
let hourlyRate = 250
let hours = 160
let taxRate = .35
function calculateProfit(rate, numOfHours, taxes){
return rate * numOfHours * (1 - taxes)
}
function holdForTaxes(profitMade){
return hourlyRate * hours - profitMade
}
let profit = calculateProfit(hourlyRate, hours, taxRate)
let taxesHeld = holdForTaxes(profit)
console.log(profit)
console.log(taxesHeld)
Can another developer look at my code and understand what is happening?
let hourlyRate = 250
let hours = 160
let taxRate = .35
function calculateProfit(rate, numOfHours, taxes){
return rate * numOfHours * (1 - taxes)
}
function holdForTaxes(profitMade){
return hourlyRate * hours - profitMade
}
let profit = calculateProfit(hourlyRate, hours, taxRate)
let taxesHeld = holdForTaxes(profit)
console.log(profit)
console.log(taxesHeld)
![](https://media3.giphy.com/media/ne3xrYlWtQFtC/giphy.gif)
let hourlyRate = 250
let hours = 160
let taxRate = .35
function calculateProfit(rate, numOfHours, taxes){
return rate * numOfHours * (1 - taxes)
}
let profit = calculateProfit(hourlyRate, hours, taxRate)
console.log(profit)
Can I make changes without losing sleep at night?
let hourlyRate = 250
let hours = 160
let taxRate = .35
function calculateProfit(rate, numOfHours, taxes){
return rate * numOfHours * (1 - taxes)
}
function holdForTaxes(profitMade){
return hourlyRate * hours - profitMade
}
let profit = calculateProfit(hourlyRate, hours, taxRate)
let taxesHeld = holdForTaxes(profit)
console.log(profit)
console.log(taxesHeld)
DATA & FUNCTIONALITY
![](https://media1.giphy.com/media/ljssLLBmv6xrO/giphy.gif)
let hourlyRate = 250
let hours = 160
let taxRate = .35
DATA
![](https://media4.giphy.com/media/lPwZcFRMGOFPO/giphy.gif)
Functionality
function calculateProfit(rate, numOfHours, taxes){
return rate * numOfHours * (1 - taxes)
}
![](https://media1.giphy.com/media/qXJelahXxRLFe/giphy.gif)
![](https://media4.giphy.com/media/P4TqKx6NHyLnO/giphy.gif)
let seriousBusinessPerson = {
hourlyRate: 250,
hours: 160,
taxRate: .35,
calculateProfit: function() {
return this.hourlyRate * this.hours * (1 - this.taxRate)
}
}
Is it easy to add new features and functionality?
let seriousBusinessPerson = {
hourlyRate: 250,
hours: 160,
taxRate: .35,
calculateProfit: function() {
return this.hourlyRate * this.hours * (1 - this.taxRate)
}
}
let seriousBusinessPerson = {
hourlyRate: 250,
hours: 160,
taxRate: .35,
calculateProfit: function() {
return this.hourlyRate * this.hours * (1 - this.taxRate)
}
calculateTaxesHeld: function(){
return this.hourlyRate * this.hours - this.calculateProfit()
}
}
Can another developer look at my code and understand what is happening?
let seriousBusinessPerson = {
hourlyRate: 250,
hours: 160,
taxRate: .35,
calculateProfit: function() {
return this.hourlyRate * this.hours * (1 - this.taxRate)
}
}
Can I make changes without losing sleep at night?
let seriousBusinessPerson = {
hourlyRate: 250,
hours: 160,
taxRate: .40, //changed
calculateProfit: function() {
return this.hourlyRate * this.hours * (1 - this.taxRate)
}
}
This fusion of data and functionality into one object
![](https://media4.giphy.com/media/P4TqKx6NHyLnO/giphy.gif)
Music & Light Warning - Next Slide
Encapsulation Baby
![](https://media1.giphy.com/media/d0NnEG1WnnXqg/giphy.gif)
![](https://media2.giphy.com/media/GdAmjKhcXWJ6U/giphy.gif)
Encapsulation
The process of storing functions (methods) with their associated data (properties) - in one thing (object)*
*Nerds shaking violently
Is it easy to add new features and functionality?
![](https://media2.giphy.com/media/HhZH4m2aNc9WMMb33e/giphy.gif)
Heats water for espresso and steam for your milk
Steam wand sucks...
What should the engineers do?
Do they get rid of the water boiler?
probably not...
At first, do they even need to think about the water boiler?
So the water boiling is abstracted?
![](https://media4.giphy.com/media/wrBURfbZmqqXu/giphy.gif)
Let's look at some code
function AgencyContractor(hourlyRate, hours, taxRate){
this.hourlyRate = hourlyRate
this.hours = hours
this.taxRate = taxRate
this.calculateProfit = function() {
return this.hourlyRate * this.hours * (1 - this.taxRate)
}
this.invoiceClient = function(){
return `Your invoice total is ${this.hourlyRate * this.hours}`
}
}
let leon = new AgencyContractor(250,160,.35)
console.log( leon.invoiceClient() ) //40000
console.log( leon.hourlyRate ) //250
console.log( leon.calculateProfit() ) //26000
Ut Oh...
function AgencyContractor(hourlyRate, hours, taxRate){
this.hours = hours
this.taxRate = taxRate
let rate = hourlyRate
let calculateProfit = function() {
return rate * this.hours * (1 - this.taxRate)
}
this.invoiceClient = function(){
return `Your invoice total is ${rate * this.hours}`
}
}
let leon = new AgencyContractor(250,160,.35)
console.log( leon.invoiceClient() ) //40000
console.log( leon.hourlyRate ) //undefined
console.log( leon.calculateProfit() )
//Uncaught TypeError: leon.calculateProfit is not a function
Better...
*Nerds shaking violently
So now my client can still get their invoice, but not see my hourly rate
Water boiling was hidden from the steam wand
Hourly rate was hidden from the client
Complex or unnecessary details are hidden
This enables you to implement things without understanding or even thinking about all the hidden complexity
Smaller more manageable pieces of code
Do stuff once
Music & Light Warning - Next Slide
Abstraction Baby
![](https://media0.giphy.com/media/mks5DcSGjhQ1a/giphy.gif)
![](https://media2.giphy.com/media/GdAmjKhcXWJ6U/giphy.gif)
Abstraction
Hide details
and show essentials
SIMPLE, PREDICTABLE, MANAGEABLE
Let's Start A Farm
class Animal{
constructor(name){
this.name = name
}
speak(){
console.log(`${this._name} makes a sound`)
}
}
What if we want a bunch of different animals on the farm?
class Animal{
constructor(name){
this.name = name
}
speak(){
console.log(`${this.name} makes a sound`)
}
}
class Dog extends Animal{
constructor(name,breed){
super(name)
this.breed = breed
}
}
let simba = new Dog('Simba', 'Sheperd')
We can extend animal
* If you find yourself starting to create a number of objects that have similar features, then creating a generic object type to contain all the shared functionality and inheriting those features in more specialized object types can be convenient and useful.
We just eliminated a bunch of redundant code
AKA
Music & Light Warning - Next Slide
Inheritance BABY
![](https://media1.giphy.com/media/GcO6KBd1C16F2/giphy.gif)
![](https://media2.giphy.com/media/GdAmjKhcXWJ6U/giphy.gif)
Inheritance
Make a class from another class for a hierarchy of classes that share a set of properties and methods
![](https://s3.amazonaws.com/media-p.slid.es/uploads/549074/images/7760929/xzibit.jpeg)
Let's Code
Make A Child Class
![](https://s3.amazonaws.com/media-p.slid.es/uploads/549074/images/7626184/Learn_with_Leon_v2__bonus_.png)
Back To The Farm
New workers keep renaming animals in our system
class Animal{
constructor(name){
this.name = name
}
speak(){
console.log(`${this.name} makes a sound`)
}
}
let simba = new Animal('Simba')
simba.name // "Simba"
simba.name = 'Bob' //nothing happens
simba.name // "Bob"
What could help here?
![](https://media4.giphy.com/media/I3wsrN9ndx11m/giphy.gif)
class Animal{
constructor(name){
this._name = name
}
get name(){
return this._name
}
speak(){
console.log(`${this._name} makes a sound`)
}
}
let simba = new Animal('Simba')
simba.name // "Simba"
simba.name = 'Bob' //nothing happens
We just rescued a bunch of animals!
How should we build out our system?
Let's Code
Animal System
![](https://s3.amazonaws.com/media-p.slid.es/uploads/549074/images/7626184/Learn_with_Leon_v2__bonus_.png)
We want to do a morning roll call and fortunately Dr. Dolittle works here
ROLL CALL
![](https://media1.giphy.com/media/11p0HvVs1hhOX6/giphy.gif)
let simba = new Dog('Simba','Shepard')
let machi = new Dog('The Machine','Pitbull')
let salem = new Cat('Salem', 'American Shorthair')
let farm = [simba,machi,salem]
for( a of farm ){
a.speak()
}
//Simba barks
//Machi barks
//Salem Meows
Wait A Minute
![](https://media1.giphy.com/media/l0HlFZfztLH0oGtgY/giphy.gif)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/549074/images/8299079/hands-on-knees.png)
for( a of farm ){
a.speak()
}
//Simba barks
//Machi barks
//Salem Meows
Code written to use an interface automatically knows how to work with any number of different objects that provide the interface
![](https://media3.giphy.com/media/4MSmydoaxjAju/giphy.gif)
Sibling descendants of a base class will all have the same interface but varying implementations
![](https://media2.giphy.com/media/4cQSQYz0a9x9S/giphy.gif)
When you are not sure of the objects type at runtime and the most specific method is called.
Therefore the behavior of the method called may differ, depending on the objects type at runtime
![](https://media4.giphy.com/media/YlTTSoWfgGxZ3u5h18/giphy.gif)
for( a of farm ){
if(a instanceof Dog){
console.log('Bark')
}else if (a instanceof Cat){
console.log('Meow')
}
}
//Simba barks
//Machi barks
//Salem Meows
Disgusting
Why?
Provides a way to perform a single action in different forms.
Provides an ability to call the same method on different JavaScript objects.
Instead of conditionals and switch cases
Music & Light Warning - Next Slide
POLYMORPHISM BABY
![](https://media0.giphy.com/media/bbJzFFikFRNy1nCkQt/giphy.gif)
![](https://media2.giphy.com/media/GdAmjKhcXWJ6U/giphy.gif)
The Four Pillars
What if they actually made any sense...
Encapsulation
The process of storing functions (methods) with their associated data (properties) in one thing (object)
BUT WHY?
![](https://media3.giphy.com/media/fGOjgWRzQkC2sHHnq7/giphy.gif)
Made it easier to add new stuff
Made it easier to read through what was already coded
And made it so you were not afraid to make changes
Abstraction
Hide details
and show essentials
BUT WHY?
![](https://media3.giphy.com/media/fGOjgWRzQkC2sHHnq7/giphy.gif)
Smaller more manageable pieces of code
Helps you to split the complexity your software project into manageable parts
Make code changes and still sleep at night
Inheritance
Make a class from another class for a hierarchy of classes that share a set of properties and methods
BUT WHY?
![](https://media3.giphy.com/media/fGOjgWRzQkC2sHHnq7/giphy.gif)
Helps you eliminate redundant code
Polymorphism
Code written to use an interface automatically knows how to work with any number of different objects that provide the interface
BUT WHY?
![](https://media3.giphy.com/media/fGOjgWRzQkC2sHHnq7/giphy.gif)
Helps you avoid if/else and switch cases
Makes your code more reusable
Supports The
Other Pillars
Group Work
![](https://media4.giphy.com/media/RJW92h4vWo8GeQZyE6/giphy.gif)
https://live.remo.co/e/100devs-networking-night-group-0
https://live.remo.co/e/100devs-networking-night-group-0-1
If Remo does not work for you, please jump into one of our
Discord Voice Channels!
Talk Through OOP
Right Of Passage
![](https://media3.giphy.com/media/26grMgCg1xZh28AF2/giphy.gif)
https://live.remo.co/e/100devs-networking-night-group-0
https://live.remo.co/e/100devs-networking-night-group-0-1
If Remo does not work for you, please jump into one of our
Discord Voice Channels!
Get It To Work
Then:
Make it easier to add new stuff
Make it easier to read through what was already coded
And make it so you are not afraid to make changes
Homework
DO: Please review, play, and break the code we go over tonight.
Get lost in it, come with questions, and ready to review on Thursday.
DO: Get a paid client, Volunteer, or Contribute To Free Software
DO: FINISH Professional Checklist
Want To Push (Due: Tues. May 5th)?
Do: Codewars Array Ladder (search array problems) - 8kyu, 7kyu, 6kyu, 7kyu, 8kyu
![](https://media.giphy.com/media/3oEjI5pYnV0zNvKzXa/source.gif)
#100Devs - Javascript OOP Part 2 (cohort 2)
By Leon Noel
#100Devs - Javascript OOP Part 2 (cohort 2)
Class 31 of our Free Web Dev Bootcamp for folx affected by the pandemic. Join live T/Th 6:30pm ET leonnoel.com/twitch and ask questions here: leonnoel.com/discord
- 3,536