0.10: Introduction to Classes

​
Classes are templates for creating objects.
Without classes, this is how you would probably create multiple car objects.
1
var car1 = {
2
    brand: "ferrari",
3
    color: "red",
4
    };
5
​
6
var car2 = {
7
    brand: "volkswagon",
8
    color: "blue",
9
    };
10
​
11
var car3 = {
12
    brand: "toyota",
13
    color: "black",
14
    };
Copied!
An optimization to this method would be using a function to generate the objects.
1
function createCar(brand, color) {
2
    return {
3
    brand: brand,
4
    color: color,
5
    };
6
}
7
​
8
var car1 = createCar("ferrari", "red");
9
var car2 = createCar("volkswagon", "blue");
10
var car3 = createCar("toyota", "black");
Copied!
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.
1
class Car {
2
    constructor(brand, color) {
3
        this.brand = brand;
4
        this.color = color;
5
    }
6
}
7
​
8
var car1 = new Car("ferrari", "red");
9
var car2 = new Car("volkswagon", "blue");
10
​
11
class User {
12
    constructor(name, email, pw) {
13
        this.name = name;
14
        this.email = email;
15
        this.passwordHash = pw;
16
    }
17
}
18
​
19
var user1 = new User("someone", "[email protected]", "xxxx...xxxx");
20
var user2 = new User("someone else", "[email protected]", "xoxo...xoxo");
Copied!
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.
1
class Car {
2
  constructor(brand, color) {
3
      this.brand = brand;
4
      this.color = color;
5
  }
6
//------------------------------------------------
7
//method declared using regular function syntax
8
  repaint(newColor) {
9
      this.color = newColor;
10
  }
11
//------------------------------------------------
12
}
13
​
14
var car1 = new Car("ferrari", "red");
15
​
16
console.log(car1.color); //red
17
car1.repaint('black');
18
console.log(car1.color); //black
19
​
20
class User {
21
  constructor(name, email, pw) {
22
      this.name = name;
23
      this.email = email;
24
      this.passwordHash = pw;
25
  }
26
//------------------------------------------------
27
//method declared using arrow function syntax
28
  resetPassword = () => this.passwordHash = ".";
29
//------------------------------------------------
30
}
31
​
32
​
33
var user1 = new User("someone", "[email protected]", "xxxx...xxxx");
34
console.log(user1.passwordHash); //xxxx...xxxx
35
user1.resetPassword();
36
console.log(user1.passwordHash); //.
Copied!
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: Language and Tooling - Previous

0.9: VSCode Node Debugger

Next - 0: Language and Tooling

0.ICE: In-Class Exercises

Last modified 10d ago

Copy link

Contents

Classes are templates for creating objects

Methods

Using Classes is a great tool for organizing your code

Exercise