0.10: Introduction to Classes

Search…
Classes are templates for creating objects.
Without classes, this is how you would probably create multiple car objects.
var car1 = {
    brand: "ferrari",
    color: "red",
    };
​
var car2 = {
    brand: "volkswagon",
    color: "blue",
    };
​
var car3 = {
    brand: "toyota",
    color: "black",
    };
An optimization to this method would be using a function to generate the objects.
function createCar(brand, color) {
    return {
    brand: brand,
    color: color,
    };
}
​
var car1 = createCar("ferrari", "red");
var car2 = createCar("volkswagon", "blue");
var car3 = createCar("toyota", "black");
Classes are templates for creating objects
See the code below. Note the use of the new keywords class, constructor and new.
The keyword class is used when declaring a new class. The keyword constructor is the special name of the function that creates and returns the new object. The keyword new is used when using a constructor to create a new object.
class Car {
    constructor(brand, color) {
        this.brand = brand;
        this.color = color;
    }
}
​
var car1 = new Car("ferrari", "red");
var car2 = new Car("volkswagon", "blue");
​
class User {
    constructor(name, email, pw) {
        this.name = name;
        this.email = email;
        this.passwordHash = pw;
    }
}
​
var user1 = new User("someone", "[email protected]", "xxxx...xxxx");
var user2 = new User("someone else", "[email protected]", "xoxo...xoxo");
Methods
The power of using classes is seen when you add methods to a class declaration. Methods can be thought of as helper functions, build in to the class.
class Car {
  constructor(brand, color) {
      this.brand = brand;
      this.color = color;
  }
//------------------------------------------------
//method declared using regular function syntax
  repaint(newColor) {
      this.color = newColor;
  }
//------------------------------------------------
}
​
var car1 = new Car("ferrari", "red");
​
console.log(car1.color); //red
car1.repaint('black');
console.log(car1.color); //black
​
class User {
  constructor(name, email, pw) {
      this.name = name;
      this.email = email;
      this.passwordHash = pw;
  }
//------------------------------------------------
//method declared using arrow function syntax
  resetPassword = () => this.passwordHash = ".";
//------------------------------------------------
}
​
​
var user1 = new User("someone", "[email protected]", "xxxx...xxxx");
console.log(user1.passwordHash); //xxxx...xxxx
user1.resetPassword();
console.log(user1.passwordHash); //.
Using Classes is a great tool for organizing your code
As your write larger, more complex apps with more data and even more functions to process that data, organizing your code in classes will be invaluable.
Exercise
Think of your more complex recent projects, i.e. UFO Sightings, Bird Watching, Recipes, Labels, Categories, etc.
How would using classes help you keep your code clean?
0.9: VSCode Node Debugger
0.ICE: In-Class Exercises
Last modified 5mo ago
Copy link
On this page
Classes are templates for creating objects
Methods
Using Classes is a great tool for organizing your code
Exercise