Lesson on Object Oriented Programming in JavaScript
Clone or download
Pull request Compare This branch is 7 commits behind ga-wdi-lessons:master.
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
demo
.travis.yml
LICENSE
readme.md

readme.md

Object-Oriented Programming in Javascript

Learning Objectives

  • Answer the question, what is Object-Oriented Programming (OOP)?
  • Identify and define: a class, an instance, and a constructor
  • Create a class
  • Use the new keyword to create instances of a class
  • Define the concept of inheritance as it pertains to classes
  • Create a class that inherits from another using the extends and super keywords

Overview

  1. Review of Objects
  2. Intro to OOP in JS
  3. Classes in ES6
  4. Inheritance

Schedule

Time Section
10 min Review Objects
10 min Intro to OOP
15 min Defining a Class
10 min Domain Modeling and build your first class
10 min Classes in ES6
20 min Make an ATM Class
10 min Break
15 min Inheritance
20 min Inheritance Exercise
10 min Closing

Intro

1. Review of Objects in JS (10 minutes / 0:10)

The important thing to remember about objects is that they encapsulate related data and behavior into an organized structure. We saw this when we discussed object literal notation. Recall that we can define an object like this:

let car = {
  make: "Honda",
  model: "Civic",
  color: "red",
  drive: function(){
    console.log("vroom vroom")
  },
  gps: function(location){
    console.log(`Beep boop, driving to ${location}`)
  },
  paint: function( newColor ){
    console.log(`Your car has been painted ${newColor}`)
    this.color = newColor
  }
}

Quick Quiz

  1. What is a key-value pair?
  2. What is a property of an object?
  3. What is a method?
  4. Can we store anything in an object?

We're doing two really important things here:

  1. We're encapsulating all data and behavior for a car inside a single object (i.e. a single place)
  2. We're modeling some real world thing inside our code

The second point is the basis of Object-Oriented Programming and what makes it so powerful.

Why might we want to model real world things in our code?

Example: lets say we're building an app for a car rental company (Rent-a-Car). If they buy a new car to rent out to customers, they'll want to manage that new car inside the app we're building for them. Do we want to create a new object like the one above for each car new car?

2. Intro to OOP in JS (5 minutes / 0:15)

Before we get in to OOP in JS there are a few loose ends we need to tie up:

1. What is scope?
Scope is a sealed context within a program.
2. Do Objects have scope in JS?
They do not! Only functions have scope.
3. What `type` is a function?
Well it's a function, but a function is a type of object!

We Do: Defining a class (10 minutes / 0:25)

Lets check out one.js in the demos/ folder!

ES5 Class
```js
function Car(make, model, color) {
	this.make = make;
	this.model = model;
	this.color = color;
	this.drive = () => console.log('vroom vroom');
	this.gps = location => console.log(`driving to ${location}`);
	this.paint = newColor => (this.color = newColor);
}
```

Vocabulary:

Class - an object that models real world things in our application

Instance - a object defined by our class

Constructor - the function that defines instances of our class

You Do: Domain Modeling and building your first class! (10 minutes / 0:35)

Lets check out two.js in the exercises/ folder!

3. Classes in ES6 (10 minutes / 0:25)

Understanding the old syntax is important for understanding the new syntax. With ES6, the language was updated to bring the syntax more inline with how other popular programming languages handle OOP. This includes the introduction of the class keyword. Nothing changed under the hood, just what we type to create a class.

Lets checkout three.js in the exercises/ folder!

Solution
class Car {
  constructor(make, model, color) {
    this.make = make
    this.model = model
    this.color = color
  }

  drive() {
    console.log('vroom vroom')
  }

  gps( location ) {
    console.log(`beep beep, driving to ${location}`)
  }

  paint( newColor ) {
    this.color = newColor
  }
}

This is the syntax that you'll see most frequently now!

You Do: Make an ATM Class (20 minutes / 1:05)

15 minutes exercise. 5 minutes review.

Break (10 minutes / 1:15)

4. Inheritance (15 minutes / 1:30)

Often we'll need to take our class and expand on it for particular types of implementations of it. Think about types of Cars, for instance. For this case, we create sub-classes through a process called Inheritance.

In ES6, we extend an existing class with the extend keyword. This will let us create a subclass:

class Car {
  constructor(make, color) {
    this.make = make
    this.color = color
  }
}

class Toyota extends Card {
  drive() {
    console.log('vroom vroom')
  }
}

If we have properties that we want to add to our subclass, we still need to take in the properties for our parent class, and pass them up to our parent class with super.

class Car {
  constructor(model, color) {
    this.model = model
    this.color = color
  }
}

class Toyota extends Card {
  constructor(model, color) {
    super(model, color)
    this.make = 'Toyota'
  }
  drive() {
    console.log('vroom vroom')
  }
}

You Do: Inheritance (20 minutes / 1:50)

15 minutes exercise. 5 minutes review.


Closing / Questions (10 minutes / 2:00)

  • What are the benefits to using an OOP approach to programming?
  • What is a class? What is new? How are they related?
  • What does it mean to use "inheritance" when working with classes?
  • How do we indicate that one class inherits from another?
  • What does super mean?

Homework: Geometry

Additional Reading

Prototypical Inheritance