ES6 Cla$$e$ & OOP

ES6 Classes & OOP

BY THE END OF TODAY YOU SHOULD BE ABLE TO:

Discuss the 4 pillars of OOP

Write setters and getters for an ES6 class

Distinguish between static and instance methods

Solve real world problems with OOP

Use object instantiations in concert with each other

4 Pillars

4 Pillars

Abstraction*

Encapsulation

Polymorphism

Inheritance

When we discuss Object Oriented Programming, we typically talk about the 3 or 4 main pillars

Abstraction is sometimes excluded as a pillar as it's kind of the idea behind Abstraction

4 Pillars

Abstraction & Encapsulation

class PowerPuffGirl {
  constructor ({ name, strength }) {
    this.name = name
    this.strength = strength
  }
}

4 Pillars

Abstraction & Encapsulation

class PowerPuffGirl {
  constructor ({ name, strength }) {
    this.name = name
    this.strength = strength
  }

  fight () {
    const random = Math.random() * strength
    return Math.round(random)
  }
}

const buttercup = new PowerPuffGirl('Buttercup', 20)
const damage = buttercup.fight()
console.log(damage)

4 Pillars

Abstraction & Encapsulation

class PowerPuffGirl {
  constructor (name, strength) {
    this.name = name
    this.strength = strength
    this.__luck = Math.ceil(Math.random() * 10)
  }

  fight () {
    const random = Math.random() * this.strength
    const damage = Math.round(random) + this.__luck
    return damage
  }
}
const blossom = new PowerPuffGirl('Blossom', 18)
const damage = blossom.fight()
console.log(damage)

4 Pillars

Before moving ahead, turn to your neighbor and describe Abstraction & Encapsulation in your own words

4 Pillars

Polymorphism & Inheritance

4 Pillars

Polymorphism & Inheritance

class Hero {
  constructor (name, strength) {
    this.name = name
    this.strength = strength
    this.__luck = Math.ceil(Math.random() * 10)
  }

  fight () {
    const random = Math.random() * this.strength
    const damage = Math.round(random) + this.__luck
    return damage
  }
}
class PowerPuffGirl extends Hero {
  constructor (name, strength, ingredient) {
    super(name, strength)
    this.ingredient = ingredient
  }
}
class Amazon extends Hero {
  constructor (name, strength, team) {
    super(name, strength)
    this.team = team
  }
}

4 Pillars

Polymorphism & Inheritance

class PowerPuffGirl extends Hero {
  constructor (name, strength, ingredient) {
    super(name, strength)
    this.ingredient = ingredient
  }
}
class Amazon extends Hero {
  constructor (name, strength, team) {
    super(name, strength)
    this.team = team
  }
}
const bubbles = new PowerPuffGirl('Bubbles', 15, 'sugar')
const wonderWoman = new Amazon('Diana', 24, 'The Justice League')

const bubblesAtk = bubbles.fight()
const wonderWomanAtk = wonderWoman.fight()

console.log(bubblesAtk, wonderWomanAtk)

4 Pillars

Polymorphism & Inheritance

class Battle {
  constructor (characters) {
    this.characters = characters
    this.roundCount = 1
  }

  round () {
    console.log(`Round ${this.roundCount++}\n----`)

    this.characters.forEach(character => {
      const attack = `${character.name} attacks! (${character.fight()} damage)`
      console.log(attack)
    })
  }
}
const battle = new Battle([ bubbles, wonderWoman ])
battle.round()

4 Pillars

Before moving ahead, turn to your neighbor and describe Inheritance & Polymorphism in your own words

4 Pillars

Practice Time

Build your own Class that extends the Hero class. Make sure to include at least one Class-specific property.

 

Check with an instructor once you're done.

setters & getters

Setters & getters

We can either set or get properties on an instance of an object

A setter manages the assignment of values

A getter manages the retrieval of information

One implementation might look like this:

class Spy {
  constructor (name) {
    this.name = name
  }

  getName () {
    return this.name
  }

  setName (val) {
    this.name = val
  }
}

Setters & getters

Why would we do this?

Allows for us to "hide" private variables

Allows for conditionally setting or getting properties

✨ Encapsulation ✨

Normally, setting and getting in JavaScript looks like this:

const spy = {}
spy.name = 'James' // setting
console.log(spy.name) // getting

Setters & getters

Let's combine these two ways:

const spy = new Spy('James')
spy.name = 'Alec' // setting
console.log(spy.name) // getting

class Spy {
  constructor (name) {
    this._name = name
  }

  get name () {
    return this._name
  }

  set name (val) {
    this._name = val
  }
}

We have a "private" variable here to store the value

Let's take a look at what this can do for us.

Setters & getters

Q: What will get logged out?

const spy = new Spy('James')
spy.name = 'Alec'
console.log(spy.name)
class Spy {
  constructor (name) {
    this._name = name
  }

  get name () {
    return this._name
  }

  set name (val) {
    if (!this._name) {
      this._name = val
    }
  }
}

A: 'James'

Now we won't be able to reassign the name after it has been set!

Setters & getters

Except:

const spy = new Spy('James')
spy.name = 'Alec'
console.log(spy.name) // 'James'
spy._name = 'Alec'
console.log(spy.name) // 'Alec'
class Spy {
  constructor (name) {
    this._name = name
  }

  get name () {
    return this._name
  }

  set name (val) {
    if (!this._name) {
      this._name = val
    }
  }
}

We can still make mistakes without an error being thrown.

Setters & getters

Practice Time
 

Add a setter for the _isDoubleAgent property but do not create a getter for it. What happens when you try and get the value?

static & instance

static & instance

Instance methods work by operating on individual instances of a Class. They typically rely upon information about the specific instance.

class Rectangle {
  constructor (height, width) {
    this.height = height
    this.width = width
  }

  getArea () {
    return this.height * this.width
  }
}

You are likely most familiar with these.

static & instance

Static methods operate on the class itself. We've used this many times in JavaScript:

Object.keys(...)
Array.isArray(...)
Math.random(...)
Number.isNaN(...)

These methods do not require a new instance of the class to be created; rather, they work with the inputs they're given.

static & instance

We can build static methods to allow for utility methods to be used without making a new instance.

class Rectangle {
  constructor (height, width) {
    this.height = height
    this.width = width
  }

  get area () {
    return this.height * this.width
  }

  static area (height, width) {
    return height * width
  }
}

static & instance

Practice Time
 

Create a new class called Circle that has a diameter property. Write a getter that will return the area of the circle as well as a static method that will do the same.

 

HINT: You'll need to use Math.PI -- it is not a static method, so what is it?

let's get coding

let's get coding

Go to the Objects in Space repository and follow the installation instructions.

With a partner, go through the
Exploring this repository section

When you've finished, read over the Activity
section and we'll work on the problem together!

ES6 Classes & OOP

BY THE END OF TODAY YOU SHOULD BE ABLE TO:

Discuss the 4 pillars of OOP

Write setters and getters for an ES6 class

Distinguish between static and instance methods

Solve real world problems with OOP

Use object instantiations in concert with each other

ES6 Classes in JavaScript

By Wes Reid

Made with Slides.com

ES6 Classes in JavaScript

Slides discussing using OOP in JavaScript

  • 968

More from Wes Reid