Classes and Methods

classes and methods are fundamental parts of coding.

Classes are a template for creating something. It defines what properties and behaviors the object should have.
For example the class car would define the color, the model, year released, etc.
Methods are an action that an object executes.
For example in the car example a method could be drive() or brake()
here is an example Code Runner using the example above. The code first creates a class which in this case is a car. It then defines the different properties of the car such as the brand, the color, and the speed. Lastly the method accelerate is defined, which increases speed by 10.

Why do you use Classes and Methods

Methods are used because they help keep the code simple. Instead of typing out a specific process everytime, you could just define a method once and then execute the method as needed.
For example if you are making a video game you can make a method called take damage which causes the player to lose health.
You would use classes to organize the code and when you have a set of data that goes together such as player, monster, ally etc.

%%js
class Car {
    constructor(brand, color) {
        this.brand = brand;
        this.color = color;
        this.speed = 0;
    }

    accelerate() {
        this.speed = this.speed + 10;
        console.log("The " + this.brand + " is now going " + this.speed + "mph.");
    }

    brake() {
        this.speed = this.speed - 10;
        if (this.speed < 0) this.speed = 0;
        console.log("The " + this.brand + " slowed down to " + this.speed + "mph.");
    }
}

let myCar = new Car("Toyota", "Blue");
myCar.accelerate(); // 10mph
myCar.accelerate(); // 20mph
myCar.brake();      // 10mph

%%js
class Car {
    constructor(speed, maxSpeed) {
        this.speed = speed;
        this.maxSpeed = maxSpeed;
    }

    accelerate() {
        if (this.speed < this.maxSpeed) {
            this.speed += 10;
            if (this.speed > this.maxSpeed) {
                this.speed = this.maxSpeed;
            }
        }
    }

    brake() {
        this.speed -= 10;
        if (this.speed < 0) this.speed = 0;
    }
}

let myCar = new Car(90, 100);
myCar.accelerate();
console.log(myCar.speed); // 100

Code Runner Challenge

Car example #3 Add stop method using while loop.

View IPYNB Source

%%js 

//CODE_RUNNER: Car example #3 Add stop method using while loop.

class Car {
  constructor(speed) {
    this.speed = speed;
  }

  brake() {
    this.speed -= 10;
    if (this.speed < 0) {
      this.speed = 0;
    }
  }

  stop() {
    // TODO:
    // Keep calling brake() until the car's speed is 0
  }
}

// Example usage:
let myCar = new Car(35);
myCar.stop();
console.log(myCar.speed); // should be 0

Lines: 1 Characters: 0

Output

Click "Run" in code control panel to see output ...

Homework

%%js
class Cat {
    constructor(name) {
        this.name = name;
        this.hunger = 100; // 100 = full, 0 = starving
    }

    eat() {
        this.hunger = Math.min(100, this.hunger + 30);
        console.log(this.name + " eats some food. Hunger: " + this.hunger);
    }

    meow() {
        if (this.hunger < 40) {
            console.log(this.name + " meows loudly... they're hungry!");
        } else {
            console.log(this.name + " meows contentedly.");
        }
    }
}

let myCat = new Cat("Whiskers");
myCat.meow(); // contentedly
myCat.hunger = 20;
myCat.meow(); // loudly/hungry
myCat.eat();  // hunger restored