Slide 1 of 70
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
Slide 2 of 70Agenda
- 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
Slide 3 of 70
Questions
About last class or life
Slide 4 of 70Checking In
Like and Retweet the Tweet
!checkin
Slide 5 of 70!newsletter
Slide 6 of 70GIT BOWL
MONDAY
6:30pm EST
Slide 7 of 70Networking - Next Week
Alternatives?
Slide 8 of 70Client Deadline: May 17th
Slide 9 of 70Client Alternatives
Slide 10 of 70Grassroots Volunteer*
Slide 12 of 70SO CLOSE
Slide 13 of 70Fresh Start
Slide 14 of 70
Discord Gold & VIP
!clan
Slide 15 of 70Project & !pokemon
Slide 16 of 70Big News
Music & Light Warning - Next Slide
Slide 17 of 70#100Devs Agency
Slide 18 of 70BUT WHY?
Slide 19 of 70
Education Should Be Free
Education Should Provide A Stipend
Education Should Be Practical
Slide 20 of 70OPEN CORE
#100Devs Stream Team
#100Devs Blog
Slide 21 of 70
Slide 22 of 70Never Miss The Stream Team
Slide 23 of 70
Friday @ 11:00am ET!
Slide 24 of 70Finna Make Sum Nerds Angry
Slide 25 of 70Objects
What are objects?
Slide 26 of 70Objects
-
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
Slide 27 of 70Think of a physical object
What are it's attributes and behaviors?
Slide 28 of 70
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!
Slide 29 of 70BUT WHY?
Why Use Objects?
Why Would We Need A Factory?
Slide 30 of 70
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
Slide 31 of 70OOP BABY
Slide 32 of 70OBJECT ORIENTED PROGRAMING
Slide 33 of 70Let's Talk About It
Slide 34 of 70This fusion of data and functionality into one object
Music & Light Warning - Next Slide
Slide 35 of 70Encapsulation Baby
Slide 36 of 70Encapsulation
The process of storing functions (methods) with their associated data (properties) - in one thing (object)*
*Nerds shaking violently
Slide 37 of 70Complex or unnecessary details are hidden
Slide 38 of 70This enables you to implement things without understanding or even thinking about all the hidden complexity
Slide 39 of 70Smaller more manageable pieces of code
Slide 40 of 70Do stuff once
Music & Light Warning - Next Slide
Slide 41 of 70Abstraction Baby
Slide 42 of 70Abstraction
Hide details
and show essentials
SIMPLE, PREDICTABLE, MANAGEABLE
Slide 43 of 70Create New Objects Based On Old Ones
Slide 44 of 70We just eliminated a bunch of redundant code
AKA
Music & Light Warning - Next Slide
Slide 45 of 70Inheritance BABY
Slide 46 of 70Inheritance
Make a class from another class to share a set of properties and methods
Slide 47 of 70
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
Slide 48 of 70Instead of conditionals and switch cases
Music & Light Warning - Next Slide
Slide 49 of 70POLYMORPHISM BABY
Slide 50 of 70The Four Pillars
What if they actually made any sense...
Slide 51 of 70Encapsulation
The process of storing functions (methods) with their associated data (properties) in one thing (object)
Slide 52 of 70BUT WHY?
Slide 53 of 70
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
Slide 54 of 70Abstraction
Hide details
and show essentials
Slide 55 of 70BUT WHY?
Slide 56 of 70
Smaller more manageable pieces of code
Helps you to split the complexity your software project into manageable parts
Slide 57 of 70Make code changes and still sleep at night
Slide 58 of 70Inheritance
Make a class from another class to share a set of properties and methods
Slide 59 of 70BUT WHY?
Slide 60 of 70Helps you eliminate redundant code
Slide 61 of 70Polymorphism
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
Slide 62 of 70BUT WHY?
Slide 63 of 70Helps you avoid if/else and switch cases
Slide 64 of 70
Makes your code more reusable
Slide 65 of 70
Supports The
Other Pillars
Slide 66 of 70Let's Code
Let's Build An Agency
Slide 67 of 70Group Work
Slide 68 of 70Talk Through OOP
Come up with with a parent class
Extend that parent class into two children
Use Encapsulation, Abstraction, Inheritance, and Polymorphism
Slide 69 of 70Right Of Passage
Slide 70 of 70Homework
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
