Javascript - OOP BRING IT HOME
Leon Noel
#100Devs
I attended Harlem picnics where you risked your life
Uncle used to skim work, sellin' nicks at night
I was only 8 years old, watching Nick at Nite
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
Checking In
Like and Retweet the Tweet
!checkin
!newsletter
GIT BOWL
MONDAY
6:30pm EST
Networking - Next Week
Alternatives?
Client Deadline: May 17th
Client Alternatives
Grassroots Volunteer*
Free Software / Open Source
SO CLOSE
Fresh Start
Discord Gold & VIP
!clan
Project & !pokemon
Big News
Music & Light Warning - Next Slide
#100Devs Agency
BUT WHY?
Education Should Be Free
Education Should Provide A Stipend
Education Should Be Practical
OPEN CORE
#100Devs Stream Team
#100Devs Blog
Never Miss The Stream Team
Welcome, verolafox
Friday @ 11:00am ET!
Finna Make Sum Nerds Angry
Objects
What are objects?
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
What are it's attributes and behaviors?
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?
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
OBJECT ORIENTED PROGRAMING
Let's Talk About It
This fusion of data and functionality into one object
Music & Light Warning - Next Slide
Encapsulation Baby
Encapsulation
The process of storing functions (methods) with their associated data (properties) - in one thing (object)*
*Nerds shaking violently
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
Abstraction
Hide details
and show essentials
SIMPLE, PREDICTABLE, MANAGEABLE
Create New Objects Based On Old Ones
We just eliminated a bunch of redundant code
AKA
Music & Light Warning - Next Slide
Inheritance BABY
Inheritance
Make a class from another class to share a set of properties and methods
A piece of code that automagically works with a bunch of different objects
polymorphism allows us to override a method in every child class so it will do what we want
Instead of conditionals and switch cases
Music & Light Warning - Next Slide
POLYMORPHISM BABY
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?
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?
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 to share a set of properties and methods
BUT WHY?
Helps you eliminate redundant code
Polymorphism
A piece of code that automagically works with a bunch of different objects
polymorphism allows us to override a method in every child class so it will do what we want
BUT WHY?
Helps you avoid if/else and switch cases
Makes your code more reusable
Supports The
Other Pillars
Let's Code
Let's Build An Agency
Group Work
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
Come up with with a parent class
Extend that parent class into two children
Use Encapsulation, Abstraction, Inheritance, and Polymorphism
Right Of Passage
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!
Homework
DO: Please review, play, and break the code we go over tonight
DO: Get a paid client, Volunteer, or Contribute To Free Software
DO: FINISH Professional Checklist
Want To Push (Due: Tues. May 10th)?
Do: Codewars String Ladder (search String problems) - 8kyu, 7kyu, 6kyu, 7kyu, 8kyu
#100Devs - Javascript OOP Bring It Home (cohort 2)
By Leon Noel
#100Devs - Javascript OOP Bring It Home (cohort 2)
Class 32 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
